Cum să creați modele personalizate „Înapoi sus” cu Divi

Publicat: 2019-06-19

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

Săptămâna aceasta, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați modele personalizate lipicioase înapoi la top cu Divi și Green Energy Layout Pack. Această tehnică vă va ajuta să îmbunătățiți experiența utilizatorului pe paginile dvs., profitând în același timp de opțiunile încorporate ale Divi în ceea ce privește designul lucrurilor. Sperăm că acest tutorial vă va inspira să vă creați propria alternativă la modele de top și să le utilizați pe următorul site web!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului acestui tutorial.

GIF

inapoi sus

Exemplul nr. 1

inapoi sus

Exemplul nr. 2

inapoi sus

Exemplul nr. 3

inapoi sus

1. Adăugați Derulare Smooth la HTML de pagină

Încărcați pagina de destinație cu energie verde pe pagina nouă

Primul lucru pe care va trebui să-l faceți este să creați o pagină nouă și să încărcați pagina de destinație a pachetului Green Energy Layout Pack.

inapoi sus

Deschideți Setări pagină

Deschideți setările paginii făcând clic pe pictograma marcată în ecranul de imprimare de mai jos:

inapoi sus

Adăugați Derulare Smooth în caseta CSS personalizată

Treceți la fila avansată și adăugați un comportament de derulare lină pe întreaga pagină adăugând următorul cod CSS în caseta CSS personalizată:

html {
scroll-behavior: smooth;
}

inapoi sus

2. Adăugați ID CSS în secțiunea Hero

Deschideți secțiunea Hero

Designul din partea de sus va redirecționa vizitatorii către secțiunea erou. Pentru a-l scoate, va trebui mai întâi să deschideți setările secțiunii erou.

inapoi sus

Adăugați un ID CSS

Apoi, accesați fila avansată și adăugați un ID CSS la secțiune. Mai târziu în această postare, vom adăuga un link de ancorare care îi va conduce pe vizitatori la această secțiune.

ID CSS: secțiunea-1

inapoi sus

3. Adăugați o secțiune nouă în partea de jos a paginii cu designul „Înapoi sus”

Pași generali

Adăugați o nouă secțiune regulată în partea de jos a paginii

După cum ați putut observa în previzualizarea acestui post, vom recrea trei exemple de design diferite. Pentru a eficientiza procesul, vom începe mai întâi cu câțiva pași generali și ne vom concentra asupra fiecărui exemplu de proiectare individual mai târziu în postare. Adăugați o nouă secțiune obișnuită în partea de jos a paginii.

inapoi sus

Spațiere

Deschideți setările 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

inapoi sus

Adăugați un rând nou

Structura coloanei

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

inapoi sus

Adăugați un link de ancorare

De îndată ce cineva dă clic pe întregul rând, dorim ca acestea să fie redirecționate în partea de sus a paginii. Pentru aceasta, vom adăuga un link care redirecționează către secțiunea erou a paginii.

Adresa URL a linkului: site-ul dvs. web.com/page/#section-1

inapoi sus

Alinierea rândurilor

De asemenea, plasăm rândul în partea dreaptă a containerului secțiunii.

Alinierea rândurilor: corect

inapoi sus

Poziție fixă

Apoi, reparăm întregul rând mergând la fila avansată a rândului și actualizând următoarele opțiuni de poziție:

Poziție: Fix
Decalaj vertical: 30 px
Decalaj orizontal: 30 px
Indicele Z: 99

În plus față de fixarea rândului, ne asigurăm că rândul se suprapune pe tot conținutul paginii, mărind indexul z.

inapoi sus

Recreați Exemplul de proiectare nr. 1

inapoi sus

Setări rând

Schimbați structura coloanei

Acum, că am parcurs toți pașii generali, vom recrea cele trei exemple diferite pe care le-ați putut vedea la începutul acestei postări. Să începem cu primul! Schimbați structura coloanei rândurilor:

inapoi sus

Culoare de fundal

Continuați deschizând setările rândurilor și adăugați o culoare de fundal albă.

Culoare fundal: #ffffff

inapoi sus

Dimensionare

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

Utilizați lățimea canalului personalizat: 1
Lățime: 9vw (desktop), 23vw (tabletă), 35vw (telefon)

inapoi sus