Ascunderea elegantă a copiei sub divizoare de secțiune într-un design uimitor cu Divi

Opțiunile încorporate ale Divi vă permit să utilizați o anumită setare de design în scopuri multiple, care, la rândul său, ajută la stimularea creativității. Astăzi, vom folosi separatoarele de secțiuni într-un mod unic pentru a ascunde elegant copia site-ului dvs. web. Acesta este un mod excelent de a adăuga interacțiuni suplimentare paginii dvs. fără a fi nevoie de cod personalizat. Vom recrea un exemplu frumos de la zero și veți putea descărca gratuit fișierul JSON al exemplului.

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 GRATUIT

Pentru a pune mâna pe aspectul liber, 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!

Adăugați secțiunea nr. 1

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 un rând nou folosind următoarea structură de coloane:

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

Adăugați conținut H2

Primul modul de care avem nevoie în acest rând este un modul de text cu conținut H2.

Setări text H2

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

• Titlul 2 Font: Playfair Display
• Rubrica 2 Greutate font: Regular
• Titlul 2 Aliniere text: centru
• Titlul 2 Dimensiune text: 70 px (desktop), 40 px (tabletă), 30 px (telefon)

Adăugați modulul divizor în coloană

Vizibilitate

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

• Show Divider: Da

Linia

De asemenea, schimbăm culoarea liniei în fila design.

• Culoare linie: # 000000

Dimensionare

Treceți la setările de dimensionare și aplicați următoarele setări:

• Greutatea divizorului: 5 px
• Lățime: 27%
• Alinierea modulului: centru

Adăugați secțiunea 2

Culoare de fundal

Adăugați a doua secțiune obișnuită la pagina dvs., deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # f7f7f7

Revărsare

Asigurați-vă că ascundeți depășirea secțiunii și în fila avansată. Acest lucru va asigura că nimic nu depășește containerul secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Tranziții

Mai târziu, în această postare, vom crea o tranziție cu mouse-ul. Pentru a ne asigura că funcționează fără probleme, vom mări durata tranziției în fila avansată.

• Durata tranziției: 800 ms

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a containerului secțiunii aplicând următoarele setări:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

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

Adăugați conținut H3

Este timpul să începeți să adăugați module, începând cu un modul de text. Introduceți un conținut H3 la alegere.

Setări text H3

Treceți la fila de proiectare și modificați setările de text H3.

• Rubrica 3 Font: Playfair Display
• Titlul 3 Aliniere text: centru
• Rubrica 3 Culoarea textului: # 000000
• Rubrica 3 Dimensiune text: 3vw (Desktop), 6vw (Tabletă), 7vw (Telefon)

Adăugați modulul divizor în coloană

Vizibilitate

Al doilea modul de care avem nevoie în acest rând este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Schimbați și culoarea separatorului.

• Culoare linie: # 000000

Spațiere

Și adăugați niște margini personalizate de sus și de jos pentru a crea spațiu.

• Marja superioară: 2vw
• Marja inferioară: 2vw

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

Adauga continut

Următorul modul de care avem nevoie este un alt modul de text. Adăugați un conținut de paragraf la alegere.

Setări text

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

• Font text: Deschideți Sans
• Aliniere text: centru
• Culoarea textului: # 777777
• Dimensiune text: 0,8vw (desktop), 1,7vw (tabletă), 2,2vw (telefon)
• Înălțimea liniei textului: 1,8em

Spațiere

Adăugați câteva valori de marjă personalizate în continuare.

• Marja stângă: 3vw (desktop), 7vw (tabletă), 10vw (telefon)
• Marja dreaptă: 3vw (desktop), 7vw (tabletă și telefon)

Adăugați un modul buton în coloană

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în acest rând este un modul buton. Introduceți o copie la alegere.

Aliniere

Schimbați alinierea butoanelor din fila design.

• Aliniere buton: centru

Setări buton

Continuați cu stilizarea setărilor butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: # 000000
• Lățimea chenarului butonului: 1 px
• Raza chenarului butonului: 0 px
• Buton Font: Playfair Display

Spațiere

Și adăugați și câteva valori de spațiere personalizate.

• Marja superioară: 2vw
• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw
• Căptușeală stângă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)

Setări suplimentare ale secțiunii

Divizor de top implicit

După ce ați terminat de adăugat toate modulele la secțiune, este timpul să parcurgeți câteva setări suplimentare ale secțiunii. Deschideți setările secțiunii, accesați fila de proiectare și adăugați următorul separator superior:

• Stil divizor: Găsiți în listă
• Culoare divizor: # e8e8e8
• Înălțimea divizorului: 7000px
• Flip divizor: vertical
• Aranjament de împărțire: în partea de sus a conținutului secțiunii

Plasați cursorul pe partea de sus

Schimbați înălțimea separatorului în timpul deplasării.

• Înălțimea împărțitorului: 0px

Separator inferior

Adăugați și un separator inferior.

• Stil divizor: Găsiți în listă
• Culoare divizor: # 5c26ff
• Înălțimea divizorului: 600 px
• Aranjament divizor: Conținutul din partea de sus a secțiunii

Plasați cursorul pe partea inferioară

Și îndepărtați înălțimea separatorului pe hover.

• Înălțimea împărțitorului: 0px

Spațiere

După cum puteți observa în previzualizarea acestei postări, transformăm această secțiune într-un cerc. Pentru a face acest lucru, va trebui mai întâi să adăugăm o marjă personalizată și valori de umplere pentru diferite dimensiuni de ecran:

• Marja stângă: 10vw (desktop), 11vw (tabletă), 0vw (telefon)
• Marja dreaptă: 47vw (desktop), 11vw (tabletă), 0vw (telefon)
• Căptușeală superioară: 8vw (desktop), 15vw (tabletă), 16vw (telefon)
• Căptușeală inferioară: 8vw (desktop), 15vw (tabletă), 16vw (telefon)

Frontieră

Continuați adăugând „50vw” la fiecare colț pentru a transforma secțiunea într-un cerc. De asemenea, adăugăm o margine utilizând următoarele setări:

• Lățimea chenarului: 1 px
• Culoare margine: rgba (255,255,255,0)

Plasați mouse-ul peste frontieră

Schimbați culoarea chenarului la cursor.

• Culoare margine: # 000000

Clonați secțiunea de două ori

După ce ați finalizat toate setările secțiunii, puteți continua și clona secțiunea de două ori.

Modificați duplicatul # 1

Schimbați culoarea separatorului superior

Vom modifica ambele duplicate ale secțiunii, începând cu prima. Deschideți setările secțiunii și schimbați culoarea separatorului superior.

• Culoare divizor: # 5c26ff

Schimbați culoarea divizorului inferior

Modificați și culoarea separatorului inferior.

• Culoare divizor: # ff3a5e

Schimbați spațiul

Apoi, accesați setările de spațiere și asigurați-vă că se aplică următoarele valori:

• Marja superioară: -20vw (desktop), 0vw (tabletă și telefon)
• Marja stângă: 47vw (desktop), 11vw (tabletă), 0vw (telefon)
• Marja dreaptă: 10vw (desktop), 11vw (tabletă), 0vw (telefon)

Modificați duplicatul # 2

Schimbați culoarea separatorului superior

Deschideți setările celui de-al doilea duplicat și schimbați culoarea separatorului superior.

• Culoare divizor: # ff3a5e

Schimbați culoarea divizorului inferior

Schimbați și culoarea separatorului inferior.

• Culoare divizor: # e8e8e8

Schimbați spațiul

Și modificați valorile de spațiere și aici.

• Marja superioară: -20vw (desktop), 0vw (tabletă și telefon)
• Marja inferioară: 7vw
• Marja stângă: 10vw (desktop), 11vw (tabletă), 0vw (telefon)
• Marja dreaptă: 47vw (desktop), 11vw (tabletă), 0vw (telefon)

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ă ascundeți elegant copia dvs. sub separatoare de secțiuni. Acesta este un mod excelent de a folosi unele dintre opțiunile integrate Divi intuitive într-un alt mod decât sunteți obișnuit. Sperăm că acest tutorial vă va inspira să creați propriile modele alternative folosind și această tehnică. 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.