Cum să creați o bară globală transparentă de meniu plutitoare cu Divi's Theme Builder

Căutați o modalitate de a vă plasa antetul global în partea de sus a secțiunilor de eroi ale paginilor dvs.? În tutorialul Divi de astăzi, vă vom arăta exact cum să faceți acest lucru. Vom recrea un antet uimitor global de la zero (folosind Divi's Theme Builder) și vom aplica un efect flotant pe bara de meniu. Veți putea descărca gratuit fișierul JSON!

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 de antet global al barei de meni plutitoare

Pentru a vă pune mâinile pe șablonul global de antet global al barei de meniu, 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.

Începeți să creați antet global

Apoi, faceți clic pe „Adăugați antet global” și continuați selectând „Construiți antet global”.

2. Începeți să creați antet global

Setări secțiune

Culoare de fundal

Odată ce vă aflați în editorul de șabloane, veți observa o secțiune pe pagină. Deschideți acea secțiune și schimbați culoarea de fundal într-una complet transparentă. Acest lucru va permite ca tot ce se află sub secțiune să se afișeze.

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

Dimensionare

Accesați următoarea filă de proiectare a secțiunii și modificați lățimea.

• Lățime: 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

Indicele Z

Și pentru a ne asigura că secțiunea rămâne la înălțimea întregului conținut al secțiunii erou, va trebui să mărim indexul z al secțiunii în setările de vizibilitate.

• Indicele Z: 99999

Adăugați un rând nou

Structura coloanei

După ce ați completat setările secțiunii, puteți adăuga un rând nou folosind 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ă:

• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 0vw

Elementul principal

Apoi, accesați fila avansată și asigurați-vă că coloanele rămân unele lângă altele pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Coloana 2

Culoare de fundal

Continuați deschizând setările coloanei 2 și schimbați culoarea de fundal într-una semitransparentă.

• Culoare fundal: rgba (255.255.255,0.71)

Frontieră

Adăugați și o margine de jos în coloană.

• Lățimea marginii inferioare: 2 px
• Culoarea chenarului inferior: # f4583f

Box Shadow

Și creați un efect plutitor adăugând o umbră de casetă subtilă.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 50 px
• Puterea răspândirii umbrei cutiei: -20px
• Culoare umbră: rgba (0,0,0,0.23)

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

Încărcați sigla

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

Aliniere

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

• Aliniere imagine: centru

Dimensionare

Modificați lățimea modulului și în setările de dimensionare.

• Lățime: 8vw (desktop), 14vw (tabletă), 21vw (telefon)

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

Selectați Meniu

Treceți la coloana următoare. Acolo, singurul modul de care avem nevoie este un modul de meniu. Selectați un meniu la alegere.

Eliminați culoarea de fundal

Apoi, accesați setările de fundal și eliminați culoarea de fundal.

Aspect

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

• Stil: Centrat
• Direcția meniului drop-down: în jos

Text de meniu

Stilizați și setările textului meniului.

• Font de meniu: Muli
• Culoare text meniu: # 6f6666
• Dimensiune text meniu: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

Meniul derulant

Schimbați apoi setările meniului derulant.

• Culoare linie meniu derulant: # f4583f

Icoane

Utilizați aceeași culoare pentru culoarea pictogramei meniului hamburger din setările pictogramei.

• Culoare pictogramă meniu hamburger: # f4583f

Spațiere

Completați setările modulului adăugând niște umpluturi de sus și de jos în setările de spațiere.

• Căptușeală superioară: 1,5vw
• Căptușeală inferioară: 1,5vw

Adăugați un modul buton la coloana 3

Adăugați o copie

Treceți la următoarea și ultima coloană. Adăugați un modul buton cu o copie la alegere.

Aliniere

Schimbați alinierea modulului în continuare.

• Aliniere buton: centru

Setări buton

Continuați stilizând butonul în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0.9vw (desktop), 1.5vw (tabletă), 2.5vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # f4583f
• Lățimea chenarului butonului: 0 px
• Culoarea chenarului butonului: # f4583f
• Raza chenarului butonului: 0 px

• Buton Font: Muli
• Buton Font Greutate: Bold

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ă: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 2vw (desktop), 3vw (tabletă), 4vw (telefon)
• Căptușeală dreaptă: 2vw (desktop), 3vw (tabletă), 4vw (telefon)

Setări suplimentare ale secțiunii

Element principal implicit

După ce ați finalizat designul general, mai rămâne un lucru de făcut; plasând secțiunea deasupra conținutului paginii. Pentru a face acest lucru, va trebui să adăugăm două linii de cod CSS la elementul principal al secțiunii.

position: absolute;
top: 0;

Plasați cursorul pe elementul principal

Asigurați-vă că adăugați aceleași linii de cod CSS la opțiunea de deplasare a elementului principal. Acest lucru va împiedica secțiunea să pâlpâie odată ce o plasați.

position: absolute;
top: 0;

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

După ce ați completat secțiunea, puteți salva antetul global și puteți vedea 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ă creați o bară de meniu plutitoare cu Divi's Theme Builder. Acesta este un mod minunat de a vă amesteca secțiunile antet și erou. Antetul este plasat deasupra primei secțiuni a paginii sau a postării 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.