Cum se creează file de defilare verticală în WordPress cu elementor

Filele de defilare verticală vă permit să afișați conținut cu file într-un aspect înalt, cot la cot. Filele rămân stivuite pe partea stângă sau dreapta, în timp ce conținutul pentru fiecare filă apare pe partea opusă. Vizitatorii pot derula în jos filele pentru a explora conținutul din ele.

Acest lucru menține pagina curată, iar oamenii pot vizualiza o mulțime de informații fără a părăsi pagina curentă. Nu numai că puteți afișa texte, dar puteți afișa și imagini, videoclipuri și șabloane în filele de defilare verticală. Utilizatorii pot face clic sau pot atinge o filă pentru a vedea conținutul legat de acesta, în timp ce celelalte secțiuni rămân ascunse.

Elementar este un constructor popular de site-uri web fără coduri. Cu acest plugin, puteți construi un întreg site de la zero folosind funcționalitatea sa drag-and-drop. În această postare tutorial, vă vom arăta cum să creați file de defilare verticală în WordPress cu Elementar.

Utilizați cazuri de file de defilare verticală

Filele de defilare verticală vă ajută să organizați o cantitate mare de conținut într -un spațiu mic. Ei lasă vizitatorii să se deplaseze prin subiecte fără a încărca o nouă pagină. Acest aspect este ușor de utilizat atât pe desktop, cât și pe mobil. Să aruncăm o privire la unele cazuri de utilizare ale filelor de defilare verticală de mai jos.

o. Detalii despre produs sau serviciu

Puteți afișa multe descrieri de produse sau servicii cot la cot. Fiecare filă poate deține specificații, prețuri, caracteristici sau recenzii. Vizitatorii pot compara rapid diferite opțiuni fără a părăsi pagina.

b. Întrebări frecvente (întrebări frecvente)

Filele verticale sunt perfecte pentru întrebări frecvente. Puteți grupa întrebări similare sub o filă și răspundeți sub alta. Cititorii pot derula și face clic doar doar la întrebările care le interesează.

C. Ghiduri sau tutoriale pas cu pas

Dacă doriți să împărtășiți un proces cu mulți pași, filele verticale mențin fiecare pas clar. Utilizatorii pot face clic pe fiecare filă pentru a urma ghidul în ordine. Acest lucru face ca învățarea să fie ușoară și menține pagina îngrijită.

D. Membrii echipei sau profilurile personalului

Introduceți -vă echipa într -un mod profesional oferind fiecărui membru o filă. Fiecare filă poate afișa o fotografie, un rol și o bio scurtă. Vizitatorii pot derula pe listă și pot afla despre toată lumea fără aglomerație. Explorați unele dintre cele mai bune exemple de pagină a echipei.

e. Portofoliu sau vitrină de proiect

Afișați -vă munca sau proiectele în file verticale pentru a economisi spațiu. Fiecare filă poate afișa imagini, descrieri și link -uri către detalii. Acest lucru îi ajută pe vizitatori să exploreze multe proiecte dintr -o singură pagină.

Cum se creează file de defilare verticală în Elementar

Partea teoretică s -a terminat. Sper că acum aveți o idee clară despre care este fila de defilare verticală și care sunt cazurile sale de utilizare. Vom acoperi acum partea tutorialului. Vom explica cum să creăm file de defilare verticală cu Elementar pe WordPress în această secțiune. Continuați să citiți!

Pre-cerințe pentru a începe tutorialul

Pentru a crea file de defilare verticală pe WordPress cu Elementar, aveți nevoie de următoarele pluginuri instalate și activate pe site -ul dvs.

• Elementar gratuit
• HappyAddons gratuit
• HappyAddons Pro

Notă: Aveți nevoie de HappyAddons Pro, deoarece Elementar nu are o opțiune încorporată pentru a crea file de defilare. Happyaddons Pro oferă un widget numit filele de defilare care vă permite să creați file de defilare verticală cu ușurință.

După ce aceste plugin -uri sunt gata pe site -ul dvs., urmați tutorialul explicat mai jos.

Pasul 01: Deschideți o pagină cu Elementar

Pur și simplu deschideți o pagină cu Elementar în care doriți să creați file de defilare verticală.

Pasul 02: trageți și aruncați widgetul de defilare pe pânză

Găsiți widgetul de defilare Tabs pe panoul Elementar. Trageți -l și aruncați -l pe pânza elementului.

Widgetul de defilare Tabs vine cu un conținut implicit. După ce widgetul este adăugat pe pânză, veți vedea acest conținut implicit.

Pasul 03: Începeți să adăugați conținut în file

Puteți adăuga conținut la widgetul de defilare și stiliza aspectul în multe feluri. Explorați -le în acest pas.

# Adăugați un titlu la widgetul de defilare Tabs

Fiecare secțiune web ar trebui să aibă un titlu care să spună clar ce tip de conținut conține. Deci, trebuie să scrieți un titlu pentru secțiunea Widget Tabs Scroll.

Accesați conținut> Conținut de file> titlu . Veți obține spațiul pentru a scrie un titlu. Puteți vedea că am scris un titlu, „Elegant Watch Insights”.

# Scrieți o descriere pentru widget

Scrieți sub titlu, puteți scrie o descriere pentru widget. Dacă descrierea nu este necesară, o puteți elimina doar.

# Adăugați conținut în file

Du -ți cursorul într -o filă și faceți clic pe ea. Aceasta va extinde fila și vă va permite să adăugați conținut.

# Scrieți un titlu pentru fila

Trebuie să scrieți un titlu pentru fiecare filă . După ce fila va fi extinsă, veți obține o casetă sub textul nav. Aici, puteți scrie un titlu pentru filă.

# Schimbați pictograma filei

Puteți elimina pictograma dacă nu este necesară. Dar pentru a schimba pictograma, faceți clic pe pictograma pe care o puteți vedea sub pictograma NAV.

Biblioteca de pictograme va fi deschisă instantaneu. Alegeți o pictogramă care vă place și apăsați butonul de inserare .

Puteți vedea că pictograma a fost schimbată.

# Adăugați conținut în filă prin editor

Fiecare filă vă permite să adăugați două tipuri de conținut. Puteți alege dacă utilizați editorul sau șablonul .

Să selectăm mai întâi opțiunea Editor .

Folosind acest editor, puteți adăuga orice tip de text și imagini, care vor fi afișate instantaneu pe pânza filei respective.

# Schimbați culoarea de fundal a conținutului cu file

Pentru a evidenția mai bine conținutul din filă, puteți schimba culoarea de fundal, astfel încât acesta se aliniază bine cu tot conținutul pe care l -ați adăugat în filă.

# Adăugați conținut în filă prin șablon

După cum am spus mai sus, widgetul vă permite să adăugați conținut în filă prin editor și șablon. Să aruncăm acum o privire asupra modului de a adăuga conținut folosind șabloane.

Alegeți opțiunea șablon din tipul de conținut . Dacă aveți deja șabloane pre-proiectate salvate pe site-ul dvs., această opțiune va fi potrivită.

Faceți clic pe pictograma derulantă de lângă pentru a alege șablonul . Apoi, selectați șablonul pe care doriți să îl afișați în filă.

Puteți vedea că șablonul nostru dorit este deja adăugat în filă.

În același mod, adăugați conținut la toate filele widget -ului Tabs Files.

Pasul 04: Configurați setările widget -ului de defilare Tabs

După ce partea de conținut este făcută, extindeți secțiunea Setări .

Veți putea modifica lățimea panoului de navigator și înălțimea panoului de conținut, inclusiv diferite ajustări de aliniere, din această secțiune.

# Reglați lățimea panoului NAV

Widgetul de defilare Tabs are două părți - panoul Navigator (panoul NAV) și panoul de conținut .

Puteți modifica lățimea panoului Navigator trăgând scara sub această opțiune. De asemenea, îi puteți regla poziția și alinierea. Procesul este prezentat în videoclipul atașat mai jos.

# Reglați înălțimea panoului de control

În același mod, reglați înălțimea panoului de control. De asemenea, confirmați că conținutul este aliniat vertical corect.

Pasul 05: Stilizați widgetul de defilare Tabs

Vino în fila Style . Să stabilim mai întâi o culoare de fundal pentru panoul Navigator .

# Personalizați tipografia conținutului panoului NAV

Actualizați tipografia, una câte una, pentru fiecare conținut pe care l -ați adăugat la panoul Navigator. Puteți schimba familia de fonturi, dimensiunea, greutatea, înălțimea liniei etc., după cum este necesar.

# Stilizează filele

Prin adăugarea unui tip de frontieră, lățimea de frontieră, căptușeala, culoarea de frontieră, raza de frontieră, culoarea textului și culoarea de fundal, puteți stiliza filele și le puteți prezenta ca imaginea următoare. Sper că poți face asta singur.

În același mod, extindeți și stilizați conținutul legat de panoul de conținut și secțiunea de defilare.

Pasul 06: Optimizați widgetul de defilare pentru telefonul mobil pentru telefonul mobil

Pentru a optimiza widget -ul pentru dimensiunea ecranului mobil, accesați modul portret mobil din bara de sus.

Veți vedea că filele Navigator apar în mod implicit.

# Reglați înălțimea panoului de conținut pentru dispozitivele mobile

Este posibil ca înălțimea existentă să nu fie suficientă pentru panoul de conținut. În acest caz, trebuie să creșteți înălțimea, astfel încât tot conținutul din filă să poată fi perfect văzut pe dimensiunile ecranului mobil.

Pasul 07: optimizați widgetul de defilare pentru tablete

În mod similar, treceți la modul portret pentru tabletă pentru a optimiza conținutul pentru afișarea optimă pe dimensiunile ecranului tabletei.

Puteți vedea în videoclipul atașat mai jos că widgetul arată deja bine pe ecranul tabletei. Deci, oricum nu trebuie să o modificăm.

Pasul 08: Previzualizați widgetul de defilare Tabs

Vino la pagina de previzualizare și verificați dacă widgetul funcționează bine sau nu. Puteți vedea că widgetul funcționează bine la sfârșitul nostru.

Astfel, puteți crea file de defilare verticală în WordPress cu Elementar.

Final pentru a lua!

Filele de defilare verticală sunt o modalitate inteligentă de a menține o pagină web îngrijită în timp ce împărtășește o mulțime de informații. Au lăsat vizitatorii să găsească ceea ce au nevoie fără să sară în pagini noi. După ce urmați pașii de mai sus, puteți proiecta cu ușurință aceste file cu Elementar și HappyAddons Pro.

Acest lucru oferă site -ului dvs. un aspect modern și îmbunătățește modul în care utilizatorii vă explorează conținutul. Cu toate acestea, în timp ce creați această secțiune, țineți cont de câteva cele mai bune practici în minte. Utilizați titluri clare pentru fiecare filă, astfel încât utilizatorii să știe la ce să se aștepte. Asigurați -vă că textul, imaginile și videoclipurile sunt ușoare, astfel încât pagina se încarcă rapid.

Verificați designul pe diferite dimensiuni ale ecranului și ajustați distanța pentru utilizatorii de telefonie mobilă. Păstrați culori și fonturi în concordanță cu stilul site -ului dvs., astfel încât filele să se îmbine în mod natural cu restul designului. Aceste mici detalii ajută la crearea unei experiențe lină și profesională pentru fiecare vizitator.

Aflați cum să proiectați o cutie flip în WordPress cu Elementar.