Crearea „notelor lipicioase” cu conținut extensibil cu Divi

Cu opțiunile încorporate ale Divi, există o mulțime de modalități de a prezenta servicii și / sau pași de proces pe site-ul dvs. web. Pentru a vă ajuta să vă inspirați, vă vom arăta cum să creați note lipicioase cu conținut expandabil folosind doar opțiunile încorporate ale Divi. Acesta este un mod distractiv de a partaja conținut suplimentar de îndată ce vizitatorul declanșează interacțiune. Puteți utiliza acest design pentru orice site web la care lucrați și veți putea descărca gratuit fișierul JSON!

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 Sticky Notes GRATUIT

Pentru a pune mâinile pe aspectul gratuit de note lipicioase, 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!

Să începem să recreăm!

Abonați-vă la canalul nostru Youtube

Adăugați o nouă secțiune obișnuită

Primul lucru pe care va trebui să-l faceți este să adăugați o nouă secțiune obișnuită la pagina la care lucrați.

Adăugați un rând nou

Structura coloanei

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

Durata tranziției

Fără a adăuga încă module, deschideți setările rândului. Creăm o tranziție instantanee modificând durata tranziției în fila avansată.

• Durata tranziției: 0 ms

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

Adauga continut

E timpul să începeți să adăugați module! Adăugați un nou modul de text în prima coloană a rândului și introduceți conținutul H2 pe care doriți să-l apară în designul notelor lipicioase.

Culoare de fundal

Apoi, accesați setările de fundal și modificați culoarea de fundal în consecință:

• Culoare fundal: # ffd800

Setări text H2

Treceți la setările de text H2 și faceți și câteva modificări acolo:

• Rubrica 2 Font: Indie Flower
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 3a0cf2
• Rubrica 2 Dimensiune text: 40 px

Spațiere

Pentru a crea aspectul unei note lipicioase, vom adăuga câteva module de umplere personalizate la modul:

• Căptușeală superioară: 150 px
• Căptușeală inferioară: 150 px
• Căptușeală stângă: 20 px
• Căptușeală dreaptă: 20 px

Frontieră

De asemenea, adăugăm o margine de sus utilizând următoarele setări:

• Lățimea marginii superioare: 20 px
• Culoarea chenarului superior: # ffc300

Adăugați un modul divizor în coloana 1

Vizibilitate

Următorul modul de care avem nevoie în prima coloană este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

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

• Culoare: # ffc300

Stiluri

Modificați și setările de stil ale divizorului.

• Stil divizor: punctat

Dimensionare

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

• Greutatea divizorului: 5 px
• Înălțime: 0px

Spațiere

Pentru a crea un spațiu între modulul anterior și acesta, adăugăm o marjă de sus.

• Marja superioară: 150 px

Transformare Rotire

După cum puteți observa în previzualizarea acestui post, căutăm să creăm un divizor vertical în loc de unul orizontal. Pentru a realiza acest lucru, vom schimba valoarea din stânga în setările de rotire a transformării din modulul divizor:

• Stânga: 270 grade

Vizibilitate

De asemenea, dorim să ne asigurăm că modulul divizor apare sub modulul text. Pentru a face acest lucru, vom reduce indicele z al divizorului în fila avansată.

• Indicele Z: -99

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

Adăugați simbolul în caseta de conținut

Următorul și ultimul modul de care avem nevoie în prima coloană este un alt modul de text. Adăugați caracterul „●” în caseta de conținut.

Setări text

Apoi, treceți la fila de proiectare și modificați setările de text.

• Font text: Deschideți Sans
• Culoarea textului: # 3a0cf2
• Dimensiune text: 100 px
• Înălțimea liniei de text: 1em
• Orientare text: centru

Spațiere

Creați suprapunerea dorită adăugând câteva margini superioare negative în continuare.

• Marja superioară: -50 px

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

Adăugați conținut H3

Să trecem la a doua coloană. Aici, primul modul de care avem nevoie este un modul de text. Introduceți un conținut H3 la alegere.

Setări text H3

Accesați fila Design și modificați setările textului H3 în consecință:

• Rubrica 3 Font: Indie Flower
• Rubrica 3 Culoarea textului: # 3a0cf2
• Rubrica 3 Dimensiune text: 30 px

Spațiere

Adăugați câteva margini superioare personalizate în continuare:

• Marja superioară: 400 px (desktop), 200 px (tabletă), 150 px (telefon)

Adăugați modulul text # 4 în coloana 2

Adauga continut

Treceți la modulul următor, care este un alt modul de text. Introduceți un conținut de paragraf la alegere.

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Font text: Deschideți Sans
• Dimensiune text: 13 px
• Înălțimea liniei de text: 2em

Dimensionare

Modificați lățimea modulului în continuare.

• Lățime: 78%

Spațiere

Și adăugați niște margini de sus și de jos.

• Marja superioară: 10 px
• Marja inferioară: 50 px

Adăugați un modul buton la coloana 2

Adăugați o copie

Ultimul modul de care avem nevoie în a doua coloană este un modul buton. Introduceți o copie la alegere.

Setări buton

Apoi, accesați fila Design și stilizați butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 20 px
• Culoarea textului butonului: # 3a0cf2
• Culoarea fundalului butonului: # ffd800
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Abhaya Libre

Spațiere

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

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Garnitura stânga: 60 px
• Căptușeală dreaptă: 60 px

Clone Row de două ori

După ce ați terminat de adăugat toate modulele, puteți merge mai departe și puteți clona rândul de două ori.

Modificați rândul duplicat # 1

Schimbați modulul de text # 1 Culoarea de fundal

Schimbăm paleta de culori a ambelor duplicate, începând cu prima. Deschideți primul modul de text din coloana 1 și schimbați culoarea de fundal.

• Culoare fundal: # 00ffee

Schimbați modulul textului # 1 Culoarea frontierei superioare

Modificați și culoarea chenarului superior.

• Culoarea chenarului superior: # 00e0c2

Schimbați culoarea separatorului

Apoi, utilizați următorul cod de culoare pentru divizor:

• Culoare divizor: # 00e0c2

Modificare buton Modul culoare fundal

Și schimbați culoarea de fundal a butonului.

• Culoarea fundalului butonului: # 00ffee

Modificați rândul duplicat # 2

Schimbați modulul de text # 1 Culoarea de fundal

Treceți la al doilea rând duplicat, deschideți primul modul de text din coloana 1 și schimbați culoarea de fundal.

• Culoare fundal: # 42ff21

Schimbați modulul textului # 1 Culoarea frontierei superioare

Modificați și culoarea marginii superioare.

• Culoarea chenarului superior: # 1de524

Schimbați culoarea separatorului

Apoi, deschideți modulul divizor și utilizați următoarea culoare divizor:

• Culoare divizor: # 1de524

Modificare buton Modul culoare fundal

Și nu în ultimul rând, schimbați culoarea de fundal a butonului:

• Culoarea fundalului butonului: # 42ff21

Creați conținut extensibil

Adăugați dimensiunea implicită a rândurilor la toate rândurile

Acum că am personalizat toate rândurile din secțiunea noastră, a venit timpul să extindem conținutul. Pentru aceasta, deschideți fiecare dintre rânduri și aplicați următoarea înălțime maximă:

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

Adăugați dimensiunea rândului la toate rândurile

Modificați înălțimea maximă la plimbare la „100%”. Acest lucru va permite rândului să își ia din nou dimensiunea inițială.

• Înălțime maximă: 100%

Schimbați Overflow pentru toate rândurile

Asigurați-vă că ascundeți și revărsările fiecăruia dintre rânduri și ați terminat!

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

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ă creați note lipicioase cu note extensibile folosind doar opțiunile încorporate ale Divi. Acesta este un mod creativ și ludic de a prezenta serviciile pe site-ul dvs. web. 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.