Jasni pozivi na akciju na vašim stranicama nužni su za većinu web stranica. A koji je bolji način da skrenete pozornost na neke od svojih najvažnijih CTA-a nego da ih stavite u zaglavlje? 

U današnjem vodiču pokazat ćemo vam kako dodati dva gumba jedan pored drugoga u vaše globalno zaglavlje pomoću alata za izradu gumba. teme iz Divija. Jedan od gumba je primarni, drugi sekundarni. Također ćete moći besplatno preuzeti JSON datoteku globalnog zaglavlja!

pregled

Prije nego što uđemo u tutorial, pogledajmo na brzinu rezultate na različitim veličinama zaslona.

Biro

Juxaposed divi divan

1. Pristupite Divi Builderu tema i stvorite globalno zaglavlje

Idite na Divi Builder tema

Započnite Divi Builder tema i kliknite "Dodaj globalno zaglavlje".

Korištenje graditelja tema

Izradite globalno zaglavlje

Nastavite klikom na "Build Global Header".

Konfiguracija glave

2. Izradite cjelokupni dizajn zaglavlja

Dodajte novi odjeljak

razmak

Kad uđete u uređivač predloška, ​​primijetit ćete odjeljak. Otvorite postavke odjeljka i uklonite sve zadane gornje i donje obloge.

  • Gornja obloga: 0px
  • Donja obloga: 0px
Konfiguracija prostora Divi

Z indeks

Također provjerite jeste li povećali z-index odjeljka u postavkama vidljivosti. Ovo će osigurati da sadržaj globalno zaglavlje pojavit će se na vrhu cijele stranice i objaviti sadržaj.

  • Z indeks: 99999
Konfiguracija Z indeksa

Dodajte novi redak

Struktura stupaca

Nakon što ste dovršili postavke odjeljka, dodajte novi redak odjeljku koristeći sljedeću strukturu stupaca:

Konfiguracija izgleda

dimenzioniranje

Bez dodavanja modula, otvorite parametre retka i pustite da linija zauzme čitavu širinu spremnika odjeljaka.

  • Koristite prilagođenu širinu oluka: Da
  • Širina oluka: 1
  • Izjednačite visine stupaca: Da
  • Širina: 100%
  • Maks. Širina: 100%
Konfiguracija dimenzija

razmak

Također promijenite vrijednosti ispunjavanja lijevo i desno od retka.

  • Lijeva obloga: 2vw (stol), 10vw (tablet i telefon)
  • Desna obloga: 2vw (stol), 10vw (tablet i telefon)
Postavke divizije

Glavni element

Za centriranje svih sadržaj stupaca, dodati ćemo ova dva retka CSS koda glavnom elementu retka.

display: flex;align-items: center;

Uklonite svojstvo prikaza radne površine s tableta i mobitela.

display: block;

Konfiguracija stila Divi linije

Stupac 1

granica

Nastavite otvaranjem postavki u stupcu 1 i dodavanjem desne obrube samo na radnu površinu.

  • Širina desne granice: 1px (radni stol), 0px (tablet i telefon)
  • Boja desne granice: # d8d8d8
Konfiguracija obruba stupca

Z indeks

Također povećajte z indeks stupca.

  • Z indeks: 11
Napredne postavke konfiguracije stupca

Stupac 2

Glavni element

Zatim otvorite postavke za stupac 2 i dodajte sljedeće retke CSS koda glavnom elementu stupca da biste ga pretvorili u dva stupca.

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

Konfiguracija stila stupca 1

Dodajte modul izbornika u stupac 1

Odaberite izbornik

Vrijeme je da počnete dodavati module! Dodajte modul izbornika u stupac 1 i odaberite izbornik po vašem izboru.

Modul izbornika za odabir

Preuzmite logotip

Zatim prenesite logotip.

Konfiguracija logotipa Divi

raspored

Prebacite se na karticu dizajna modula i osigurajte da se primjenjuju sljedeće postavke izgleda:

  • Stil: lijevo poravnano
  • Smjer padajućeg izbornika: dolje
Izgled izbornika

Tekst izbornika

Zatim promijenite postavke teksta izbornika.

  • Boja aktivne veze: # ef6f49
  • Font menija: Montserrat
  • Težina slova u izborniku: Polut podebljano
  • Stil fonta izbornika: velika slova
  • Boja teksta izbornika: # 333333 (zadano), # ef6f49 (zadržavanje pokazivača miša)
  • Veličina teksta izbornika: 0.7vw (desktop), 1.8vw (tablet), 2.5vw (telefon)
  • Razmak slova u izborniku: 1 px
Konfiguracija izbornika Divi

Tekst padajućeg izbornika

Izmijenite i postavke teksta u padajućem izborniku.

  • Boja pozadine padajućeg izbornika: #ffffff
  • Boja linija na padajućem izborniku: # ef6f49
Konfiguracija padajućeg izbornika Divi

ikone

Zatim promijenite boju ikone izbornika hamburgera.

  • Boja ikone izbornika hamburgera: # 000000
Konfiguracija ikone izbornika Divi

dimenzioniranje

Također dodajte maksimalnu širinu logotipa parametrima veličine.

  • Maksimalna širina logotipa: 9vw (stol), 12vw (tablet), 15vw (telefon)
Izbornik dimenzija konfiguracije divi

CSS izbornik logotipa

I dovršite postavke modula dodavanjem retka CSS koda u logotip izbornika na naprednoj kartici.

margin-right: 10vw;

Dodaj kod css izbornika divi

Dodajte kodni modul u stupac 1

Dodajte prilagođeni CSS kôd u modul

Sljedeći i posljednji modul koji nam treba u stupcu 1 je modul koda. Dodajte sljedeće retke CSS koda da biste prilagodili razmak između stavki izbornika:

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

Prilagođeni stupac cvi koda divi

Dodajte prvi modul gumba u stupac 2

Dodajte kopiju

Krenimo na sljedeći modul! Dodajte modul prvog gumba i unesite kopiju po vašem izboru.

Kopirajte modul gumba divi

Dodaj link

Zatim dodajte vezu na modul gumba.

Konfiguracija veze gumba

poravnanje

Prebacite se na karticu dizajna modula i promijenite poravnanje gumba.

  • Poravnavanje gumba: U redu
Konfiguracija poravnanja modula gumba

Postavke gumba

Također stilizirajte gumb.

  • Upotrijebite prilagođene stilove za gumb: Da
  • Veličina teksta gumba: 0.8vw (radna površina), 1.7vw (tablet), 2.5vw (telefon)
  • Boja teksta gumba: # 000000
  • Boja pozadine gumba: # edeef0 (zadano), # d6d7d8 (lebdenje)
  • Širina obruba gumba: 0px
Postavke gumba u stilu Divi
  • Polumjer obruba gumba: 0px
  • Razmak između slova s ​​gumbom: 2 px
  • Font gumba: Montserrat
  • Težina fonta gumba: Polut podebljano
  • Stil fonta gumba: velika slova
Prilagodite font divi gumba

razmak

Dovršite postavke modula dodavanjem prilagođenih vrijednosti obloga na različite veličine zaslona.

  • Gornja obloga: 1vw (radna površina), 2vw (tablet), 3vw (telefon)
  • Donje obloge: 1vw (stol), 2vw (tablet), 3vw (telefon)
  • Lijeva obloga: 2vw (radna površina), 4vw (tablet), 6vw (telefon)
  • Desna obloga: 2vw (stol), 4vw (tablet), 6vw (telefon)
Postavke prostora gumba Divi

Modul gumba za kloniranje

Nakon što ste dovršili prvi modul gumba, klonirajte ga.

Utor za modul Divi

Uredi vezu

Otvorite modul duplikata gumba i promijenite URL.

Konfiguracija veze gumba Divi

Promijeni poravnanje

Također promijenite poravnanje modula.

  • Poravnavanje gumba: lijevo
Poravnanje gumba Divi

Promjena postavki gumba

Izmijenite i postavke gumba.

  • Boja teksta gumba: #ffffff
  • Boja pozadine gumba: # ef6f49 (zadano), # e06945 (lebdenje)
Prilagođavanje boje gumba

Lebdenje skale transformacije

Dovršite postavke gumba dodavanjem efekta premještanja pokazivača na skali.

  • Desno: 110%
  • Niska: 110%
Transformacija gumba Divi

3. Spremite promjene u generatoru tema i rezultat pregleda

Nakon što je vaše globalno zaglavlje dovršeno, spremite sve promjene napravljene u alatu za izradu tema i pogledajte rezultat na svom web stranica!

Spremi izmjene
Divizija konfiguracije glave

pregled

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Konačni demo rezultat

Završne misli

U ovom uputstvu pokazali smo vam kako dodati dva gumba jedan pored drugog u vaše ukupno zaglavlje pomoću Divijevog graditelja tema. 

Jedan od gumba koje smo dodali je primarni, drugi je sekundarni. Dodavanje gumba u vaše cjelokupno zaglavlje pomaže vam da istaknete neke od najvažnijih CTA-ova u svom web stranica. Također ste mogli besplatno preuzeti JSON datoteku! Ako imate pitanja, slobodno ostavite komentar u odjeljku za komentare ispod.