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 unul lângă altul la antetul dvs. global folosind Button Builder. tematică de la Divi. Unul dintre butoane este primar, celălalt secundar. De asemenea, veți putea descărca gratuit fișierul JSON antet global!
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.
Birou
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”.
Creați un antet global
Continuați făcând clic pe „Construiți antet global”.
2. Construiți un design general al antetului
Adăugați o secțiune nouă
spaţierea
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.
- Garnitură superioară: 0px
- Garnitura de jos: 0px
Indicele Z
De asemenea, asigurați-vă că creșteți indicele z al secțiunii în setările de vizibilitate. Acest lucru va asigura că cuprins antetul global va apărea în partea de sus a întregii pagini și va posta cuprins.
- Indicele Z: 99999
Adăugați o linie nouă
Structura coloanei
După ce ați finalizat setările secțiunii, adăugați un nou rând la secțiune utilizând următoarea structură a coloanei:
dimensionarea
Fără a adăuga module, deschideți parametrii liniei și lăsați linia să ocupe întreaga lățime a containerului de secțiune.
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 1
- Egalizați înălțimile coloanei: Da
- Lățime: 100%
- Lățime maximă: 100%
spaţierea
De asemenea, schimbați valorile de umplere la stânga și la dreapta liniei.
- Căptușire stânga: 2vw (birou), 10vw (tabletă și telefon)
- Căptușire dreapta: 2vw (birou), 10vw (tabletă și telefon)
Elementul principal
Pentru a centra totul cuprins coloane, 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 desktop de pe tabletă și mobil.
display: block;
Coloana 1
frontieră
Continuați prin deschiderea setărilor din coloana 1 și adăugați un chenar drept doar pe desktop.
- Lățimea marginii drepte: 1px (birou), 0px (tabletă și telefon)
- Culoarea marginii drepte: # d8d8d8
Indicele Z
De asemenea, măriți indicele z al coloanei.
- Indicele Z: 11
Coloana 2
Elementul principal
Apoi deschideți setările pentru coloana 2 și adăugați următoarele linii de cod CSS la elementul coloanei principale pentru a-l transforma în două coloane.
display: grid;grid-template-columns: 50% 50%;
Adăugați un modul de meniu la coloana 1
Selectați meniul
Este 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.
Descărcați logo-ul
Apoi încărcați un logo.
Dispoziţie
Treceți la fila de proiectare a modulului și asigurați-vă că se aplică următoarele setări de aspect:
- Stil: aliniat stânga
- Direcția meniului derulant: în jos
Textul meniului
Apoi schimbați setările textului meniului.
- Culoarea linkului activ: # ef6f49
- Font de meniu: Montserrat
- Greutatea fontului de meniu: Semi îndrăzneț
- Stilul fontului de meniu: cu majuscule
- Culoarea textului meniului: # 333333 (implicit), # ef6f49 (trecere)
- Dimensiunea textului meniului: 0.7vw (desktop), 1.8vw (tabletă), 2.5vw (telefon)
- Spațiu de litere de meniu: 1px
Text meniu derulant
De asemenea, modificați setările de text din meniul derulant.
- Culoarea fundalului meniului drop-down: #ffffff
- Culoarea liniei din meniul derulant: # ef6f49
icoane
Apoi, schimbați culoarea pictogramei meniului hamburger.
- Culoarea pictogramei meniului Hamburger: # 000000
dimensionarea
Adăugați, de asemenea, o lățime maximă a logo-ului la parametrii de dimensionare.
- Lățimea maximă a logo-ului: 9vw (desktop), 12vw (tabletă), 15vw (telefon)
Meniu 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 la coloana 1
Adăugați un cod CSS personalizat în 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 primului buton la coloana 2
Adăugați o copie
Să trecem la modulul următor! Adăugați primul modul buton și introduceți o copie la alegere.
Adăugați un link
Apoi adăugați un link către modulul buton.
aliniere
Comutați la fila de proiectare a modulului și schimbați alinierea butoanelor.
- Alinierea butoanelor: dreapta
Setări buton
Stilează și butonul.
- Utilizați stiluri personalizate pentru buton: Da
- Mărimea textului butonului: 0.8vw (desktop), 1.7vw (tabletă), 2.5vw (telefon)
- Culoarea textului butonului: # 000000
- Culoarea fundalului butonului: # edeef0 (implicit), # d6d7d8 (cursor)
- Lățimea marginii butonului: 0px
- Raza de margine a butonului: 0px
- Spațiu de litere pentru butoane: 2px
- Font de buton: Montserrat
- Greutatea fontului pentru buton: Semi îndrăzneț
- Stilul fontului cu buton: cu majuscule
spaţierea
Completați setările modulului adăugând valori de umplere personalizate pe diferite dimensiuni de ecran.
- Înveliș superior: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Garnitură de jos: 1vw (birou), 2vw (tabletă), 3vw (telefon)
- Căptușire stânga: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
- Căptușire dreaptă: 2vw (birou), 4vw (tabletă), 6vw (telefon)
Modulul butoanelor clonare
După ce ați finalizat primul modul de buton, clonați-l.
Editează linkul
Deschideți modulul de butoane duplicat și modificați adresa URL.
Schimbați alinierea
Schimbați și alinierea modulului.
- Alinierea butoanelor: stânga
Modificați setările butonului
De asemenea, modificați setările butoanelor.
- Culoarea textului butonului: #ffffff
- Culoarea fundalului butonului: # ef6f49 (implicit), # e06945 (cursor)
Treceți la scară de transformare
Completați setările butonului adăugând un efect de plasare a scalei de transformare.
- Corect: 110%
- Scăzut: 110%
3. Salvați modificările din generatorul de teme și rezultatul previzualizării
Odată ce antetul global este complet, salvați toate modificările făcute în generatorul de teme și vizualizați rezultatul pe dvs site-ul web!
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Ultimele gânduri
În acest tutorial, v-am arătat cum să adăugați două butoane una lângă cealaltă la antetul dvs. general utilizând generatorul de teme al lui Divi.
Unul dintre butoanele pe care le-am adăugat este primar, celălalt este secundar. Adăugarea de butoane la antetul general vă ajută să evidențiați unele dintre cele mai importante CTA din dvs site-ul web. De asemenea, ați putut descărca fișierul JSON gratuit! Dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
