Cum să creați un meniu Slide-In Responsive cu Divi's Theme Builder

Când configurați un site web pentru un client al dvs., vă veți gândi la ce tip de antet să creați. Cea mai utilizată în jurul web este bara de meniu orizontală din partea de sus, dar există și alte opțiuni, cum ar fi un meniu slide-in. Meniurile glisante vă ajută să limitați spațiul ocupat de antetul global. În loc să afișați toate elementele de meniu chiar de pe bat, puteți lăsa să apară un meniu slide-in atunci când vizitatorii dvs. dau clic pe pictograma hamburger din colțul din dreapta sus. Utilizarea unui meniu slide-in vă ajută să adăugați interacțiuni suplimentare pe site-ul dvs. web.

În cazul de utilizare tutorial Divi de astăzi, vă vom arăta cum să creați unul folosind Divi's Theme Builder, elementele Divi încorporate și câteva coduri suplimentare. Designul acestui meniu slide-in se potrivește perfect cu Yoga Instructor Layout Pack, dar sunteți liber să îl modificați pentru a se potrivi cu orice site web pe care îl creați. 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 meniului Slide-In Responsive

Pentru a vă pune mâna pe șablonul global de antet global al meniului slide-in, 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. Accesați Divi Theme Builder și începeți să creați antet global

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder din backend-ul site-ului dvs. WordPress și faceți clic pe „Adăugați un antet global”.

Începeți să creați antet global

Continuați selectând „Build Global Header”.

2. Creați designul antetului

Setări secțiune

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și faceți culoarea de fundal transparentă.

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

Spațiere

Treceți la fila de proiectare și eliminați toate umpluturile implicite de sus și de jos.

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

Poziţie

Apoi, vom transforma secțiunea fixată accesând fila avansată și modificând setările de poziție.

• Poziție: Fix
• Locație: Centrul de sus

Adăugați rândul # 1

Structura coloanei

După ce ați completat setările secțiunii, adăugați 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ă:

• Lățime: 97%
• Lățime maximă: 100%

Spațiere

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

• Căptușeală superioară: 1%
• Căptușeală inferioară: 0 px

Elementul principal

Apoi, accesați fila avansată și adăugați două linii de cod CSS la elementul principal al rândului. Acest lucru ne va ajuta să aliniați vertical conținutul coloanei din rândul nostru.

display: flex;
align-items: center;

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

Încărcați sigla

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați sigla.

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

Adăugați 3 spanuri la Content Box

Apoi, treceți la a treia coloană și adăugați un modul de text. Vom folosi fila text a modulului text pentru a adăuga trei întinderi HTML cu clase personalizate atribuite acestora. Mai târziu, în tutorial, vom folosi aceste întinderi pentru a crea pictograma interactivă de hamburger.

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Culoare de fundal

Schimbați apoi culoarea de fundal a modulului.

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

Setări text

Apoi, treceți la fila de proiectare și eliminați înălțimea liniei de text. Acest lucru ne va ajuta să avem control deplin asupra intervalelor pe care le-am adăugat.

• Înălțimea liniei de text: 0em

Dimensionare

Apoi, vom modifica setările de dimensionare ale modulului.

• Lățime: 120 px
• Alinierea modulului: dreapta

Spațiere

Și vom completa setările modulului transformând modulul într-un pătrat folosind valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 40 px
• Căptușeală inferioară: 60 px
• Garnitura stânga: 40 px
• Umplutură dreaptă: 40 px

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor! Vom folosi acest rând pentru a proiecta întregul nostru meniu slide-in. Utilizați următoarea structură de coloane:

Culoare de fundal

Fără a adăuga module, deschideți setările rândului și schimbați culoarea de fundal după cum urmează:

• Culoare fundal: # e7e0e2

Imagine de fundal

Folosim și o imagine de fundal tipar. Puteți găsi imaginea pe care am folosit-o în folderul de descărcare pe care l-ați putut descărca la începutul acestui tutorial, dar nu ezitați să utilizați orice alt model de fundal la alegere.

• Dimensiunea imaginii de fundal: dimensiunea reală
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: Repetați

Dimensionare

Apoi, treceți la fila de proiectare și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 20% (desktop), 40% (tabletă), 60% (telefon)
• Înălțime: 100vh

Spațiere

Modificați și setările de spațiere pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 10vw (desktop), 30vw (tabletă), 40vw (telefon)

Frontieră

Și completați setările rândului adăugând o margine stângă.

• Lățimea marginii stângi: 10 px
• Culoare margine stângă: # 24394a
• Stilul marginii stângi: dublu

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

Adauga continut

E timpul să adăugați primul element de meniu Modul text! Adăugați copia în caseta de conținut.

Adăugați un link

Continuați adăugând un link relevant la elementul de meniu.

• Adresă URL a modulului: #

Culoare de fundal

Modificați culoarea de fundal în continuare.

• Culoare fundal: rgba (216.210.212,0.35)

Setări text

Apoi, treceți la fila de proiectare și modificați setările de text după cum urmează:

• Font text: Domine
• Greutatea fontului textului: Bold
• Culoarea textului: # 000000
• Dimensiune text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Aliniere text: centru

Spațiere

Completați setările modulului adăugând câteva valori de spațiere personalizate pe diferite dimensiuni de ecran.

• Marja inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw

Modul de text Clonare (1 modul pentru fiecare element de meniu)

După ce ați finalizat primul element de meniu Modul text, îl puteți clona de câte ori este nevoie. Asigurați-vă că modulele dvs. nu depășesc înălțimea ferestrei.

Schimbați conținutul și linkurile modulelor de text duplicat

Schimbați conținutul și linkurile fiecărui modul de text duplicat.

Adăugați un modul buton în coloană

Adăugați o copie

Ultimul modul de care avem nevoie în acest rând este un modul buton. Adăugați o copie la alegere.

Adăugați un link

Adăugați și un link.

• Adresă URL a butonului: #

Aliniere

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

• Aliniere buton: centru

Setări buton

Continuați stilizând modulul butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiunea textului butonului: 0,7vw (desktop), 1,5vw (tabletă), 2,5vw (telefon)
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: rgba (0,0,0,0)
• Culoarea chenarului butonului: # 24394a
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 4 px

• Buton Font: Deschideți Sans
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

Spațiere

Și completați setările modulului adăugând valori de spațiere personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 5vw
• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușire stângă: 1,8vw (desktop), 3vw (tabletă), 4vw (telefon)
• Căptușeală dreaptă: 1,8vw (desktop), 3vw (tabletă), 4vw (telefon)

3. Adăugați funcționalitatea Slide-In

Adăugați ID CSS la modulul de text pentru pictograma meniu

Acum, că avem toate elementele la locul lor, este timpul să creăm efectul de meniu slide-in receptiv! Mai întâi, deschideți modulul de text (care conține intervalele) î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.

• CSS ID: slide-in-open

Adăugați Clasa CSS la rândul 2

Apoi, deschideți al doilea rând, accesați fila avansată și adăugați o clasă CSS personalizată. La clic, vom permite rândul să alunece.

• Clasa CSS: slide-in-menu-container

Schimbați poziționarea rândului # 2

Vom repoziționa și acest rând. Observați cum decalajul orizontal se potrivește cu lățimea rândului pe diferite dimensiuni ale ecranului în setările de dimensionare.

• Poziție: Absolută
• Locație: dreapta sus
• Decalaj orizontal: -20% (desktop), -40% (tabletă), -60% (telefon)

Schimbați opacitatea rândului 2

Și aduceți opacitatea la 0 într-o stare implicită.

opacity: 0;

Adăugați un modul de cod în a doua coloană a primului rând

Introduceți codul CSS

Pentru a crea efectul funcției de clic și pentru a stiliza intervalele pictogramei noastre hamburger, vom avea nevoie de un cod CSS. Adăugați un modul de cod la a doua coloană a primului rând și plasați următoarele linii de cod CSS între etichetele de stil, după cum puteți observa î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: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

Introduceți codul JQuery

Va trebui să adăugăm și JQuery pentru funcția de clic. Asigurați-vă că plasați codul între etichetele de script așa cum puteți observa în ecranul de imprimare de mai jos:

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

4. Salvați modificările constructorului de teme și vizualizați rezultatele pe site

După ce ați completat toate elementele din antetul dvs. global, singurul lucru rămas de făcut este să salvați toate modificările și să vizualizați 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ă utilizați Divi's Theme Builder pentru a crea un meniu slide-in adaptabil pentru următorul dvs. proiect Divi. Am combinat cele mai bune elemente și opțiuni încorporate ale lui Divi cu un cod de funcție de clic personalizat. Acest lucru vă permite să vă concentrați asupra proiectării meniului slide-in și să lăsați codul să preia partea funcțională a antetului global! 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.