Cum să afișați caracteristicile în filele Hover cu Divi

Căutați modalități noi și creative de a prezenta caracteristici și / sau produse pe paginile dvs. web? Dacă da, continuați să citiți, deoarece în această postare vă vom arăta cum să afișați caracteristicile în filele de deplasare folosind numai opțiunile încorporate ale Divi. Posibilitățile pe care le aveți cu această abordare sunt nelimitate și cu siguranță vă vor permite să înțelegeți Divi la un nivel mai profund. Efectul de deplasare a filei va apărea numai pe medii de birou compatibile cu deplasarea. Când filele de deplasare sunt vizualizate de la dimensiuni de ecran mai mici, caracteristicile vor fi listate în forma lor originală.

Să ajungem la asta!

previzualizare

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

Desktop

Mobil

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Fundal de gradient

Adăugați o pagină nouă sau deschideți una existentă și adăugați o nouă secțiune. Deschideți setările secțiunii și adăugați un fundal de gradient la secțiune. Vom folosi fundalul de gradient pentru a acoperi partea din stânga a filelor de deplasare, așa cum puteți observa în ecranele de imprimare de mai sus.

• Culoare 1: # f2f2f2
• Culoare 2: #ffffff
• Direcția gradientului: 87 grade
• Poziția inițială: 20%
• Poziție finală: 20%

Spațiere

Apoi, eliminați umplutura personalizată de sus și de jos a secțiunii adăugând „0px” la ambele opțiuni.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Alinierea rândurilor

Modificați și alinierea rândurilor.

• Alinierea rândurilor: la stânga

Dimensiune implicită

Și modificați și setările de dimensionare.

• Utilizați lățimea personalizată: da
• Unitate: PX
• Lățime personalizată: 400 px
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Plasați cursorul pe mouse

Modificați opțiunea Lățime personalizată din setările de dimensionare de pe hover. Acest lucru va permite rândului să se extindă atunci când este plasat pe plan.

• Lățime personalizată: 2000 px

Spațiere

Apoi, accesați setările de spațiere și eliminați valorile implicite de umplere de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Bordură implicită

Adăugați „20 px” în colțul din dreapta sus al rândului și adăugați și un chenar stâng la rând.

• Lățimea marginii stângi: 20 px
• Culoare margine stângă: # 6d44ff

Plasați mouse-ul peste frontieră

Eliminați colțul rotunjit „20px” din partea dreaptă sus din hover adăugând în schimb „0px”.

Default Box Shadow

Nu în ultimul rând, adăugați o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (0,0,0,0.11)

Hover Box Shadow

Și modificați culoarea umbrei într-o culoare complet transparentă pe hover.

• Culoare umbră: rgba (255,255,255,0)

Adăugați Modul Blurb la rând

Adauga continut

Acum că am terminat de modificat toate setările rândurilor, putem continua și adăuga un modul Blurb în coloană. Simțiți-vă liber să utilizați orice alt modul la alegere. După ce ați adăugat modulul, adăugați un conținut la alegere.

Selectați pictograma

Selectați următoarea pictogramă la alegere.

Setări pictograme

Și schimbați aspectul pictogramei în setările pictogramei.

• Culoare pictogramă: # 5323ff
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 54 px

Setări implicite pentru textul titlului

Modificați apoi setările pentru textul titlului.

• Titlu Font: Poppins
• Alinierea textului titlului: centru
• Culoare text titlu: # 5323ff
• Dimensiune text titlu: 25 px
• Spațierea literelor de titlu: -1 px
• Înălțimea liniei de titlu: 1em

Plasați cursorul pe setările pentru textul titlului

Și modificați înălțimea liniei de titlu la plecare.

• Înălțimea liniei de titlu: 1,5em

Setări implicite pentru textul corpului

Apoi, accesați setările pentru textul corpului și efectuați câteva modificări. Aceasta include schimbarea dimensiunii textului la „0px”. Acest lucru ne va ajuta să facem ca textul corpului să apară numai în cursa de plutire.

• Font corp: Poppins
• Greutatea fontului corpului: ușoară
• Alinierea textului corpului: centru
• Culoarea textului corpului: # 000000
• Dimensiunea textului corpului: 0 px (desktop), 15 px (tabletă și telefon)
• Înălțimea liniei corpului: 2.2em

Plasați cursorul pe Setările textului corpului

Pentru a vă asigura că textul corpului apare pe hover, modificați dimensiunea textului pe hover.

• Dimensiunea textului corpului: 15 px

Spațiere implicită

Pentru a oferi modulului un spațiu de respirație, adăugăm câteva module de umplere personalizate, de sus și de jos, la modul.

• Căptușeală superioară: 80 px
• Căptușeală inferioară: 80 px

Distanța cu mouse-ul

Vom modifica setările de spațiere la plecare. Nu veți putea vedea rezultatul final înainte de a ieși din Visual Builder, deoarece aplicăm opțiuni de deplasare atât pe rând, cât și pe modulul Blurb.

• Căptușeală superioară: 80 px
• Căptușeală inferioară: 80 px
• Garnitura stânga: 20vw
• Garnitura dreapta: 20vw

Clonează rândul de 3 ori

După ce ați terminat de modificat primul rând și modulul său Blurb, puteți merge mai departe și puteți clona rândul de câte ori doriți.

Schimbați modulul Row & Blurb # 2

Schimbați spațiul rândurilor

Deschideți primul duplicat și adăugați o marjă stângă personalizată. Acest lucru ne va permite să creăm efectul de scară pe care îl puteți observa în previzualizarea acestui post.

• Marja stângă: 6vw

Schimbați culoarea chenarului rândului

Schimbați și culoarea chenarului stâng al rândului.

• Culoare margine stângă: # 00ffcc

Schimbați conținutul și pictograma Blurb

Apoi, deschideți modulul Blurb și schimbați pictograma.

Schimbați culoarea pictogramei modulului Blurb

Împreună cu culoarea pictogramei.

• Culoare pictogramă: # 00eda6

Schimbați culoarea textului titlului

Și culoarea textului titlului.

• Culoarea textului titlului: # 00eda6

Schimbați modulul Row & Blurb # 3

Schimbați spațiul rândurilor

Adăugați și o marjă stângă personalizată la cel de-al doilea duplicat.

• Marja stângă: 12vw

Schimbați culoarea chenarului rândului

Schimbați culoarea marginii rândului din stânga.

• Culoare margine stânga: #afebff

Schimbați conținutul și pictograma Blurb

Împreună cu pictograma și conținutul blurb.

Schimbați culoarea pictogramei modulului Blurb

Modificați și culoarea pictogramei.

• Culoare pictogramă: # 68d9ff

Schimbați culoarea textului titlului

Și și culoarea textului titlului.

• Culoare text titlu: # 68d9ff

Schimbați modulul Rând & Blurb # 4

Schimbați spațiul rândurilor

La următorul și ultimul duplicat! Adăugați o margine stângă personalizată pe rând.

• Marja stângă: 18vw

Schimbați culoarea chenarului rândului

Schimbați și culoarea chenarului stâng al rândului.

• Culoare margine stânga: # dd87cf

Schimbați conținutul și pictograma Blurb

Deschideți modulul Blurb pe rând și schimbați pictograma și conținutul modulului.

Schimbați culoarea pictogramei modulului Blurb

Împreună cu culoarea pictogramei.

• Culoare pictogramă: # dd6aca

Schimbați culoarea textului titlului

Și culoarea textului titlului, de asemenea.

• Culoare text titlu: # dd6aca

previzualizare

Acum că am parcurs tutorialul, 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 opțiunile încorporate ale Divi numai pentru a crea file de trecere. Această abordare vă va ajuta să partajați conținut despre caracteristici sau produse într-un mod interactiv. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!