Cum să vă amestecați antetul și corpul folosind modulul de conținut post Divi și divizoarele de secțiuni

Până acum, ne-am obișnuit cu toții cu divizorul încorporat al secțiunii Divi. Acestea contribuie la adăugarea unei atingeri suplimentare site-urilor web pe care le construim. De asemenea, servesc ca o tranziție lină între două secțiuni diferite, dar cu Divi's Theme Builder, abordarea creării acestei tranziții este ușor diferită. În această postare, vă vom ghida prin pașii pe care trebuie să îi faceți pentru a ajunge acolo. Veți putea descărca și șablonul JSON gratuit!

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 GRATUIT Șablonul paginii de divizare a secțiunii GRATUIT

Pentru a pune mâna pe șablonul paginii de divizare a secțiunii gratuite, 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!

Abonați-vă la canalul nostru Youtube

1. Accesați Divi Theme Builder și adăugați un șablon nou

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder.

Adăugați un șablon nou pentru pagini

Acolo, creați un șablon nou făcând clic pe pictograma plus.

Selectați „Toate paginile” dacă doriți ca efectul de amestecare să se aplice pe toate paginile dvs. Puteți face același efect să funcționeze și pe alte tipuri de șabloane, dar va trebui să includeți separat divizorul secțiunii superioare în fiecare dintre șabloanele dvs. După ce ați creat un șablon nou, începeți să creați antetul personalizat.

2. Construiți antet personalizat

Setări secțiune

Fundal de gradient

În editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și adăugați un fundal de gradient.

• Culoare 1: # d13232
• Culoare 2: # fc6a3c

Spațiere

Adăugați și câteva secțiuni de umplere personalizate, de sus și de jos.

• Căptușeală superioară: 1vw (desktop), 2vw (tabletă și telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă și telefon)

Indicele Z

Și pentru a ne asigura că antetul dvs. rămâne pe partea de sus a întregului conținut, vom crește indexul z în setările de vizibilitate.

• Indicele Z: 99999

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

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

Spațiere

Îndepărtați și toate căptușeala de sus și de jos.

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

Elementul principal

Nu în ultimul rând, centrați conținutul coloanei și permiteți coloanelor să rămână una lângă alta pe dimensiuni de ecran mai mici, adăugând două linii unice de cod CSS la elementul principal al rândului.

display: flex;
align-items: center;

Adăugați modulul de imagine în coloana 1

Încărcați sigla

După ce ați completat toate setările de secțiuni și rânduri, este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați un logo cu un fundal transparent.

Aliniere

Apoi, accesați fila de proiectare a modulului și modificați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Modificați și lățimea modulului pe diferite dimensiuni ale ecranului.

• Lățime: 6vw (desktop), 13vw (tabletă), 17vw (telefon)

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

Selectați Meniu

În a doua coloană, vom avea nevoie de un modul de meniu. Selectați un meniu la alegere.

Eliminați culoarea de fundal

Continuați eliminând culoarea de fundal a modulului.

Aspect

Treceți la fila de proiectare și schimbați aspectul.

• Stil: aliniat la stânga
• Direcția meniului drop-down: în jos

Text de meniu

Apoi, stilizați textul meniului în consecință:

• Font de meniu: Oswald
• Meniul Font Greutate: ușor
• Stilul fontului meniului: majuscule
• Culoarea textului meniului: #ffffff (Desktop), # 202332 (Tabletă și telefon)
• Dimensiune text meniu: 0,8vw (desktop), 2vw (tabletă), 2,5vw (telefon)
• Spațiere scrisori meniu: 0,1vw

Meniul derulant

Modificați culoarea liniei meniului drop-down și în setările meniului drop-down.

• Culoare linie meniu derulant: #ffffff

Icoane

Și completați setările modulului utilizând o culoare albă a pictogramei meniului hamburger.

• Culoare pictogramă meniu hamburger: #ffffff

Adăugați un modul buton la coloana 3

Adăugați o copie

La ultima coloană! Acolo, singurul modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea butoanelor.

• Aliniere buton: centru

Setări buton

Continuați stilizând butonul în setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,6vw (Desktop), 1vw (tabletă), 1,5vw (telefon)
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: #FFFFFF
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 100 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Deschideți Sans
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

Spațiere

Și completați setările modulului prin adăugarea unor căptușeli personalizate pe diferite dimensiuni de ecran.

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

3. Construiți corp personalizat și adăugați un separator superior

După ce ați finalizat antetul personalizat al șablonului, continuați și începeți să construiți corpul personalizat.

Setări secțiune

Divizor de top

Veți observa, din nou, o secțiune pe pagină. Deschideți acea secțiune și adăugați un separator superior.

• Stil divizor: Găsiți în listă
• Culoare divizor: # fc6a3c
• Înălțimea divizorului: 6vw
• Repartitor orizontal Repetare: 15x
• Flip divizor: vertical
• Aranjament de împărțire: în partea de sus a conținutului secțiunii

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos.

• 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 în secțiunea dvs. utilizând următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare după cum urmează:

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

Spațiere

Eliminați și toate umpluturile implicite, de sus și de jos.

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

Adăugați un modul de conținut pentru postare în coloană

Acum, pentru a afișa tot conținutul paginii, va trebui să adăugați un modul de conținut de postare pe rândul dvs. Acest modul reprezintă aspectul pe care l-ați construit în interiorul paginii folosind Divi. Dacă adăugați această tranziție la o pagină de produs, de exemplu, un șablon în care este implicat conținut dinamic, are loc o abordare diferită. Singurul lucru important de reținut este că va trebui să adăugați un separator superior în prima secțiune a corpului șablonului. Asigurați-vă că culoarea divizorului dvs. este aceeași cu cea utilizată pentru fundalul global al antetului.

3. Salvați modificările constructorului și vedeți rezultatul

După ce ați completat corpul șablonului, puteți salva modificările și puteți vizualiza rezultatul pe site-ul dvs. web!

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ă amestecați antetul și corpul șablonului folosind divizoarele de secțiuni ale Divi și modulul de conținut pentru postare. Tranziția divizorului se aplică imediat tuturor paginilor dvs. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să 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.