cum să creați file WordPress inteligente și frumoase

 file WordPress

fapt distractiv: ați observat că chiar wordpress.org folosește filele WordPress pentru a strânge informații?

verificați acest lucru:  filele WordPress pe wordpress.org

Sursa: wordpress.org

filele WordPress sunt un tip de navigare care poate îmbunătăți experiența clienților. Cum așa? Prin a nu aglomera o mulțime de informații în paragrafe, ci folosind o metodă de organizare mai bună.

navigarea cu File este similară cu organizarea fișierelor într-un birou sau la medic.

a nu se confunda cu meniurile. De cele mai multe ori, elementele de meniu deschid o pagină separată cu propria adresă URL. Aici nu se va întâmpla nicio modificare a adresei URL.

a nu se confunda nici cu acordeoanele. Un acordeon va stiva informații pe verticală. Anteturile pot fi făcute clic pentru a dezvălui sau ascunde conținutul asociat acestora.

acum, de ce site-ul dvs. WordPress ar avea nevoie de file? Pentru a îmbunătăți Navigarea, gradul de utilizare și, prin urmare, satisfacția clienților și ratele de conversie.

o mulțime de motive, nu?

navigarea cu File este încă o practică obișnuită în comerțul electronic pentru a prezenta produse. Mulți vizitatori recunosc deja filele sau așteaptă file în anumite locuri.

să presupunem că vindeți electronice. Va trebui să prezinte o mulțime de informații despre produs:

  • Descriere produs
  • Fotografii produs
  • specificatii tehnice
  • Comentarii
  • Info garanție
  • detalii de transport

File va ajuta să comprima conținut mare în spații limitate.

acum, în acest articol, vom începe prin a vă oferi o inspirație pentru designul filelor. Apoi, vom merge un pic în unele cele mai bune practici de caz. În cele din urmă, vă voi ghida prin aspectele tehnice ale filelor WordPress.

să mergem!

file: unele inspirație

acum, să verificați unele site-uri acolo care folosesc file. Sunt cu siguranță pentru dovezi. Imaginile pot explica lucruri mai bune decât cuvintele, nu crezi?

să vedem, eBay folosește file pentru descrierea produsului. Toate specificațiile tehnice intră sub „descriere” și au adunat „expediere și plată” sub aceeași filă. Sunt destul de sigur că au testat aspectul, deoarece, pentru un site cu un astfel de trafic, orice modificare poate afecta puternic ratele de conversie.

eBay utilizează file

Sursa: ebay.com

BobbyBrown cosmetics merge pentru o abordare minimalistă, filele nu au o abordare asemănătoare butonului. Ei folosesc o subliniere pentru a informa utilizatorul că a selectat o filă.

file de pe site-ul web BobbyBrown cosmetics

Sursa: bobbibrowncosmetics.com

mă simt mereu pierdut când merg la booking.com. ei au o mulțime de informații de care aveți nevoie pentru a defila în jos pentru. Recent am observat că au făcut unele modificări pentru a reduce defilarea, dar totuși, nu este suficient (pentru mine).

Trivago, pe de altă parte, pare să organizeze informațiile puțin mai bine. Știu că este greu de făcut atunci când trebuie să oferiți atât de multe detalii.

folosesc file pentru a organiza informații despre hotel, cum ar fi Prezentare generală, informații, fotografii, recenzii, oferte.

file utilizate de Trivago

Sursa: trivago.com

tab-urile sunt o practică obișnuită pe site-urile web care oferă pachete de călătorie, cum ar fi zboruri, cazare, Închirieri auto.

Expedia o face frumos atunci când își prezintă oferta pentru 6 servicii. Experiența este curată și neintruzivă.

Expedia utilizează file pentru servicii sursă: expedia.com

Honda folosește filele într-un mod mai creativ. Amestecă imagini și videoclipuri alături de text pentru a vinde o experiență Honda excelentă.

înregistrare ecran 2020-10-29 la 02.29.55.65 PM.gif

Sursa: automobiles.honda.com

file WordPress: cele mai bune practici de caz

pur și simplu, filele sunt un set de butoane setate de obicei orizontal. Acesta este motivul pentru care designul lor ar trebui să fie foarte aproape de un design de buton.

acum, să ne uităm puțin la cele mai bune practici pentru utilizarea filelor pe site-ul dvs. WordPress:

  • nu mergeți pentru mai multe rânduri, va fi greu pentru utilizator să-și amintească ce filă a vizitat. Dacă vă dați seama că aveți nevoie de mai multe rânduri, aceasta înseamnă că va trebui să găsiți o modalitate mai bună de a organiza informații
  • păstrați titlurile filelor scurte și dulci
  • Utilizați filele numai atunci când utilizatorii nu trebuie să vadă conținut din mai multe file în același timp
  • indicați clar ce filă este activă
  • filele neselectate ar trebui să rămână vizibile și să nu se piardă în fundal
  • asigurați-vă că fila dvs. apare ca butoane separate cu care puteți interacționa
  • adăugați efecte de hover pe File așa cum ați face pe butoanele
  • utilizați filele atunci când aveți între două și nouă diferite categorii de conținut
  • categoriile sunt similare în natură, un utilizator s-ar aștepta să le vadă acolo (de exemplu: Descriere produs, Recenzii produs)
  • nu utilizați navigarea cu file atunci când intenționați să introduceți un link „mai mult”
  • puteți utiliza gradienți pentru a adăuga adâncime și dimensiune filelor.

cum se creează filele WordPress folosind constructorii de pagini

folosesc constructorul de pagini Colibri în scopul acestui exercițiu.

filele pot fi găsite ca o componentă.

puteți găsi componente atunci când faceți clic pe „+” din stânga sus.

adăugați componente WordPress

componenta tab WordPress

accesați componente și trageți componenta „Tab” în previzualizarea site-ului dvs. din dreapta.

apoi, puteți juca cu opțiunile de personalizare din stânga.

Personalizați fila WordPress

când fila dvs. arată așa cum doriți, apăsați „publicați” și sunteți live.

file: un plugin care vă ajută să configurați filele WordPress

dacă rulați un magazin online integrat cu WooCommerce, în WordPress există două pluginuri foarte populare pentru filele WordPress.

WooCommerce WordPress file

Sursa: wordpress.org

dar, vreau să vă prezint un favorit al meu: file.

file WordPress plugin

Sursa: wordpress.org

Tabs are o mulțime de opțiuni de personalizare pe care le veți îndrăgi în curând. De ce simt că te va iubi prea:

  • va proiecta mobile-friendly WordPress file
  • puteți lucra cu Scurtăturile
  • file funcționează prin drag and drop
  • ea are 20+ template-uri de design, astfel încât să nu aveți nevoie să deranjez cu inspirație
  • 500 + Google Fonturi
  • file funcționează cu cele mai multe temele de acolo.

file WordPress: concluziile

filele sunt aici pentru a face informațiile mai ușor de digerat într-o lume cu o atenție mai scurtă. În ceea ce privește instrumentele, există o mulțime de ele care vă pot ajuta să configurați filele WordPress. Acesta este cel mai ușor lucru de făcut.

mai important este să vă dați seama ce fel de informații se pot încadra în filele dvs. Dacă nu sunteți sigur că o filă vă va ajuta să organizați anumite informații, puteți face întotdeauna unele cercetări ale utilizatorilor sau un test A/B. Presupunerile noastre nu sunt suficiente. Datele comportamentale reale vă vor conduce la răspunsul corect.

la sfârșitul zilei, trebuie să vă pese de utilizare, chunking și viteza site-ului web.

acum, dacă ți-a plăcut acest articol și vrei să afli mai multe despre cum să proiectezi un site web WordPress, asigură-te că te abonezi la canalul nostru Youtube și urmărește-ne pe Twitter și Facebook!

Alina Este un marketer digital cu o pasiune pentru web design. Când nu strategizează, face fotografie, ascultă podcast-uri despre istorie și Psihologie și se joacă cu cei 2 câini și pisică.

Leave a Reply

Adresa ta de email nu va fi publicată.