Cum să faceți să apară conținutul Rând ascuns pe Hover cu Divi (descărcare gratuită!)

Adăugarea de interacțiuni subtile pe site-ul dvs. web poate spori într-adevăr experiența generală a utilizatorilor pe care o au vizitatorii. Unul dintre lucrurile care vor face ca site-ul dvs. web să arate mai elegant, totuși respectând ușurința utilizatorului, face ca conținutul rând să apară în cursă. Aceasta este o abordare excelentă pentru prezentarea serviciilor, produselor, caracteristicilor și multe altele.

În acest tutorial, vă vom arăta cum să creați un design specific de la A la Z, dar odată ce veți obține abordarea, îl puteți face să funcționeze pentru orice tip de site web la care lucrați. La sfârșitul acestei postări de blog, vom distribui și fișierul JSON al acestui design pe care îl puteți descărca GRATUIT și utiliza fără restricții.

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

Să începem să creăm!

Adăugați o secțiune nouă

Culoare de fundal implicită

Începeți adăugând o nouă secțiune la o pagină nouă sau existentă și schimbați culoarea de fundal a secțiunii.

• Culoare fundal: # e0e0e0

Plasați cursorul pe culoarea de fundal

Modificați această culoare de fundal la cursor.

• Culoare fundal: # 000000

Spațiere

Treceți la fila de proiectare și adăugați câteva valori de spațiere personalizate. Pentru ca acest tutorial să funcționeze, vom folosi doar unități de vizualizare. Acest lucru vă va asigura că totul rămâne la locul său, indiferent de dimensiunea ecranului.

• Marja superioară: 5vw
• Marja inferioară: 5vw
• Marja stângă: 3vw
• Marja dreaptă: 3vw
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și adăugați un fundal de gradient.

• Culoare 1: # ff5b79
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 15%
• Poziție finală: 15%

Dimensionare

Efectuați și câteva modificări la setările de dimensionare ale rândului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Și adăugați câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 9vw
• Căptușeală inferioară: 9vw
• Coloana 1 Garnitura stânga: 5vw
• Coloana 1 Căptușeala dreaptă: 5vw
• Coloana 2 Căptușeala stângă: 5vw
• Coloana 2 Căptușeala dreaptă: 5vw

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

Adauga continut

Este timpul să începeți adăugarea modulelor! Primul modul de care avem nevoie este un modul text în coloana 1. Adăugați conținut H3 și un link.

Setări text link

Apoi, accesați setările pentru textul linkului și efectuați câteva modificări ale aspectului linkului.

• Link Font: Didact Gothic
• Stil Font Link: Subliniat
• Stil subliniere link: solid
• Culoare text link: #ffffff
• Dimensiune text link: 20 px

Setări text antet

Modificați și setările de text H3.

• Rubrica 3 Font: Didact Gothic
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 50 px

Vizibilitate

Nu în ultimul rând, dezactivați modulul pe desktop. Avem nevoie doar de acest modul pentru a apărea pe dimensiuni de ecran mai mici.

Adăugați modulul divizor în coloana 2

Vizibilitate

Al doilea și ultimul modul necesar în coloana 1 este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, schimbați culoarea separatorului.

• Culoare: #ffffff

Spațiere

Adăugați și câteva valori de marjă personalizate la modulul Divider.

• Marja superioară: 11vw (desktop), 80 px (tabletă),
• Marja inferioară: 50 px (tabletă și telefon)

Adăugați modulul de text nr. 1 în coloana 2

Adauga continut

Trecem la a doua coloană! Adăugați un modul text cu un conținut H4 la alegere.

Setări text antet

Apoi, accesați setările de text H4 și efectuați câteva modificări.

• Rubrica 4 Font: Didact Gothic
• Titlul 4 Greutate font: îndrăzneț
• Titlul 4 Culoare text: #ffffff
• Titlul 4 Dimensiune text: 2vw (Desktop), 40 px (tabletă), 30 px (telefon)

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Chiar sub modulul text anterior, continuați și adăugați altul cu un conținut de paragraf la alegere.

Setări text

Accesați setările de text următoare și efectuați câteva modificări.

• Font de text: Didact Gothic
• Culoarea textului: #ffffff
• Dimensiune text: 0.9vw (desktop), 18 px (tabletă și telefon)
• Înălțimea liniei de text: 2em

Spațiere

Adăugați și câteva valori de marjă personalizate.

• Marja superioară: 2vw
• Marja dreaptă: 15vw

Adăugați rândul # 2

Structura coloanei

După ce ați terminat modificarea primului rând și a tuturor modulelor sale, puteți continua și adăuga un nou rând folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și efectuați unele modificări la setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Eliminați și toate umpluturile implicite din setările de spațiere a rândurilor.

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

Vizibilitate

Nu în ultimul rând, ascundeți acest rând pe tabletă și telefon.

Adăugați un modul de text în coloană

Adauga continut

Singurul modul de care avem nevoie în acest rând este un modul de text. Adăugați conținut H3 și un link.

Culoare de fundal implicită

Apoi, accesați setările de fundal și adăugați o culoare de fundal la modulul de text.

• Culoare fundal: # e0e0e0

Plasați cursorul pe culoarea de fundal

Modificați această culoare de fundal la cursor.

• Culoare fundal: rgba (255,255,255,0)

Setări implicite pentru text

Apoi, accesați setările de text și faceți câteva modificări.

• Link Font: Didact Gothic
• Stil Font Link: Subliniat
• Stil subliniere link: solid
• Culoare text link: #ffffff
• Dimensiune text link: 0 px
• Spațiere scrisoare link: -1 px

Plasați cursorul pe setările textului linkului

Modificați și dimensiunea textului link-ului la plecare.

• Dimensiune text link: 1,7vw

Setări implicite pentru textul antetului

Continuați făcând câteva modificări la setările de text H3.

• Rubrica 3 Font: Didact Gothic
• Titlul 3 Greutate font: îndrăzneț
• Rubrica 3 Culoarea textului: # 000000
• Rubrica 3 Dimensiune text: 12vw
• Rubrica 3 Spațierea literelor: -0,8vw

Plasați cursorul pe setările textului antet

Modificați unele dintre setările de text H3 la cursor.

• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 4vw
• Rubrica 3 Spațierea literelor: -0,2vw

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva valori de marjă și umplere personalizate.

• Marja superioară: -34,3vw
• Marja inferioară: -5vw
• Căptușeală superioară: 10vw
• Căptușeală inferioară: 10vw
• Garnitura stânga: 26,5vw

Distanța cu mouse-ul

Modificați valorile de spațiere la cursor.

• Marja superioară: -34,1vw
• Marja inferioară: -5vw
• Căptușeală superioară: 12vw
• Căptușeală inferioară: 12vw
• Căptușeală stângă: 11,5vw

Tranziții

Măriți și durata de tranziție a modulului text.

• Durata tranziției: 400ms

Secțiunea de clonare

După finalizarea primei secțiuni, continuați și clonați întreaga secțiune de câte ori doriți. În următoarea parte a tutorialului, vă vom arăta modificările pe care trebuie să le faceți fiecărui duplicat.

Modificați secțiunea Plasați cursorul pe fundalul culorii

Primul lucru pe care va trebui să-l modificați este culoarea de fundal a cursorului de secțiune.

• Culoare fundal: # ff5b79

Schimbați fundalul gradientului rândului 1

Schimbați și fundalul de gradient al rândului # 1.

• Culoare 1: # 000000

Schimbați culoarea textului și copiați

Împreună cu culoarea textului și toată copia.

• Rubrica 3 Culoarea textului: # ff5b79

Schimbați spațiul modulului text

Nu în ultimul rând, schimbați umplutura din stânga a modulului de text în rândul # 2. Cantitatea de umplutură rămasă pe care va trebui să o utilizați depinde de lungimea conținutului pe care îl utilizați.

• Garnitura stânga: 21vw

Descărcați aspectul GRATUIT

Pentru a pune mâinile pe aspect, 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!

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ă dezvăluiți conținut ascuns pe rând. Rezultatul pe care l-am creat este obținut numai folosind opțiunile încorporate ale Divi. De asemenea, am partajat fișierul JSON la sfârșitul tutorialului, care, sperăm, vă va ajuta să creați și propriile modele alternative. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!