Cum să creați un antet global personalizat pe ecran complet cu Divi's Theme Builder

Dacă sunteți în căutarea unei modalități de a crea un antet global pentru site-ul dvs. web care să nu ocupe mult spațiu, vă va plăcea acest tutorial. Vă vom arăta cum să creați un antet global cu ecran complet folosind Divi's Theme Builder. În timp ce derulați pagina în jos, singurele două lucruri suplimentare pe care le veți observa în postarea / pagina dvs. sunt 1) o pictogramă hamburger care poate fi făcută clic în colțul din stânga sus și 2) un logo în colțul din dreapta sus. Aceste două elemente vă vor urmări vizitatorii pe tot parcursul procesului de navigare și, odată ce se face clic pe pictograma hamburger, se va deschide un meniu personalizat pe ecran complet și va permite vizitatorilor să meargă la alte pagini de pe site-ul dvs. web. Rezultatul acestui design este extrem de receptiv ș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 pe ecran complet

Pentru a vă pune mâna pe șablonul de antet global cu ecran complet, 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.

Începeți să creați antet global

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

2. Dedicați secțiunea nr. 1 la navigarea pe ecran complet

Setări secțiune

Culoare de fundal

E timpul să începi să creezi! Deschideți setările secțiunii pe care le puteți observa în editorul de șabloane și schimbați culoarea de fundal într-una complet transparentă.

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

Spațiere

Eliminați umplutura implicită de sus și de jos a secțiunii în continuare.

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

Clasa CSS

Continuați adăugând o clasă CSS la secțiune. Mai târziu în această postare, vom avea nevoie de această clasă CSS pentru a transforma meniul pe ecran complet.

• Clasa CSS: secțiune-transformare

Vizibilitate implicită

Apoi, accesați setările de vizibilitate și ascundeți revărsările. Asigurați-vă că creșteți și indexul z al secțiunii, astfel se va asigura că secțiunea va rămâne în partea de sus a tuturor paginilor și a conținutului postării.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns
• Indicele Z: 999999

Plasați cursorul pe vizibilitate

După ce ați adăugat indexul z, activați opțiunea de deplasare și asigurați-vă că același index z se aplică și acolo.

• Indicele Z: 999999

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un prim rând la secțiune folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

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

Adauga continut

Singurul modul de care avem nevoie în acest rând este un modul de text. Adăugați un simbol de meniu la alegere în caseta de conținut. În acest tutorial, folosim „≡”.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Abril Fatface
• Culoarea textului: # 000000
• Dimensiune text: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Înălțimea liniei de text: 1em

Spațiere

Modificați valorile de spațiere pe diferite dimensiuni de ecran în continuare.

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

ID CSS

Acest modul text va servi drept declanșator pentru meniul cu ecran complet. De aceea va trebui să atribuim un ID CSS modulului text. Mai târziu, în tutorial, vom folosi codul CSS în codul nostru.

• CSS ID: meniu-deschis

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un al doilea rând la secțiune folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare după cum urmează:

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

Spațiere

Modificați și valorile de spațiere.

• Marja superioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Marja inferioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Garnitura stânga: 19vw
• Garnitura dreapta: 19vw

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

Adauga continut

Apoi, adăugați un nou modul de text în coloană. Acest modul text reprezintă primul dvs. element de meniu.

Adăugați un link

Asigurați-vă că adăugați un link adecvat la modulul următor.

• Adresă URL a modulului: #

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Poppins
• Greutatea fontului textului: Semi Bold
• Culoarea textului: # 000000
• Dimensiune text: 3vw (desktop), 7vw (tabletă), 8vw (telefon)
• Spațiere scrisoare text: -0,1vw
• Înălțimea liniei de text: 1em

Spațiere

Modificați apoi setările de spațiu ale modulului.

• Marja superioară: 1vw
• Căptușeală inferioară: 2vw
• Garnitura stânga: 3vw

Frontieră

Adăugați și o margine de jos.

• Lățimea marginii inferioare: 1 px
• Culoarea chenarului inferior: # 333333

Clasa CSS

Și completați setările modulului adăugând o clasă CSS personalizată. Va trebui să adăugați această clasă CSS la fiecare element de meniu pe care îl plasați în secțiunea dvs.

Clonați modulul de text de trei ori

După ce ați finalizat primul modul de text, îl puteți clona de câte ori doriți (în funcție de elementele de meniu pe care doriți să le afișați în meniu). Cu toate acestea, asigurați-vă că modulele nu depășesc înălțimea ecranului.

Schimbați conținutul și linkul fiecărui duplicat

Va trebui să schimbați conținutul și linkul fiecărui duplicat.

Adăugați modulul Social Media Follow

Adăugați rețele sociale la alegere

Următorul și ultimul modul de care avem nevoie în acest rând este un modul de urmărire pe rețelele sociale. Adăugați toate rețelele sociale pe care doriți să le afișați.

Resetați stilurile de rețea socială individuale

Continuați resetând individual stilurile fiecărei rețele sociale.

Setări pictograme

Apoi, accesați fila de proiectare a modulului și modificați setările pictogramei după cum urmează:

• Culoare pictogramă: # 000000
• Utilizați dimensiunea pictogramei personalizate: Da
• Pictogramă Dimensiune font: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

Spațiere

Adăugați și niște umplutură stângă.

• Garnitura stânga: 3vw

Clasa CSS

Completați setările modulului adăugând o clasă CSS.

Adăugați rândul # 3

Structura coloanei

Ultimul rând de care avem nevoie în această secțiune conține următoarea structură de coloane:

Spațiere

Limitați spațiul ocupat de acest rând eliminând toate umpluturile implicite de sus și de jos.

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

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

Introduceți codul JQuery și CSS

Apoi, adăugați un modul de cod și introduceți câteva coduri CSS și JQuery pentru a face funcția meniului pe ecran complet. Asigurați-vă că plasați manual codul JQuery între etichetele de script și codul CSS între etichetele de stil așa cum puteți observa în ecranul de imprimare de mai jos.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-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;
}

3. Dedicați secțiunea nr. 2 la sigla din colțul din dreapta sus

Setări secțiune

Culoare de fundal

Treci la următoarea secțiune! Această secțiune va conține sigla în colțul din dreapta sus. Deschideți setările secțiunii și schimbați culoarea de fundal într-una complet transparentă.

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

Spațiere

Eliminați umplutura implicită de sus și de jos a secțiunii în continuare.

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

Vizibilitate implicită

Măriți și indexul z al secțiunii.

• Indicele Z: 99999

Plasați cursorul pe vizibilitate

Activați opțiunea de deplasare pe indexul z și asigurați-vă că aceeași valoare se aplică și la plecare.

• Indicele Z: 99999

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare după cum urmează:

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

Spațiere

Eliminați și umplutura implicită de sus și de jos a rândului.

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

Adăugați modulul de imagine în coloană

Încărcați imaginea logo PNG

Singurul modul de care avem nevoie în acest rând și secțiune este un modul de imagine. Încărcați fișierul cu imagine logo semi-transparent.

Dimensionare

Mergeți la setările de dimensionare ale modulului și forțați lățimea completă.

• Forțează lățimea completă: Da

Spațiere

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

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

4. Setări suplimentare ale secțiunii

Sectiunea 1

Dimensionare

Odată ce ați completat ambele secțiuni și toate modulele din ea, este timpul să le schimbați dimensiunea. Deschideți prima secțiune și aplicați următoarele valori ale lățimii și înălțimii:

• Lățime: 8vw (desktop), 11vw (tabletă), 18vw (telefon)
• Înălțime: 7vw (desktop), 11vw (tabletă), 18vw (telefon)

Element principal implicit

Apoi, accesați fila avansată a secțiunii și adăugați următoarele linii de cod CSS:

position: fixed;
top: 0;

Plasați cursorul pe elementul principal

Asigurați-vă că aceleași linii de cod CSS se aplică pe cursor.

position: fixed;
top: 0;

Sectiunea 2

Dimensionare

Continuați deschizând setările celei de-a doua secțiuni și modificați lățimea pe diferite dimensiuni ale ecranului.

• Lățime: 13vw (desktop), 21vw (tabletă), 30vw (telefon)

Element principal implicit

Apoi, accesați fila avansată și adăugați următoarele linii de cod CSS:

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

Plasați cursorul pe elementul principal

Asigurați-vă că aceleași linii de cod CSS se aplică pe cursor.

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

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

După ce ați parcurs toți pașii de mai sus, puteți salva șablonul global de antet și puteți vizualiza 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 acest tutorial, v-am arătat cum să creați un antet global cu ecran complet folosind Divi's Theme Builder. Am adăugat două elemente fixe la proiectarea noastră; o pictogramă hamburger în colțul din stânga sus și un logo în colțul din dreapta sus. La clic, pictograma hamburger deschide un meniu cu ecran complet, realizat folosind elementele încorporate ale Divi. Ești liber să folosești Divi pentru a proiecta acest meniu cu ecran complet oricum vrei! La începutul acestui tutorial, ați putut descărca gratuit fișierul JSON. Dacă aveți întrebări, 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.