Cum se creează o pagină de fundal frumoasă care apare sub divizoarele secțiunii Divi

De-a lungul tuturor tendințelor de design, subsolurile rămân esențiale. Oamenii s-au obișnuit atât de mult cu ei, ceea ce la rândul lor îi face foarte ușor de utilizat. Acestea îi ajută pe vizitatori să își organizeze șederea pe site-ul dvs. web și să navigheze la pagina exactă pe care o caută. Cu Divi, puteți crea cu ușurință orice fel de subsol într-o singură secțiune.

Acum, dacă doriți să dați subsolului o dimensiune și o interacțiune suplimentare, veți iubi această postare. Vom combina în mod creativ o secțiune de subsol cu ​​divizoare de secțiuni pentru a crea o revelație de derulare a subsolului.

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!

Abonați-vă la canalul nostru Youtube

1. Creați o pagină goală nouă și încărcați aspectul la alegere

Adăugați o pagină goală nouă

Primul lucru pe care va trebui să-l faceți este să creați o nouă pagină goală.

Încărcați pagina de destinație a pachetului de layout al companiei SaaS

Treceți la Visual Builder și încărcați pagina de destinație a SaaS Company Layout Pack. Deși folosim acest aspect specific, puteți face ca tehnica să funcționeze pe orice tip de pagină la care lucrați.

2. Adăugați indexul Z la fiecare secțiune și eliminați animațiile secțiunii

Adăugați indexul Z la secțiunea Hero

Continuați schimbând indexul z al secțiunii erou de pe pagină.

• Indicele Z: 3

Copiați indexul și lipiți Z în toate celelalte secțiuni de pe pagină

Copiați indexul z și lipiți-l în toate celelalte secțiuni de pe pagină. Creșterea indexului z pentru fiecare dintre secțiuni este un pas crucial pentru a face ca tutorialul să funcționeze. Va permite ca fiecare dintre secțiuni să apară în partea de sus a secțiunii de subsol, pe care o vom adăuga ulterior la postare.

Eliminați animația din secțiunea erou

Pentru a ne asigura că subsolul rămâne ascuns până în partea de jos a paginii, vom elimina și toate animațiile secțiunii. Deschideți secțiunea erou și eliminați animația.

• Stil de animație: Nici unul

Extindeți animația la toate secțiunile de pe pagina

Extindeți stilurile de animație la toate secțiunile din întreaga pagină.

3. Modificați ultima secțiune de pe pagină

Schimbați culoarea de fundal

Treceți la ultima secțiune a paginii și schimbați culoarea de fundal.

• Culoare fundal: # f2f2f2

4. Adăugați secțiunea regulată # 1 în partea de jos a paginii

Setări secțiune

Culoare de fundal

După cum puteți observa în previzualizarea acestui post, subsolul va apărea sub un divizor de secțiune. Vom dedica o nouă secțiune în partea de jos a paginii noastre acestui separator de secțiuni. Deschideți setările secțiunii și utilizați o culoare de fundal complet transparentă. Acest lucru va permite subsolului să se afișeze prin containerul secțiunii, chiar dacă poziția sa va fi sub acesta.

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

Divizor de top

Treceți la fila de proiectare a secțiunii și adăugați un separator de top la alegere.

• Stil divizor: Găsiți în listă
• Înălțimea divizorului: 250 px (desktop), 150 px (tabletă), 100 px (telefon)
• Repartitor orizontal Repetare: 2x

Indicele Z

Această nouă secțiune are nevoie și de un index z crescut.

• Indicele Z: 3

5. Adăugați secțiunea regulată # 2 în partea de jos a paginii

Setări secțiune

Culoare de fundal

E timpul să creați secțiunea de subsol! Adăugați o nouă secțiune obișnuită în partea de jos a paginii și selectați o culoare de fundal la alegere.

• Culoare fundal: # 202332

Dimensionare

Accesați fila de proiectare și asigurați-vă că lățimea este „100%”.

• Lățime: 100%

Spațiere

Va trebui, de asemenea, să mărim capitonarea superioară a secțiunii.

• Căptușeală superioară: 500 px

Indicele Z

Indexul z pe care îl atribuim acestei secțiuni este mai mic decât cel al celorlalte secțiuni de pe pagină. Acest lucru ne va ajuta să ascundem secțiunea până când vom ajunge în partea de jos a paginii.

• Indicele Z: 2

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

Deschideți setările rândului și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere coloană

Deschideți apoi setările coloanei 1 și adăugați câteva umpluturi la stânga.

• Căptușeală stângă: 20 px

Coloana dreapta

Adăugați și o margine dreaptă la coloană.

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: # 515151

Copiați Stiluri de coloană Lipire

Aplicați modificările tuturor coloanelor extinzând stilurile sau utilizând opțiunea de copiere-lipire.

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

Incarca imaginea

E timpul să începeți să adăugați module! Adăugați un nou modul de imagine în prima coloană și încărcați sigla.

Dimensionare

Treceți la fila de proiectare și modificați lățimea pe diferite dimensiuni ale ecranului.

• Lățime: 35% (desktop), 30% (tabletă), 25% (telefon)
• Alinierea modulului: stânga

Spațiere

Adăugați și o marjă inferioară.

• Afișați spațiul sub imagine: Da
• Marja inferioară: 50 px

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

Adauga continut

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

Setări text

Modificați setările de text.

• Font text: Nunito Sans
• Greutatea fontului textului: Semi Bold
• Culoarea textului: #ffffff
• Dimensiune text: 19 px

Spațiere

Și adăugați niște margini personalizate de sus și de jos pe diferite dimensiuni de ecran.

• Marja superioară: 15 px (desktop și tabletă), 10 px (telefon)
• Marja inferioară: 15 px (desktop și tabletă), 10 px (telefon)

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

Adauga continut

Adăugați un al doilea modul de text la a doua coloană și introduceți un conținut la alegere.

Adăugați un link

Adăugați un link care se potrivește cu elementul de subsol.

• Adresă URL a modulului: #

Setări text

Modificați setările de text în continuare.

• Font text: Nunito Sans
• Culoarea textului: #dbdbdb
• Dimensiune text: 17 px

Spațiere

Și adăugați niște umpluturi personalizate în partea de sus și de jos pe diferite dimensiuni ale ecranului.

• Marja superioară: 15 px (desktop și tabletă), 10 px (telefon)
• Marja inferioară: 15 px (desktop și tabletă), 10 px (telefon)

Clonați modulul de text nr. 2 de câte ori este necesar

Clonați al doilea modul de text din coloana 2 de câte ori este nevoie.

Schimbați conținutul

Asigurați-vă că schimbați conținutul.

Schimbați linkurile

Împreună cu linkurile.

• Adresă URL a modulului: #

Clonați module în coloana 2 și plasați în coloanele rămase

După ce ați completat a doua coloană, puteți clona ambele module de câte ori este nevoie și puteți plasa duplicatele în cele două coloane rămase ale rândului.

Schimbați conținutul

Schimbați conținutul fiecărui duplicat.

Schimbați linkurile

Alături de link.

• Adresă URL a modulului: #

6. Faceți secțiunea nr. 2 fixată în partea de jos a paginii

Adăugați CSS personalizat

Acum, pentru a crea afișajul de defilare, ne vom asigura că secțiunea de subsol rămâne în partea de jos a paginii noastre adăugând două linii de cod CSS la elementul principal al secțiunii.

position: fixed;
bottom: 0;

7. Adăugați Marja inferioară la Secțiunea # 1 pentru a crea efectul Reveal

Adăugați marja inferioară pe diferite dimensiuni ale ecranului

De asemenea, vom avea nevoie de spațiu în partea de jos a paginii noastre, care să permită afișarea subsolului. Deschideți secțiunea care conține divizorul de secțiune și adăugați o margine inferioară pe diferite dimensiuni de ecran și ați terminat!

• Marja inferioară: 400 px (desktop), 700 px (tabletă), 800 px (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ă creați un subsol frumos pentru a crea un subsol pentru a crea un efect unic. Acesta este un mod excelent de a face orice subsol interactiv și de a atrage atenția asupra elementelor listate în subsol. Sperăm că acest tutorial vă va inspira să creați și propriul dvs. divizor de subsol! 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.