Doriți să creați un meniu lateral alunecant și receptiv în Divi?
La crearea unui site-ul web, te întrebi adesea ce tip de antet să creezi. Cel mai folosit pe web este bara de meniu orizontală din partea de sus, dar există și alte opțiuni, precum un meniu glisant.
Meniurile glisante vă ajută cel mai adesea să limitați spațiul ocupat de antetul global. Astfel, puteți lăsa să apară un meniu glisant când dvs vizitatori faceți clic pe pictograma hamburger din colțul din dreapta sus.
Prin urmare, utilizarea unui meniu glisant vă ajută să adăugați interacțiune suplimentară site-ul web.
Prin urmare, în acest tutorial, vă vom arăta cum să creați unul utilizând Generatorul de teme Divi.
Să începem!
studiu
Înainte de a merge în acest tutorial, să ne uităm mai întâi la rezultatul pe care îl vom obține.
Accesați Teme Builder și creați un antet global
Accesați Creatorul de teme
Pentru a începe, accesați Theme Builder din meniul Divi din tabloul de bord WordPress și faceți clic pe „Adăugați antet global”.
Creați antetul global
Continuați selectând „Creați antet global”.
Creați un stil de antet
Setări secțiune
Culoare de fundal
Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți această secțiune și faceți culoarea de fundal transparentă.
- Fundal: rgba (255,255,255,0)
spaţierea
Comutați la fila Stil și eliminați toate marginile de jos și de sus.
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
Post
În continuare, vom schimba poziția secțiunii mergând la fila avansată și modificând setările de poziție.
- Poziție: fixă
- Locație: centru sus
Adăugați prima linie
Structura coloanei
După ce ați finalizat setările secțiunii, adăugați un nou rând folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:
- Lățime maximă: 97%
- Lățime maximă: 100%
spaţierea
Modificați setările de spațiere.
- Marja internă maximă: 1%
- Marja internă inferioară: 0px
elementul principal
Apoi, accesați fila avansată și adăugați două linii de cod CSS la elementul principal al liniei. Acest lucru ne va ajuta să aliniem vertical cuprins a coloanei din rândul nostru.
display: flex;
align-items: center;
Adăugați un modul Imagine la coloana 1
Descărcați logo-ul
Este timpul să adăugați module, începând cu un modul Imagine în coloana 1. Încărcați sigla.
Adăugați un modul Text la coloana 3
Adăugați 3 spații în zona de conținut
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Culoare de fundal
Modificați culoarea de fundal a modulului.
- Fundal: rgba (0,0,0,0.04)
Setări text
Apoi, treceți la fila Stil și eliminați înălțimea liniei de text. Acest lucru ne va ajuta să avem control deplin asupra domeniilor pe care le-am adăugat.
- Înălțimea liniei textului: 0em
dimensionarea
Vom modifica parametrii de dimensionare a modulului.
- Lățimea maximă: 120 pixeli
- Aliniere text: dreapta
spaţierea
Și vom completa parametrii modulului transformând modulul într-un pătrat. Pentru aceasta vom folosi valori personalizate de umplutură în setările de spațiere.
- Vertexul marjei interioare: 40px
- Marja internă inferioară: 60px
- Marja interioară stângă: 40px
- Marja interioară dreapta: 40px
Adăugați a doua linie
Structura coloanei
Rândul următor! Vom folosi această linie pentru a ne proiecta întregul meniu glisant. Utilizați următoarea structură de coloane:
Culoare de fundal
Fără a adăuga module, deschideți setările de rând și schimbați culoarea de fundal după cum urmează:
- Fundal: #e7e0e2
Imagine de fundal
De asemenea, folosim o imagine de fundal cu model. Puteți utiliza un model de fundal la alegere.
- Dimensiunea imaginii de fundal: dimensiunea reală
- Poziția imaginii de fundal: centru
- Repetați imaginea de fundal: Repetați
dimensionarea
Apoi, treceți la fila Stil și modificați setările de dimensionare în consecință:
- Utilizați lățimea jgheab personalizată: da
- Distanța între coloane: 1
- Lățimea maximă: 20% (desktop), 40% (tabletă), 60% (telefon)
- Înălțime: 100vh
spaţierea
Modificați, de asemenea, setările de spațiere pe diferite dimensiuni de ecran.
- Marja internă Summit: 10 vw (desktop), 30 vw (tabletă), 40 vw (telefon)
frontieră
Și completați parametrii de linie adăugând un chenar din stânga.
- Lățimea marginii din stânga: 10px
- Culoarea marginii din stânga: #24394a
- Stil chenar stânga: dublu
Adăugați un modul Text la coloană
Adăugați conținut
Este timpul să adăugați primul element de meniu al Modulului de text! Adăugați copia în casetă cuprins.
Adăugați un link
Continuați prin adăugarea unui link relevant la elementul de meniu.
- Adresa URL a linkului la modul: #
Culoare de fundal
Apoi schimbați culoarea de fundal.
- Fundal: rgba (216,210,212,0.35)
Setări text
Apoi, comutați la fila Style'3 și modificați setările de text după cum urmează:
- Font text: Domine
- Text ușor ușor: text aldine
- Culoare text Text: #000000
- Dimensiunea textului text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Alinierea textului: centrat
spaţierea
Completați setările modulului adăugând valori de spațiere personalizate pe diferite dimensiuni de ecran.
- Marja inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Marja internă de vârf: 1vw
- Marja internă inferioară: 1vw
Clonează modul de text (1 modul pentru fiecare element de meniu)
Odată ce ați finalizat modulul text al primului element de meniu, îl puteți clona de câte ori este necesar. Doar asigurați-vă că modulele dvs. nu depășesc înălțimea ferestrei.
Editați conținutul și linkurile modulului Text duplicat
Modificați fișierul cuprins și legăturile fiecărui modul de text duplicat.
Adăugați modul de buton la coloană
Adăugați o copie
Ultimul modul de care avem nevoie în acest rând este un modul Button. Adăugați o copie la alegere.
Adăugați un link
Adaugă și un link.
- Adresa URL a linkului butonului: #
aliniere
Comutați la fila Stil și modificați alinierea butoanelor.
- Alinierea butoanelor: centrat
Setări butoane
Continuați prin personalizarea modulului Button după cum urmează:
- Utilizați stiluri personalizate pentru butonul: Da
- Dimensiunea textului butonului: 0,7 vw (desktop), 1,5 vw (tabletă), 2,5 vw (telefon)
- Culoarea textului butonului: #000000
- Buton de fundal: rgba (0,0,0,0)
- Culoarea chenarului butonului: #24394a
- Butonul Raza chenarului: 0 pixeli
- Spațiere între litere butoane: 4px
- Buton Font: Deschideți Niciunul
- Buton Soft Light: text îngroșat
- Buton de copiere a stilului: TT
spaţierea
Și completează setările modulului adăugând valori de spațiere personalizate pe diferite dimensiuni de ecran.
- Marja superioară: 5vw
- Marja internă de vârf: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Marja interioară inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Marja internă din stânga: 1,8 vw (desktop), 3 vw (tabletă), 4 vw (telefon)
- Marginea interioară dreaptă: 1,8 vw (desktop), 3 vw (tabletă), 4 vw (telefon)
Adăugați funcționalitate de glisare
Adăugați ID CSS la modulul text pictogramă meniu
Acum că avem toate elementele la locul lor, este timpul să creăm efectul de meniu glisant receptiv! Mai întâi, deschideți modulul Text (conținând domeniile) în a treia coloană a primului rând și utilizați un ID CSS personalizat în fila avansată. Vom folosi acest ID CSS pentru a crea o funcție de clic în codul nostru.
- ID CSS: slide-in-deschide
Adăugați clasa CSS la rândul #2
Apoi deschideți a doua linie, accesați fila avansată și adăugați o clasă CSS personalizată. Când faceți clic, linia va aluneca.
- Clasa CSS: slide-in-menu-container
Schimbați poziționarea liniei #2
Vom repoziționa și această linie. Observați cum offset-ul orizontal se potrivește cu lățimea liniei pe diferite dimensiuni de ecran în setările de dimensionare.
- Poziție: absolută
- Locație: dreapta sus
- Offset orizontal: -20% (desktop), -40% (tabletă), -60% (telefon)
Modificați opacitatea liniei 2
Și aduceți opacitatea la 0 într-o stare implicită.
opacity: 0;
Adăugați modulul Cod în a doua coloană a primului rând
Introduceți codul CSS
Pentru a crea efectul funcției de clic și pentru a stila doagele pictogramei noastre hamburger, vom avea nevoie de un cod CSS. Adăugați un modul de cod în a doua coloană a primului rând și plasați următoarele linii de cod CSS între etichetele de stil, după cum puteți vedea în ecranul de imprimare de mai jos:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Introduceți codul JQuery
Va trebui, de asemenea, să adăugăm ceva JQuery pentru funcția de clic. Asigură-te că plasați codul între etichetele de script , după cum puteți vedea în ecranul de imprimare de mai jos:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('deschide'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Salvați modificările generatorului de teme și afișați rezultatul pe site
Odată ce ați completat toate elementele antetului global, tot ce trebuie să faceți este să salvați toate modificările și să afișați rezultatul pe site-ul dvs.!
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire asupra rezultatului.
Concluzie
În concluzie, în acest articol, v-am arătat cum să utilizați generatorul de teme Divi pentru a crea un meniu glisant receptiv. Pentru aceasta, am combinat cele mai bune elemente și opțiuni încorporate ale Divi cu un cod de funcție de clic personalizat. Deci, vă permite să vă concentrați pe proiectarea meniului glisant și să lăsați codul să se ocupe de partea funcțională a antetului global!
Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
