Cum să creați o navigație fixă ​​cu 4 colțuri cu Divi

Un design unic de navigație poate oferi oricărui site web un avantaj. Navigarea fixă ​​cu 4 colțuri, de exemplu, este o modalitate bună de a oferi spectatorilor mai multe opțiuni de interacțiune cu designul site-ului dvs. web. De fapt, adaugă un alt strat designului dvs. UX pe tot site-ul.

În această postare, vă vom arăta cum să vă creați propria navigare fixă ​​în 4 colțuri. Vom explica cum să creați două stiluri ușor diferite, dar acestea sunt doar vârful aisbergului. Deoarece navigarea este creată cu elementele încorporate ale Divi, posibilitățile de personalizare sunt nelimitate.

Sperăm că această idee vă va inspira să creați modele uimitoare de navigație fixă ​​cu 4 colțuri pentru viitoarele dvs. proiecte Divi.

Să începem.

Previzualizări

Să aruncăm o privire rapidă la navigarea pe 4 colțuri pe care o vom crea astăzi. Primul stil plasează butoanele la marginea ecranului, iar celălalt are un flotor interior.

Stilul # 1

Stilul 2

Abonați-vă la canalul nostru Youtube

Creați o nouă pagină goală

Deschideți o pagină nouă și, înainte de a edita cu Divi, selectați „Pagină necompletată” în Atributele paginii. După ce ați terminat, activați Divi Builder.

Încărcați aspectul paginii de destinație a criptomonedelor

Odată ajuns în Divi Visual Builder, încărcați pagina de destinație a pachetului Layout Cryptocurrency din fila Layout Premade.

2. Creați o secțiune nouă cu un rând cu 4 coloane

Adăugați o nouă secțiune regulată cu rând cu 4 coloane

Pentru a crea cele 4 elemente de navigare, avem nevoie de o nouă secțiune cu un rând cu 4 coloane. Derulați până la capătul paginii și adăugați o nouă secțiune obișnuită. Apoi, alegeți un rând cu 4 coloane de dimensiuni egale.

Eliminați căptușirea implicită a secțiunii

Înainte de a adăuga module, asigurați-vă că eliminați capitonarea secțiunii adăugând „0px” în partea de sus și de jos. De asemenea, verificați de două ori secțiunea nu are culoare de fundal sau fundal degradat.

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

Măriți indicele Z

Vrem ca această secțiune să fie mai presus de toate celelalte în timp ce derulăm. De aceea, trebuie să mărim valoarea indexului Z al secțiunii. Pentru aceasta, deschideți fila Advanced și accesați setările de vizibilitate și măriți indexul Z.

• Indicele Z: 10

3. Reglați dimensiunea rândului

Apoi, trebuie să ajustăm setările de dimensionare ale rândului. Deschideți fila de proiectare și reglați setările în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: nu
• Lățime: 100%
• Lățime maximă: 100%

Eliminați umplerea implicită a rândului

Pentru a vă asigura că nu rămâne spațiu în partea de jos a paginii noastre, eliminați umplutura implicită a rândului. În fila Proiectare, schimbați intrările Spacing la „0px” atât pentru umplerea superioară, cât și pentru cea inferioară.

Adăugați module la coloane.

Acum este timpul să adăugați câteva module la fiecare coloană, începând de la stânga la dreapta.

• Coloana # 1: Imagine
• Coloana # 2: Buton
• Coloana nr. 3: Urmăriți pe rețelele sociale
• Coloana # 4: Buton

4. Stilizați fiecare coloană

Coloana # 1 - Modul de imagine

Adăugați un logo companie

Deschideți modulul de imagine în coloana # 1. Încărcați sigla (lățimea de 220 px și înălțimea de 100 px). Asigurați-vă că este o imagine transparentă unde logo-ul este centrat.

Aliniați modulul

Vrem ca sigla să fie plasată în colțul din stânga sus al paginii noastre, așa că trebuie să aliniem modulul la stânga. Deschideți fila Proiectare din modulul imagine și selectați Aliniere imagine stânga.

• Aliniere: stânga

Adăugați CSS personalizat pentru a remedia poziția modulului

Pentru a vă asigura că poziția modulului rămâne fixă, accesați fila Advanced și adăugați CSS personalizat la Elementul principal.

position: fixed;
top: 0;
left: 0;

Coloana # 2 - Buton

Adăugați un buton

Acum, în coloana # 2, adăugați un modul buton.

Stilează butonul

În fila Conținut, adăugați text pentru butonul dvs.

• Conținut-text: al meu pentru Bitcoin

Apoi, în fila Proiectare, alegeți Aliniere buton stânga.

• Aliniere: stânga

După aceea, glisați stilurile de butoane personalizate la da și ajustați valorile în consecință:

• Stiluri de butoane personalizate: Da
  • Buton Dimensiune text: Desktop; 25 px, tabletă: 20 px, telefon: 20 px
  • Culoarea textului butonului: alb, #ffffff
  • Culoarea fundalului butonului: Gradient
    • Culoare de sus: # 1c076d, Culoare de jos: # 185475
    • Tipul gradientului: liniar
  • Raza chenarului butonului: 7 px
  • Buton Font: Tantillium Web (la fel ca aspectul)
  • Afișează pictograma buton: Da
  • Pictogramă buton: Con de trafic
  • Culoare pictogramă buton: Alb, #ffffff
  • Plasarea pictogramei butonului: dreapta

Adăugați CSS personalizat pentru a remedia poziția modulului

În cele din urmă, deschideți fila Advanced și adăugați CSS personalizat pentru a fixa poziția modulului în colțul din stânga jos al paginii.

position: fixed;
bottom: 0;
left: 0;

Coloana # 3 - Urmăriți pe rețelele sociale

Adăugați un modul Social Follow Follow

La a treia coloană. De data aceasta, vom avea nevoie de un modul de urmărire pentru rețelele sociale. Adăugați trei rețele sociale la alegere.

Apoi, în fila Proiectare, alegeți dreapta Module Alignment.

• Aliniere: Corect

Stilizați pictogramele rețelelor sociale

Deschideți setările individuale ale primei rețele sociale, accesați fila de proiectare și modificați setările pictogramei în consecință:

• Culoare pictogramă: alb #ffffff
• Utilizați dimensiunea pictogramei personalizate: Da
  • Pictogramă Dimensiune font: Desktop; 25 px, tabletă: 20 px, telefon: 20 px
• Fundal: Nici unul

Copiați și lipiți stilurile de element

Reveniți la fereastra principală de urmărire a rețelelor sociale, faceți clic dreapta pe primul element și selectați „Copiați stilurile articolelor”. Apoi faceți clic dreapta pe cele două rețele sociale rămase și lipiți stilurile.

Adăugați CSS personalizat la modul

În cele din urmă, în fila Advanced, adăugați următorul cod CSS pentru a face modulul să rămână în colțul din dreapta sus al paginii:

position: fixed; 
top: 0; 
right: 0;

Coloana # 4 - Buton

Copiați stilurile de modul din modulul 2 și reglați

Pentru a face ca butonul din modulul 4 să arate exact la fel ca butonul din modulul # 2, vom folosi opțiunea „Copiere stiluri de modul”. Mai întâi, faceți clic dreapta pe butonul Modul din coloana 2, faceți clic pe „Copiați stilurile modulului” și apoi lipiți-l în butonul Modul din coloana 4.

Acum este timpul să modificați setările din fila Conținut. Mai întâi, modificați conținutul textului.

• Text: de la „Mine for Bitcoin” la „Citește blogul nostru”

Apoi, schimbați Aliniere buton.

• Aliniere: de la stânga la dreapta

În cele din urmă, modificați codul CSS personalizat în fila Avansat:

• Schimbați codul în:

position: fixed; 
bottom: 0; 
right: 0;

Rezultat

5. Schimbați CSS personalizat pentru a obține al doilea exemplu de stil

În primul exemplu de stil, colțurile sunt lipite de colțuri. Pentru a obține al doilea stil, trebuie doar să ajustați codul CSS pentru a face ca modulele de colț să plutească puțin spre interior.

Pur și simplu ajustați CSS personalizat în fila Avansată a tuturor celor patru module

Modulul 1

position: fixed; 
top: 1vw; 
left: 1vw;

Modulul 2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Modulul 3

position: fixed; 
top: 3vw; 
left: 2vw;

Modulul # 4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Rezultat final

Concluzie

Acest tutorial depășește doar suprafața a ceea ce puteți face cu navigarea fixă ​​cu 4 colțuri folosind Divi. În cele din urmă, puteți alege orice modul pentru fiecare coloană, atâta timp cât păstrați CSS personalizat pe care l-am furnizat. Sperăm că acest tutorial creativ vă va inspira să vă creați propria navigare fixă ​​în 4 colțuri. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!