Nevoie pentru a crea un meniu plutitor transparent Divi ?
Căutați o modalitate de a vă plasa antetul general deasupra secțiunilor principale ale paginilor dvs.? În tutorial Divi Astăzi vă vom arăta exact cum să faceți asta.
Vom crea un antet global uimitor de la zero (folosind constructorul de tematică de Divi) și vom aplica un efect de plutire în bara de meniu.
Să mergem.
studiu
Înainte de a aborda acest tutorial, să aruncăm o privire rapidă asupra rezultatului pe care vrem să-l obținem.
Accesați Divi's Theme Builder și adăugați un șablon nou
continuați pe Divi > Theme Builder.
Creați antetul global cu Divi Theme Builder
Faceți clic pe „Adăugați antet global” și continuați selectând „Creați antet global”.
Setări secțiune
Culoare de fundal
Odată ajuns în editorul de șabloane, veți observa o secțiune pe pagină. Deschideți această secțiune și schimbați culoarea de fundal într-o culoare complet transparentă. Acest lucru va permite să se afișeze tot ce se află sub secțiune.
- Fundal: rgba(0,0,0,0)
dimensionarea
Apoi accesați fila Stil secțiune și modificați lățimea maximă.
- Lățimea maximă (vezi captura de ecran): 100%
spaţierea
De asemenea, eliminați toate marginile interne de sus și de jos implicite.
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
indicele Z
Și pentru a vă asigura că secțiunea rămâne deasupra tuturor cuprins Din secțiunea eroi, va trebui să creștem indexul z în setările de vizibilitate.
- Indicele Z: 99999
Adăugați o linie nouă
Structura coloanei
După ce ați finalizat setările secțiunii, puteți adăuga un nou rând folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga module, deschideți setările de rând și modificați setările de dimensionare după cum urmează:
- Armonizarea înălțimii coloanei: Da
- Lățime maximă: 100%
- Lățime maximă: 100%
spaţierea
Apoi adăugați margini interne personalizate (Sus și Jos).
- Marja internă de vârf: 2vw
- Marja interioară inferioară: 0vw
Elementul principal
Apoi, accesați fila Avansat și asigurați-vă că coloanele rămân una lângă alta pe ecran de dimensiuni mai mici, adăugând o singură linie de cod CSS la elementul rândul principal.
display: flex;
Coloana 2
Culoare de fundal
Continuați prin deschiderea setărilor coloanei 2 și schimbați culoarea de fundal într-o culoare semi-transparentă.
- Culoare de fundal: rgba (255,255,255,0.71)
frontieră
De asemenea, adăugați un chenar de jos la coloană.
- Lățimea marginii inferioare: 2px
- Culoarea butonului și a marginii inferioare: #f4583f
Cutie de umbră
Și creați un efect de plutire adăugând o umbră subtilă de casetă.
- Shadow Box: [Vizualizare captură]
- Poziția de pornire: 20px
- Intensitatea estomparii umbrei arcului: 50px
- Intensitatea răspândirii umbrei casetei: -20px
- Culoare font subtitrare: rgba(0,0,0,0.23)
Adăugați un modul Imagine la coloana 1
Descărcați logo-ul
După ce ați finalizat setările rândurilor și coloanelor, este timpul să adăugați modulele, începând cu un modul Imagine din coloana 1. Încărcați un logo cu fundal transparent.
aliniere
Comutați la fila Stil modul și modificați alinierea.
- Alinierea imaginii: centrat
dimensionarea
Modificați și lățimea modulului în setările de dimensionare.
- Lățimea maximă: 8 vw (desktop), 14 vw (tabletă), 21 vw (telefon)
Adăugați modul Meniu în coloana 2
Selectați un meniu
Să trecem la următoarea coloană. Acolo, singurul modul de care avem nevoie este un modul 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.
Dispoziţie
Comutați la fila Stil modul și modificați aspectul.
- Stil: centrat
- Meniu derulant: jos
Textul meniului
De asemenea, stilați setările textului meniului.
- Font meniu: Mulish
- Culoarea textului meniului: #6f6666
- Meniu Dimensiune text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
Meniul de derulare
Apoi modificați setările din meniul derulant.
- Culoarea rândului dropdown: #f4583f
icoane
Utilizați aceeași culoare pentru culoarea pictogramei meniului de hamburger în setările pictogramei.
- Culoare pictogramă meniu Hamburger: #f4583f
spaţierea
Completați setările modulului adăugând umplutură de sus și de jos în setările de spațiere.
- Marja internă de vârf: 1,5 vw
- Marja interioară inferioară: 1,5 vw
Adăugați modulul Button în coloana 3
Adăugați text la buton
Să trecem la următoarea și ultima coloană. Adăugați un modul Button cu un text la alegere.
aliniere
Apoi schimbați alinierea modulului.
- Alinierea butoanelor: centrat
Setări buton
Continuați personalizând butonul corespunzător:
- Utilizați stiluri personalizate pentru Buton: Da
- Dimensiunea textului butonului: 0,9 vw (desktop), 1,5 vw (tabletă), 2,5 vw (telefon)
- Culoarea textului butonului: #ffffff
- Buton de fundal: #f4583f
- Lățimea chenarului butonului: 0 pixeli
- Culoarea chenarului butonului: #f4583f
- Butonul Raza chenarului: 0 pixeli
- Font pentru buton: Mulish
- Buton pentru lumină slabă: text aldine
spaţierea
Completați setările modulului adăugând o umplutură personalizată pe diferite dimensiuni de ecran.
- Marja internă de sus și de jos: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Marginea internă stângă și dreaptă: 2vw (desktop), 3vw (tabletă), 4vw (telefon)
Parametri suplimentari de secțiune
Element principal implicit
Odată ce ați finalizat personalizarea generală, mai este un lucru de făcut; plasați secțiunea deasupra cuprins a paginii dvs. 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;
Element principal la hover
Asigurați-vă că adăugați aceleași linii de cod CSS la opțiunea de trecere cu mouse-ul a elementului principal. Acest lucru va împiedica secțiunea să pâlpâie odată ce treceți cu mouse-ul peste ea.
position: absolute;
top: 0;
Salvați modificările constructorului și vizualizați rezultatul
După ce ați completat secțiunea, puteți salva antetul global și puteți afișa rezultatul pe site-ul dvs.!
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire asupra rezultatului.
Descărcați DIVI acum!!!
Concluzie
Asa de ! Asta e pentru acest articol. V-am arătat cum să creați o bară de meniu plutitoare și transparentă cu Divi's Theme Builder. Antetul este plasat deasupra primei secțiuni a paginii sau postării dvs.
Pentru a vă familiariza cu Divi's Theme Builder, puteți citi și articolul nostru despre Cum se creează un antet global cu Generatorul de teme Divi
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
