Treci la conținutul principal

Cum să adăugați doi butoane unul lângă altul în antetul dvs. global Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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. general folosind Divi's Theme Builder. Unul dintre butoane este primar, celălalt secundar. De asemenea, veți putea descărca gratuit fișierul global antet JSON!

studiu

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Birou

Buton juxapus divi

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”.

Folosind generatorul de teme

Creați un antet global

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

Configurarea capului

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
Configurare spațiu Divi

Indicele Z

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

  • Indicele Z: 99999
Configurarea indexului Z

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:

Configurarea aspectului

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%
Configurarea dimensiunii

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)
Setări linie Divi

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 desktop de pe tabletă și mobil.

display: block;

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Configurare stil linie Divi

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
Configurația chenarului coloanei

Indicele Z

De asemenea, măriți indicele z al coloanei.

  • Indicele Z: 11
Setări avansate de configurare a coloanei

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%;

Configurare stil coloană 1

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.

Modul meniu de selecție

Descărcați logo-ul

Apoi încărcați un logo.

Configurare logo Divi

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
Aspectul meniului

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
Configurarea meniului Divi

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
Configurarea meniului drop-down Divi

icoane

Apoi, schimbați culoarea pictogramei meniului hamburger.

  • Culoarea pictogramei meniului Hamburger: # 000000
Configurarea pictogramei meniului Divi

dimensionarea

Adăugați, de asemenea, o lățime maximă a logo-ului la parametrii de dimensionare.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Lățimea maximă a logo-ului: 9vw (desktop), 12vw (tabletă), 15vw (telefon)
Configurarea dimensiunii meniului Divi

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 cod meniu css divi

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>

Coloana divi personalizată a codului CSS

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.

Copiați modulul butonului divi

Adăugați un link

Apoi adăugați un link către modulul buton.

Configurare link buton

aliniere

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

  • Alinierea butoanelor: dreapta
Configurație de aliniere a modulului de butoane

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
Setări buton stil Divi
  • 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
Personalizați fontul butonului Divi

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)
Setări spațiu buton Divi

Modulul butoanelor clonare

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

Slot modul Divi

Editează linkul

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

Configurare link link buton Divi

Schimbați alinierea

Schimbați și alinierea modulului.

  • Alinierea butoanelor: stânga
Aliniere buton Divi

Modificați setările butonului

De asemenea, modificați setările butoanelor.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

  • Culoarea textului butonului: #ffffff
  • Culoarea fundalului butonului: # ef6f49 (implicit), # e06945 (cursor)
Personalizare culoare buton

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%
Transformarea butonului Divi

3. Salvați modificările din generatorul de teme și rezultatul previzualizării

După ce antetul global este finalizat, salvați orice modificări în generatorul de temă și postați rezultatul pe site-ul dvs. web!

Salvați modificările
Configurarea capului divi

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.

Rezultatul demo final

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 principal, celălalt este secundar. Adăugarea de butoane la antetul dvs. general vă ajută să evidențiați unele dintre cele mai importante CTA-uri ale site-ului dvs. De asemenea, puteți 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.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
1 acțiuni
acțiune1
tweet
Registru