Cum să adăugați două butoane side-by-side la antetul Divi Global

A avea apeluri clare la acțiune pe paginile dvs. este o necesitate pentru majoritatea site-urilor web. Și ce modalitate mai bună de a atrage atenția asupra unora dintre cele mai importante CTA-uri decât plasându-le în antetul dvs.? În tutorialul de astăzi, vă vom arăta cum să adăugați două butoane side-by-side la antetul dvs. global folosind Divi's Theme Builder. Unul dintre butoane este primar, celălalt secundar. Veți putea descărca gratuit fișierul JSON al antetului global!

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 Global Header

Pentru a pune mâna pe șablonul global gratuit de antet, 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 creați un antet global

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder și faceți clic pe „Adăugați un antet global”.

Construiți antet global

Continuați făcând clic pe „Construiți antet global”.

2. Construiți designul antetului global

Adăugați o secțiune nouă

Spațiere

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți setările secțiunii și eliminați toate umpluturile implicite de sus și de jos.

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

Indicele Z

Asigurați-vă că măriți indicele z al secțiunii și în setările de vizibilitate. Acest lucru se va asigura că conținutul global al antetului va apărea în partea de sus a întregii pagini și a conținutului postat.

• Indicele Z: 99999

Adăugați un rând nou

Structura coloanei

După ce ați completat setările secțiunii, adăugați un rând nou la secțiune folosind următoarea structură de coloane:

Dimensionare

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

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Modificați și valorile de umplere la stânga și la dreapta.

• Căptușeală stângă: 2vw (desktop), 10vw (tabletă și telefon)
• Căptușeală dreaptă: 2vw (desktop), 10vw (tabletă și telefon)

Elementul principal

Pentru a centra tot conținutul coloanei, vom adăuga aceste două linii de cod CSS la elementul principal al rândului.

display: flex;
align-items: center;

Eliminați proprietatea de afișare a desktopului de pe tabletă și mobil.

display: block;

Coloana 1

Frontieră

Continuați deschizând setările coloanei 1 și adăugați o margine dreaptă numai pe desktop.

• Lățimea marginii drepte: 1 px (desktop), 0 px (tabletă și telefon)
• Culoare margine dreaptă: # d8d8d8

Indicele Z

Măriți și indexul z al coloanei.

• Indicele Z: 11

Coloana 2

Elementul principal

Apoi, deschideți setările coloanei 2 și adăugați următoarele linii de cod CSS la elementul principal al coloanei pentru ao transforma în două coloane.

display: grid;
grid-template-columns: 50% 50%;

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

Selectați Meniu

E timpul să începeți să adăugați module! Adăugați un modul de meniu în coloana 1 și selectați un meniu la alegere.

Încărcați sigla

Încărcați o siglă în continuare.

Aspect

Treceți la fila de proiectare a modulului și asigurați-vă că se aplică următoarele setări de aspect:

• Stil: aliniat la stânga
• Direcția meniului drop-down: în jos

Text de meniu

Modificați apoi setările pentru textul meniului.

• Culoare link activ: # ef6f49
• Font de meniu: Montserrat
• Greutatea fontului meniului: Semi Bold
• Stilul fontului meniului: majuscule
• Culoarea textului meniului: # 333333 (Implicit), # ef6f49 (Plasați cursorul)
• Dimensiune text meniu: 0,7vw (desktop), 1,8vw (tabletă), 2,5vw (telefon)
• Spațiere scrisori meniu: 1 px

Text din meniul drop-down

Efectuați și câteva modificări ale setărilor de text din meniul drop-down.

• Culoarea fundalului meniului derulant: #ffffff
• Culoare linie meniu derulant: # ef6f49

Icoane

Apoi, schimbați culoarea pictogramei meniului hamburger.

• Culoare pictogramă meniu hamburger: # 000000

Dimensionare

Adăugați și o lățime maximă a logo-ului la setările de dimensionare.

• Lățimea maximă a siglei: 9vw (desktop), 12vw (tabletă), 15vw (telefon)

Logo Logo CSS

Și completați setările modulului adăugând o linie de cod CSS la sigla meniului din fila avansată.

margin-right: 10vw;

Adăugați un modul de cod în coloana 1

Adăugați cod CSS personalizat la modul

Următorul și ultimul modul de care avem nevoie în coloana 1 este un modul de cod. Adăugați următoarele linii de cod CSS pentru a personaliza spațiul dintre elementele de meniu:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

Adăugați modulul buton nr. 1 în coloana 2

Adăugați o copie

Treci la modulul următor! Adăugați primul modul buton și introduceți o copie la alegere.

Adăugați un link

Adăugați un link la modulul de butoane de mai jos.

Aliniere

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

• Aliniere buton: dreapta

Setări buton

Stilează și butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,8vw (Desktop), 1,7vw (tabletă), 2,5vw (telefon)
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: # edeef0 (implicit), # d6d7d8 (trecere cu mouse-ul)
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Montserrat
• Buton Font Greutate: Semi Bold
• Stilul fontului butonului: majuscule

Spațiere

Completați setările modulului adăugând câteva valori de umplere 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), 4vw (tabletă), 6vw (telefon)
• Căptușeală dreaptă: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

Modul buton clonare

După ce ați finalizat primul modul de butoane, clonați-l.

Schimbați legătura

Deschideți modulul de butoane duplicat și modificați adresa URL.

Schimbați alinierea

Schimbați și alinierea modulului.

• Aliniere buton: stânga

Schimbați setările butonului

Modificați și setările butoanelor.

• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ef6f49 (Implicit), # e06945 (Plasați cursorul)

Scala de transformare a cursorului

Completați setările butonului adăugând un efect de plasare a scalei de transformare.

• Dreapta: 110%
• Jos: 110%

3. Salvați modificările și rezultatul previzualizării temei

Odată ce antetul dvs. global este finalizat, salvați toate modificările constructorului de teme și 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 acest tutorial, v-am arătat cum să adăugați două butoane side-by-side la antetul dvs. global utilizând generatorul de teme Divi. Unul dintre butoanele pe care le-am adăugat este cel principal, celălalt este secundar. Adăugarea de butoane la antetul dvs. global vă ajută să subliniați unele dintre cele mai importante CTA-uri ale site-ului dvs. web. 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.