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
1. Pristupite Divi Builderu tema i stvorite globalno zaglavlje
Idite na Divi Builder tema
Započnite Divi Builder tema i kliknite "Dodaj globalno zaglavlje".
Izradite globalno zaglavlje
Nastavite klikom na "Build Global Header".
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
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
Dodajte novi redak
Struktura stupaca
Nakon što ste dovršili postavke odjeljka, dodajte novi redak odjeljku koristeći sljedeću strukturu stupaca:
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%
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)
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;
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
Z indeks
Također povećajte z indeks stupca.
- Z indeks: 11
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%;
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.
Preuzmite logotip
Zatim prenesite logotip.
raspored
Prebacite se na karticu dizajna modula i osigurajte da se primjenjuju sljedeće postavke izgleda:
- Stil: lijevo poravnano
- Smjer padajućeg izbornika: dolje
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
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
ikone
Zatim promijenite boju ikone izbornika hamburgera.
- Boja ikone izbornika hamburgera: # 000000
dimenzioniranje
Također dodajte maksimalnu širinu logotipa parametrima veličine.
- Maksimalna širina logotipa: 9vw (stol), 12vw (tablet), 15vw (telefon)
CSS izbornik logotipa
I dovršite postavke modula dodavanjem retka CSS koda u logotip izbornika na naprednoj kartici.
margin-right: 10vw;
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>
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.
Dodaj link
Zatim dodajte vezu na modul gumba.
poravnanje
Prebacite se na karticu dizajna modula i promijenite poravnanje gumba.
- Poravnavanje gumba: U redu
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
- 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
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)
Modul gumba za kloniranje
Nakon što ste dovršili prvi modul gumba, klonirajte ga.
Uredi vezu
Otvorite modul duplikata gumba i promijenite URL.
Promijeni poravnanje
Također promijenite poravnanje modula.
- Poravnavanje gumba: lijevo
Promjena postavki gumba
Izmijenite i postavke gumba.
- Boja teksta gumba: #ffffff
- Boja pozadine gumba: # ef6f49 (zadano), # e06945 (lebdenje)
Lebdenje skale transformacije
Dovršite postavke gumba dodavanjem efekta premještanja pokazivača na skali.
- Desno: 110%
- Niska: 110%
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!
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
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.