Cum să creați un acordeon care poate fi făcut clic folosind titluri de pagini lipicioase în Divi

Noile opțiuni de poziție lipicioasă ale lui Divi deschid ușa pentru multe posibilități de design noi și interesante. În acest tutorial, vă vom arăta cum să combinați opțiunile de poziție lipicioasă ale lui Divi cu legături de ancorare cu derulare netedă pentru a crea un mod asemănător acordeonului de a vă indexa și naviga pe pagină. Construirea este foarte ușoară cu opțiunile încorporate ale Divi, astfel încât nu este nevoie de CSS suplimentar sau alt cod. După ce ați terminat, veți avea un mod unic de a vă organiza pagina și de a spori experiența utilizatorului pe desktop și mobil.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Aici puteți vedea titlurile de pagini lipicioase lipite în partea de sus și de jos a ferestrei browserului și stivuite unele peste altele ca un acordeon.

Aici puteți vedea că, făcând clic pe unul dintre titlurile lipicioase, va sari (folosind linkuri ancore cu derulare netedă) la acea secțiune a paginii, de asemenea, ca un acordeon.

Iată și funcționalitatea de pe mobil.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea rândului lipicios

Pentru început, să creăm rândul nostru lipicios. Pentru aceasta, adăugați un rând cu o coloană la secțiunea implicită.

Deschideți setările rândului. Sub fila Advanced, actualizați poziția lipicioasă după cum urmează:

• Poziție lipicioasă: lipiți-vă de sus și de jos

Acest lucru va face ca rândul să rămână în partea de sus a ferestrei browserului în timp ce utilizatorul derulează în jos și apoi să rămână în partea de jos a ferestrei browserului în timp ce utilizatorul derulează în sus.

Styling Rândul Sticky

Acum, poziția lipicioasă este în poziție, putem începe să coafăm rândul folosind opțiunea de stil lipicios încorporat, care vă permite să dați elementului un stil specific ori de câte ori poziția lipicioasă este în vigoare (sau blocată). Pentru rând, dorim ca fundalul să se schimbe într-o culoare închisă ori de câte ori este în poziția blocată. Pentru aceasta, deschideți setările rândului și actualizați următoarele:

• Culoare fundal (desktop): #ffffff
• Culoare fundal (lipicios): # 051923

Sub fila Proiectare, actualizați următoarele:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime (tabletă și telefon): 100%
• Căptușeală: 0 px sus, 0 px jos

Apoi, dorim să acordăm o margine inferioară rândului pentru a servi drept linie separatoare între titlu și conținutul de mai jos. Și, odată ce rândul este în poziție lipicioasă, vrem să afișăm o margine stângă.

Sub comutarea opțiunii de margine, actualizați următoarele:

• Culoare margine: # 6eeb83
• Lățimea marginii inferioare (desktop): 8 px
• Lățimea marginii inferioare (lipicioasă): 0 px
• Lățimea marginii stânga (desktop): 0 px
• Lățimea chenarului stâng (lipicios): 8 px

Crearea textului antet Sticky

Pentru a crea textul antetului paginii, adăugați un nou modul de text pe rând.

Apoi lipiți următorul HTML în conținutul corpului.

<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>

Și actualizați și culoarea de fundal la plecare ...

• Culoarea fundalului (hover): rgba (255.255.255,0.2)

Acest lucru va face mai evident faptul că titlurile pot fi făcute clic pentru utilizator.

Stilul textului antet lipit

Sub fila Proiectare, actualizați următoarele:

• Rubrica 2 Font: Montserrat
• Titlul 2 Alinierea textului: stânga
• Rubrica 2 Culoare text (desktop): implicit (sau negru)
• Titlul 2 Culoarea textului (lipicios): #ffffff
• Titlul 2 Dimensiune text: 80 px (desktop), 22 px (lipicios), 28 px (telefon)
• Înălțimea liniei 2 rubrică: 1,3em (desktop), 1em (lipicios)

Apoi actualizați umplutura după cum urmează:

• Căptușire (desktop): 15 px sus, 15 px jos
• Căptușeală (lipicioasă): 10 px sus, 0 px jos, 20 px stânga
• Căptușeală (tabletă și telefon): 15 px sus, 15 px jos, 15 px stânga, 15 px dreapta

Crearea conținutului paginii simulate

Odată ce rândul lipicios este la locul său, putem adăuga un alt rând care va conține un conținut de pagină falsă sub titlu. Pentru a face acest lucru, creați un nou rând cu o singură coloană sub rândul lipicios.

Apoi adăugați un nou modul de text pe rând și lipiți un anumit conținut fals.

Duplicarea secțiunii ca fiind necesară pentru titluri și conținut de pagină mai lipicioase

În acest moment, aveți designul de bază pentru a crea secțiuni de pagină suplimentare cu titluri lipicioase, pur și simplu prin duplicarea secțiunii.

Secțiune duplicat

Pentru a crea o altă secțiune, copiați secțiunea existentă care conține rândul / antetul lipicios și rândul conținutului simulat. Acest lucru va accelera procesul de dezvoltare al creării următoarei secțiuni a paginii.

Actualizați conținutul textului și culoarea chenarului rândului

În secțiunea duplicat, actualizați textul din interiorul modulului de text și apoi actualizați culoarea chenarului sub setările rândului.

Repetați după cum este necesar

Continuați să copiați secțiunea și actualizați conținutul textului și culoarea chenarului rândului, după cum este necesar. Pentru acest exemplu, vom reproduce secțiunea încă de două ori, pentru a ne oferi un total de patru titluri de pagini lipicioase care vor compune acordeonul.

Adăugarea de legături de ancorare la titlurile de pagini lipicioase

În acest moment, funcționalitatea îi va permite utilizatorului să deruleze pagina în jos și să aibă titlurile lipite în partea de sus și de jos, la fel ca un acordeon. Acum vrem să facem titlurile apăsabile, astfel încât, atunci când utilizatorul face clic pe unul dintre titlurile lipicioase, utilizatorul va fi adus la acea secțiune a paginii. Acest lucru se face folosind link-uri de ancorare.

Pentru a adăuga un link ancoră, trebuie mai întâi să adăugăm un ID CSS la secțiunea la care dorim să treacă linkul.

Adăugați secțiunea 1 ID CSS

Deschideți setările pentru secțiune și adăugați următorul ID CSS:

• ID CSS: unul

Apoi deschideți setările pentru rândul lipicios și adăugați următoarea adresă URL de link:

• Adresa URL a linkului: #one

Acum, când utilizatorul face clic pe rând / antet, pagina va trece la această primă secțiune.

Adăugați secțiunea 2 ID CSS

Apoi, trebuie să adăugăm legătura de ancorare pentru a doua rubrică.

Deschideți setările secțiunii a doua și adăugați următorul ID CSS:

• ID CSS: două

Adăugați secțiunea 1 Adresa URL a legăturii rândului lipicios

Apoi deschideți setările pentru rândul lipicios din a doua secțiune și adăugați adresa URL a linkului rândului:

• Adresa URL a linkului de rând: #two

Adăugați secțiunea 3 ID CSS

Apoi, trebuie să adăugăm legătura de ancorare pentru a treia rubrică.

Deschideți setările celei de-a treia secțiuni și adăugați următorul ID CSS:

• ID CSS: trei

Adăugați secțiunea 1 Adresa URL a legăturii rândului lipicios

Apoi deschideți setările pentru rândul lipicios din interiorul celei de-a treia secțiuni și adăugați adresa URL a linkului rândului:

• Adresa URL a linkului de rând: #three

Adăugați secțiunea 4 ID CSS

În cele din urmă, trebuie să adăugăm legătura de ancorare pentru a patra rubrică.

Deschideți setările secțiunii a patra și adăugați următorul ID CSS:

• ID CSS: patru

Adăugați secțiunea 1 Adresa URL a legăturii rândului lipicios

Apoi deschideți setările pentru rândul lipicios din a patra secțiune și adăugați adresa URL a linkului rândului:

• Adresa URL a linkului de rând: # patru

Rezultat final

Aici puteți vedea titlurile de pagini lipicioase lipite în partea de sus și de jos a ferestrei browserului și stivuite unele peste altele ca un acordeon.

Aici puteți vedea că, făcând clic pe unul dintre titlurile lipicioase, va sari (folosind linkuri ancore cu derulare netedă) la acea secțiune a paginii, de asemenea, ca un acordeon.

Iată și funcționalitatea de pe mobil.

Gânduri finale

Acest design folosește opțiunea de poziție lipicioasă într-un mod unic. Nu numai că titlurile paginii rămân vizibile pe măsură ce utilizatorul derulează, dar fiecare titlu poate fi de asemenea făcut clic, ducând utilizatorul la acea secțiune specifică folosind linkuri de ancorare. Rezultatul seamănă mult cu un acordeon pentru întreaga dvs. pagină. Acest design ar fi cu siguranță util pentru indexarea conținutului de formă lungă sau pentru crearea unui one-pager ușor de utilizat.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!