Cum să creați secțiuni cu mouse-ul cu noile setări de dimensionare și depășire ale Divi

Utilizarea noilor opțiuni de dimensionare glisabile ale Divi nu numai că vă ajută să creați site-uri web foarte receptive, dar pot ajuta, de asemenea, la crearea de interacțiuni unice. Jucându-vă cu aceste opțiuni, puteți personaliza orice site web pe care îl creați și vă puteți personaliza structurile de pagină pentru a îndeplini tendințele actuale de design.

În acest tutorial, în mod specific, vă vom arăta cum să creați secțiuni de hover cu Divi. Vom crea o pagină nouă și vom permite afișarea tuturor titlurilor secțiunilor, dar fiecare secțiune se va deschide numai pe hover (desktop) sau pe clic (mobil). De îndată ce deschideți o altă secțiune, cea pe care ați deschis-o anterior se va închide automat. Vom începe prin a explica abordarea generală și vom continua prin a recrea exemplul pe care îl puteți vedea mai jos de la zero. Sperăm că acest tutorial vă încurajează să vă creați și propriile modele de secțiune de zbor!

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul secțiunilor Hover GRATUIT

Pentru a vă pune mâna pe aspectul gratuit al secțiunilor de hover, 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!

Abordare

Înainte de a ne arunca cu capul în tutorialul propriu-zis, vom trece în revistă tehnica utilizată pentru a crea secțiuni de hover. Puteți aplica această tehnică oricărui tip de site web pe care îl construiți, cu orice tip de stil de design.

1. Adăugați prima secțiune la pagina dvs.

Să presupunem că începeți un nou design pe o pagină nouă. Primul lucru pe care va trebui să-l faceți este să adăugați o nouă secțiune obișnuită.

2. Adăugați un rând nou care include un titlu de secțiune

Apoi, puteți continua adăugând un rând nou cu un modul de text care include titlul secțiunii. Puteți adăuga, de asemenea, un modul divizor și ceva care indică faptul că rândul se extinde la hover sau la atingere (a se vedea exemplul în previzualizarea acestui post). Este important să păstrați titlul secțiunii separat de restul conținutului secțiunii, așa că asigurați-vă că lăsați suficient spațiu între titlul secțiunii și orice va urma.

3. Reglați fin restul conținutului secțiunii (adăugați câte rânduri și module doriți)

Elementele de design care urmează titlurile secțiunii depind în totalitate de dvs. Puteți face secțiunea cât de lungă sau scurtă doriți și să utilizați orice tip de stil de design.

4. Modificați valoarea implicită și plasați înălțimea maximă a secțiunii

Odată ce ați terminat reglarea fină a secțiunii și a tuturor elementelor de design din ea, este timpul să creați efectul de hover. Înălțimea implicită a secțiunii dvs. este menită să se potrivească numai titlului secțiunii. La plecare, secțiunea își va recupera dimensiunea inițială.

5. Ascundeți Overflow-ul vertical

O altă parte importantă a acestei tehnici este ascunderea revărsării verticale. După ce ați setat o înălțime maximă implicită la secțiunea dvs., care este mai mică decât înălțimea inițială a secțiunii, va fi creat un exces. Pentru a vă asigura că deversarea nu apare, va trebui să vă asigurați că este ascunsă în setările de vizibilitate ale secțiunii.

5. Repetați pașii pentru toate secțiunile de pe pagină

Repetați aceiași pași pentru toate secțiunile de pe pagina dvs. pentru a crea o experiență de utilizator evidentă pe care vizitatorii dvs. o vor aprecia.

Abonați-vă la canalul nostru Youtube

Să începem să recreăm!

Adăugați o secțiune nouă

Culoare de fundal implicită

Acum, că am trecut prin abordarea acestui post, este timpul să începem să punem lucrurile în acțiune! Adăugați o primă secțiune obișnuită pe o pagină nouă de pe site-ul dvs. WordPress și deschideți setările secțiunii. Schimbați culoarea de fundal implicită a secțiunii dvs. într-o culoare la alegere.

• Culoare fundal: # 000000

Plasați cursorul pe culoarea de fundal

Schimbați această culoare de fundal la cursor.

• Culoare fundal: #ffffff

Adăugați rândul # 1

Structura coloanei

Continuați adăugând primul rând în secțiunea dvs. utilizând următoarea structură de coloane:

Adăugați un modul de text

Adăugați conținut H2

Adăugați un modul de text la noul rând următor. Adăugați o copie H2 împreună cu simbolul „▼” care indică faptul că va urma ceva.

Setări text H2

Treceți la fila de proiectare a modulului și modificați setările de text H2.

• Rubrica 2 Font: Trebuchet
• Titlul 2 Greutate font: Ultra Bold
• Titlul 2 Alinierea textului: stânga
• Rubrica 2 Culoarea textului: # ff0f3b
• Titlul 2 Dimensiune text: 100 px (desktop), 80 px (tabletă), 60 px (telefon)
• Rubrica 2 Spațierea literelor: -5 px

Adăugați un modul divizor

Vizibilitate

Al doilea și ultimul modul de care avem nevoie în acest rând este un modul divizor. Asigurați-vă că activați opțiunea „Afișați divizorul” în setările de vizibilitate.

• Show Divider: Da

Culoare

Apoi, treceți la fila de proiectare și schimbați culoarea separatorului.

• Culoare: # ff0f3b

Dimensionare

Modificați și setările de dimensionare ale modulului.

• Greutatea divizorului: 2 px
• Lățime: 14%

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor! Aici va trebui să plasați tot conținutul pe care doriți să-l afișați după ce plasați mouse-ul (desktop) sau faceți clic (tabletă și mobil). Folosim următoarea structură de coloane, dar rețineți că puteți adăuga câte rânduri și module doriți și le puteți stiliza în funcție de nevoile dvs.:

Adăugați un modul de text în coloana 1

Adauga continut

Plasați un modul de text în prima coloană cu un conținut la alegere.

Setări text

Accesați fila de proiectare a modulului de text și modificați orientarea textului.

• Orientare text: justificați

Adăugați un modul de text în coloana 2

Adauga continut

Adăugați și un modul de text la a doua coloană, cu un conținut la alegere.

Setări text

Din nou, modificați orientarea textului în setările de text ale modulului.

• Orientare text: justificați

Adăugați Setări de dimensionare la secțiune

Dimensiune implicită

Odată ce ați finalizat secțiunea, este timpul să faceți efectul hover. Deschideți setările secțiunii și modificați înălțimea maximă pe diferite dimensiuni ale ecranului:

• Înălțime maximă: 300 px (desktop), 280 px (tabletă), 260 px (telefon)

Plasați cursorul pe mouse

Activați și opțiunea de deplasare la înălțimea maximă și adăugați o valoare suficient de mare pentru a acoperi toate elementele pe diferite dimensiuni ale ecranului. Această valoare vă asigură că toate elementele dvs. apar fără a depăși dimensiunea inițială a containerului de secțiune.

• Înălțime maximă: 5000 px

Overflow vertical

Apoi, accesați fila avansată a secțiunii și modificați depășirea verticală. Aceasta va ascunde tot conținutul care depășește containerul secțiunii.

• Vertical Overflow: Ascuns

Tranziții

Pentru a crea o tranziție lină, schimbăm și setările de tranziții din fila avansată.

• Durata tranziției: 800 ms
• Întârziere de tranziție: 500 ms

Clonați întreaga secțiune de câte ori doriți

După ce ați terminat de creat prima secțiune de deplasare, o puteți clona de câte ori doriți.

Schimbați titlurile secțiunii

Desigur, veți dori să modificați titlurile secțiunii duplicatelor.

Schimbați culorile textului H2

Pentru a crea unele variante de design, vom schimba și culorile textului modulelor evidențiate în ecranul de imprimare de mai jos.

• Rubrica 2 Culoarea textului: # c4c4c4

Schimbați culorile divizorului

Împreună cu culorile separatoare care însoțesc modulele de text.

• Culoare: # c4c4c4

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să utilizați în mod creativ noile opțiuni de dimensionare glisabile ale Divi pentru a crea interacțiuni unice, folosind secțiuni de trecere la mouse, pe orice site web pe care îl creați. Am început prin a explica abordarea și a continuat recrearea exemplului de design de la zero. De asemenea, ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.