Creați o listă de navigare a portofoliului care poate fi derulată cu efectele de derulare a Divi

Paginile de portofoliu sunt scuza perfectă pentru a deveni creativi cu designul dvs. web. În acest tutorial, vă vom arăta cum să creați o listă de navigare portofoliu derulantă atrăgătoare pentru a condimenta orice pagină de portofoliu. Folosind efectele de scroll ale lui Divi, elementele de meniu prind viață pe măsură ce ajung la mijlocul ecranului. Butoanele cu legături de ancorare ajută utilizatorul să navigheze la secțiunile corespunzătoare.

Continuați să citiți pentru a recrea designul sau descărcați gratuit fișierul JSON.

previzualizare

Înainte de a începe cu tutorialul, să aruncăm o privire asupra designului pe diferite dimensiuni de ecran.

Desktop

Mobil

Cadru de sarma

Această listă de navigare portofoliu care poate fi derulată este creată cu o serie de rânduri repetate și alternative. Din acest motiv, am inclus o captură de ecran a ecranului wireframe. Acest lucru vă va ajuta să urmați ordinea rândurilor și a modulelor respective. Vă sugerăm să etichetați fiecare rând în consecință pentru a ține evidența. Am adăugat aceste instrucțiuni și în pașii tutorialului.

Descărcați secțiunile Hero gratuit

Pentru a pune mâna pe aspectul gratuit al listei de navigare portofoliu derulabil, 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!

1. Creați o secțiune nouă

Adăugați secțiune

fundal

Începeți cu o secțiune obișnuită în interiorul unei pagini noi sau existente. Înainte de a adăuga rânduri sau module, adăugați o culoare de fundal la secțiune.

• Culoare fundal: # 222831

Spațiere

Adăugați suficient spațiu în secțiune pentru ca efectele de derulare să își facă și ele magia.

• Căptușeală superioară și inferioară: 660 px

2. Creați o listă de navigare cu portofoliu derulant

Adăugați rândul 1

Structura coloanei

Adăugați primul rând și alegeți următoarea structură de coloane:

Dimensionare

Reglați lățimea rândului următor.

• Lățime: 90%
• Lățime maximă: 2560 px

Spațiere

Apoi, reglați setările de spațiere.

• Căptușeală stângă
  • Desktop: 130 px
  • Tabletă și telefon: 50 px

Etichetă de administrator

Și etichetați rândul.

• Etichetă de administrator: rândul 1

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

Conţinut

Adăugați un modul text pentru titlu. Introduceți un conținut H1 la alegere.

Text de antet

Treceți la fila de proiectare și stilizați textul titlului după cum urmează:

• Nivel de titlu: H1
• Font: Alata
• Greutate: îndrăzneț
• Culoare: # a3f7bf
• mărimea
  • Desktop: 190 px
  • Tabletă: 120 px
  • Telefon: 50 px
• Spațiul dintre litere
  • Desktop și tabletă: 7 px
  • Telefon: 8 px

Efecte derulare

Nu în ultimul rând, adăugați un efect de defilare în interior și în exterior în fila avansată.

• Activați efectul: Fading In and Out
• Partea de jos a ferestrei
  • Poziție: 100%
  • Opacitate de pornire: 100%
• Opacitate medie
  • Poziție: 50%
  • Mijloc: 100%
• Top Viewport
  • Poziție: 80%
  • Opacitate finală: 20%

Adăugați rândul 2

Structura coloanei

Acum este timpul să adăugați elementele de navigare. Adăugați un rând nou cu două coloane de dimensiuni egale.

Etichetă de administrator

Etichetați rândul.

• Etichetă de administrator: rândul 2

Dimensionare

Reglați și setările de dimensionare.

• Lățimea jgheabului: 1
• Lățime: 80%
• Lățime maximă: 1920px

Setări coloana 1

CSS personalizat

Înainte de a adăuga module, adăugați o linie de cod CSS la elementele principale ale coloanelor pentru a vă asigura că proporțiile rămân aceleași pe dimensiuni de ecran mai mici. Începeți cu coloana 1:

• Element principal: lățime: 20%! Important

width: 20% !important }

Setări coloana 2

CSS personalizat

Faceți același lucru pentru a doua coloană.

• Element principal: lățime: 80%! Important

width: 80% !important }

Adăugați modulul buton la coloana 1

Conţinut

Acum, adăugați un modul buton în coloana 1 cu o copie la alegere.

• Text buton: Vizualizare

Legătură

Adăugați o legătură de ancorare la modulul următor. Vom adăuga un ID CSS potrivit pentru acest link de ancorare mai târziu în tutorial.

• Adresă URL a butonului: #VB

Aliniere

Treceți la fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: centru

Buton

Apoi, stilizați butonul în consecință:

• Stiluri personalizate pentru buton: Da
• Mărimea textului
  • Desktop: 30 px
  • Tabletă: 25 px
  • Telefon: 20 px
• Culoare: alb #ffffff
• Fundal: Gri închis # 222831
• Lățimea chenarului: 0 px
• Raza de frontieră: 0 px
• Spațierea literelor: 1 px
• Font: Alata
• Afișează pictograma butonului: Nu

Spațiere

Modificați și setările de spațiere.

• Căptușeală de sus
  • Desktop: 25 px
  • Tabletă: 15 px
  • Telefon: 5 px

Efecte derulare

Și adăugați un efect de derulare în interior și în afara.

• Activați efectul: Fading In and Out
• Partea de jos a ferestrei
  • Poziție: 40%
  • Opacitate de pornire: 0%
• Opacitate medie
  • Partea de jos: 45%
  • Mijloc: 100%
  • Top: 55%
• Top Viewport
  • Poziție: 60%
  • Opacitate finală: 0%

Box Shadow

Înainte de a trece la modulul următor, adăugați o umbră de casetă la setările de deplasare a butonului.

• Box Shadow: opțiunea a 4-a
• Poziție orizontală: 0 px
• Pozitie verticala
  • Plasați cursorul: 5 px
• Forța de estompare: 0 px
• Rezistența la răspândire: 0 px
• Culoare umbră: Aqua Green # a3f7bf

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

Conţinut

Continuați adăugând un modul text în coloana 2 cu un conținut H3 la alegere.

Text de antet

Treceți la fila de proiectare și stilizați textul titlului după cum urmează:

• Nivel de titlu: H3
• Font: Alata
• Culoare
  • Desktop: alb #ffffff
  • Plasați cursorul: Aqua Green # a3f7bf
• Mărimea textului
  • Desktop: 80 px
  • Tabletă: 65 px
  • Telefon: 38 px

Efecte derulare

Și finalizați setările modulului adăugând un efect de derulare în fading in and out în fila avansată.

• Activați efectul: Fading In and Out
• Partea de jos a ferestrei
  • Poziție: 40%
  • Opacitate de pornire: 15%
• Opacitate medie
  • Partea de jos: 45%
  • Mijloc: 100%
  • Top: 55%
• Top Viewport
  • Poziție: 60%
  • Opacitate finală: 15%

Duplicați rândul 2

Pentru a completa lista de navigare, duplicați acest rând de trei ori. Noile rânduri vor fi renumerotate; 2, 3 și 4.

Reglați rândul 3

Etichetă de administrator rând

Schimbați eticheta de administrator a rândului de la 2 la 3.

• Etichetă de administrator: rândul 3

Modul buton

Schimbați legătura de ancorare din #VB în #WEB.

• Adresă URL a butonului: #WEB

Modul text

Schimbați și conținutul H3 din modulul text.

• Textul corpului: site-uri web

Reglați rândul 4

Etichetă de administrator rând

Schimbați eticheta de administrator a rândului de la 2 la 4.

• Etichetă de administrator: rândul 4

Modul buton

Schimbați legătura de ancorare din #VB în #MA.

• Adresa URL a butonului: #MA

Modul text

Schimbați și conținutul H3.

• Textul corpului: aplicații mobile

Reglați rândul 5

Etichetă de administrator rând

Schimbați eticheta de administrator a rândului de la 2 la 5.

• Etichetă de administrator: rândul 5

Spațierea rândurilor

Adăugați o margine inferioară.

• Marja inferioară
  • Desktop 230 px
  • Tabletă: 100 px
  • Telefon: 60 px

Modul buton

Schimbați legătura de ancorare din #VB în #UX.

• Adresă URL a butonului: #UX

Modul text

Și schimbați și conținutul H3 aici.

• Textul corpului: UX Design

3. Creați articole de portofoliu

Adăugați rândul 6

Structura coloanei

Lista de navigare a portofoliului care se poate derula leagă articole din portofoliu. Fiecare articol este format din două rânduri. Un rând cu un divizor invizibil și altul cu modul de chemare la acțiune. ID-urile CSS sunt adăugate la rând cu divizorul. În acest fel, navigarea de ancorare nu se va opri în partea de sus a elementului de portofoliu, ci în mijloc.

Să creăm elementele acum. Adăugați un rând cu o coloană.

Etichetă de administrator

Nu uitați să etichetați noul rând.

• Etichetă de administrator: rândul 6

CSS ID și clase

Introduceți un ID CSS care se potrivește în fila avansată.

• ID CSS: VB

Adăugați modulul divizor la rândul 6

Vizibilitate

Adăugați un separator invizibil în coloana rândului.

• Show Divider: Nu

Duplicați rândul 6

Duplică acest rând de trei ori. Noile rânduri vor fi renumerotate; 8, 10 și 12.

Reglați rândul 8

Etichetă de administrator

Schimbați eticheta de administrator de la 6 la 8.

• Etichetă de administrator: rândul 8

CSS ID și clase

Schimbați ID-ul CSS din VB în WEB.

• ID CSS: WEB

Reglați rândul 10

Etichetă de administrator

Schimbați eticheta de administrator de la 6 la 10.

• Etichetă de administrator: rândul 10

CSS ID și clase

Schimbați ID-ul CSS din VB în MA.

• ID CSS: MA

Reglați rândul 12

Etichetă de administrator

Schimbați eticheta de administrator de la 6 la 12.

• Etichetă de administrator: rândul 12

CSS ID și clase

Etichetă de administrator

Schimbați ID-ul CSS din VB în UX.

• ID CSS: UX

Adăugați rândul 7

Structura coloanei

Lăsați cele patru rânduri cu separatoare acolo unde sunt deocamdată. Adăugați un rând nou cu o coloană.

fundal

Fără a adăuga încă un modul, deschideți setările rândului și stilizați fundalul după cum urmează:

• Imagine de fundal: fotografie
  • Amestec de imagini: Înmulțiți-vă
• Gradient de fundal
  • Culoare 1: Gri închis # 222831
  • Culoarea 2: transparent
  • Tip: Liniar
  • Direcție: 90 grade
  • Poziția inițială: 50%
  • Poziție finală: 100%
  • Plasați gradientul deasupra imaginii de fundal: Da

Etichetă de administrator

Etichetați rândul.

• Etichetă de administrator: rândul 7

Dimensionare

Reglați apoi setările de dimensionare ale rândului.

• Lățime: 80%
• Lățime maximă: 2560 px
• Aliniere: centru

Frontieră

Adăugați și câteva colțuri rotunjite.

• Colțuri rotunjite: 25 px

Efecte derulare

Și activați un efect de defilare în interior și în exterior.

• Activați efectele: Fading In and Out
  • Opacitate de pornire: 0%
  • Opacitate medie: 100%
    • Poziție: 80%
  • Opacitate finală: 20%

Adăugați modulul Call to Action la rândul 7

Conţinut

Acum adăugați un modul de îndemn la rând.

• Titlu: Branding vizual
• Buton: Aflați mai multe
• Corp: Text descriptiv

fundal

Eliminați culoarea de fundal implicită.

• Fundal: Nici unul

Legătură

Adăugați un link la pagina corespunzătoare. Vom insera un # pentru moment.

• Link: #

Textul titlului

Stilează textul titlului în continuare.

• Nivel de titlu: H2
• Font: Alata
• Culoare: alb #ffffff
• mărimea
  • Desktop: 70 px
  • Tabletă: 60 px
  • Telefon: 48 px
• Spațierea literelor: 1 px

Corpul textului

Stilizați și textul corpului.

• Font: Lato
• Culoare: alb #ffffff
• mărimea
  • Desktop: 19 px
  • Tabletă: 20 px
  • Telefon: 18 px
• Înălțimea liniei: 1,8em

Buton

Treceți la setările butonului și aplicați următoarele modificări:

• Stiluri personalizate: Da
• Dimensiune text: 20 px
• Culoarea textului: Gri închis # 222831
• Fundal: Aqua Green # a3f7bf
• Raza de frontieră: 9 px
• Spațierea literelor: 1 px
• Buton Font: Alata
• Marja superioară: 35 px

Dimensionare

Reglați și dimensiunea modulului.

• Lățime: 50%
• Lățimea maximă
  • Desktop: 50%
  • Tabletă și telefon: 100%
• Aliniere: la stânga

Spațiere

Adăugați și niște umplutură la modul.

• Căptușeală stângă:
  • Desktop: 90 px
• Căptușeala stângă și dreapta:
  • Tabletă: 50 px
  • Telefon: 40 px

CSS personalizat

Nu în ultimul rând, adăugați o linie de cod CSS la titlul promoțional în fila avansată.

• Titlul promoției: fund de umplutură: 30 px;

padding-bottom: 30px; }

Duplicați rândul 7

Duplicați rândul 7 de trei ori. Noile rânduri vor fi renumerotate; 9, 11 și 13.

Reglați rândul 9

fundal

Schimbați imaginea de fundal și schimbați direcția gradientului.

• Imagine de fundal: fotografie nouă
• Gradient de fundal
  • Culoare 1: transparent
  • Culoare 2: Gri închis # 222831
  • Poziția inițială: 0%
  • Poziție finală: 50%

Etichetă de administrator

Actualizați eticheta de administrator a rândului de la 7 la 9.

• Etichetă de administrator: rândul 9

Ajustați modulul Apel la acțiune în rândul 9

Conţinut

Actualizați conținutul modulului.

• Titlu: Site-uri web
• Corp: text descriptiv nou

Legătură

Actualizați și linkul.

• Link: link nou

Dimensionare

Schimbați alinierea modulului de la stânga la dreapta.

• Alinierea modulului: dreapta

Spațiere

Schimbați umplerea desktopului de la stânga la dreapta. Setările pentru tabletă și mobil trebuie să rămână aceleași.

• Căptușeală dreaptă
  • Desktop: 90 px

Reglați rândul 11

fundal

Schimbați imaginea de fundal în noul rând.

• Imagine de fundal: altă fotografie

Etichetă de administrator

Actualizați eticheta de administrator a rândului de la 7 la 11.

• Etichetă de administrator: rândul 11.

Ajustați modulul Apel la acțiune în rândul 11

Conţinut

Schimbați conținutul din modulul de apel la acțiune.

Legătură

Modificați și linkul.

• Link: link nou

Reglați rândul 13

fundal

Schimbați imaginea de fundal și schimbați direcția gradientului.

• Imagine de fundal: fotografie nouă
• Gradient de fundal
  • Culoare 1: transparent
  • Culoare 2: Gri închis # 222831
  • Poziția inițială: 0%
  • Poziție finală: 50%

Etichetă de administrator

Deschideți fila etichetei de administrator și actualizați numărul rândului la 13.

Ajustați modulul Apel la acțiune în rândul 13

Conţinut

Actualizați conținutul modulului.

• Titlu: UX Design
• Corp: text descriptiv nou

Legătură

Actualizați și linkul.

• Link: link nou

Dimensionare

Schimbați alinierea modulului de la stânga la dreapta.

• Alinierea modulului: dreapta

Spațiere

Schimbați umplerea desktopului de la stânga la dreapta. Setările pentru tabletă și mobil trebuie să rămână la fel.

• Căptușeală dreaptă
  • Desktop: 90 px

Rearanjați rândurile

Mutați rândurile 7, 9 și 11.

Plasați rândurile în ordinea corectă, conform etichetei de administrator.

Comparați-vă Wireframe

Verificați din nou wireframe-ul listei de navigare a portofoliului care poate fi derulat și a articolelor. Rândurile trebuie să fie pentru ca legăturile de ancorare să funcționeze corect. Iată o altă privire asupra vederii noastre wireframe:

previzualizare

Am terminat parcurgerea tuturor pașilor pentru a recrea lista de navigare a portofoliului derulant. Să aruncăm o altă privire asupra aspectului designului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În acest tutorial pas cu pas, am recreat o listă de navigare cu portofoliu care poate fi derulată cu efecte de derulare a Divi. Mai mult, am adăugat articole de portofoliu. Navigarea este controlată cu linkuri de ancorare și ID-uri CSS. Acesta este un mod excelent de a afișa în mod interactiv articole din portofoliu. Lasă-ne un comentariu dacă ți-a plăcut sau ai întrebări!