Att ha tydliga uppmaningar till dina sidor är en nödvändighet för de flesta webbplatser. Och vilket bättre sätt att uppmärksamma några av dina viktigaste uppmaningar än genom att placera dem i din rubrik?
I dagens handledning visar vi dig hur du lägger till två sida vid sida-knappar till din globala rubrik med hjälp av Button Builder. teman från Divi. En av knapparna är primär, den andra sekundär. Du kommer också att kunna ladda ner den globala header-JSON-filen gratis!
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
office
1. Öppna Divi Theme Builder och skapa en global rubrik
Gå till Divi Theme Builder
Börja med att gå till Divi Theme Builder och klicka på "Lägg till en global rubrik".
Skapa en global rubrik
Fortsätt genom att klicka på "Build Global Header".
2. Bygg en övergripande sidhuvuddesign
Lägg till en ny sektion
avstånd
Väl inne i mallredigeraren kommer du att märka ett avsnitt. Öppna sektionsinställningar och ta bort all standard topp och botten stoppning.
- Övre stoppning: 0px
- Botten stoppning: 0px
Z-index
Se också till att öka z-indexet för avsnittet i synlighetsinställningarna. Detta kommer att säkerställa att innehåll global rubrik visas högst upp på hela sidan och postar innehåll.
- Z-index: 99999
Lägg till en ny rad
Kolumnstruktur
När du har slutfört avsnittinställningarna lägger du till en ny rad i avsnittet med följande kolumnstruktur:
dimensionering
Utan att lägga till moduler, öppna linjeparametrarna och låt linjen uppta hela sektionens behållares bredd.
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Utjämna kolumnhöjder: Ja
- Bredd: 100%
- Max bredd: 100%
avstånd
Ändra också fyllningsvärdena till vänster och höger om linjen.
- Vänster stoppning: 2vw (skrivbord), 10vw (surfplatta och telefon)
- Höger stoppning: 2vw (skrivbord), 10vw (surfplatta och telefon)
Huvudelement
Att centrera alla innehåll kolumner kommer vi att lägga till dessa två rader med CSS-kod till huvudelementet i raden.
display: flex;align-items: center;
Ta bort skrivbordsskärmsegenskaper på surfplatta och mobil
display: block;
Kolumn 1
gräns
Fortsätt genom att öppna inställningarna i kolumn 1 och lägg till en höger kant på skrivbordet.
- Höger kantbredd: 1 st (skrivbord), 0 st (surfplatta och telefon)
- Höger kantfärg: # d8d8d8
Z-index
Öka också kolumnens z-index.
- Z-index: 11
Kolumn 2
Huvudelement
Öppna sedan inställningarna för kolumn 2 och lägg till följande rader med CSS-kod i huvudkolumnelementet för att göra det till två kolumner.
display: grid;grid-template-columns: 50% 50%;
Lägg till en menymodul i kolumn 1
Välj menyn
Det är dags att börja lägga till moduler! Lägg till en menymodul i kolumn 1 och välj en meny efter eget val.
Ladda ner logotyp
Ladda sedan upp en logotyp.
Disposition
Byt till fliken moduldesign och se till att följande layoutinställningar gäller:
- Stil: vänsterjusterad
- Riktning på rullgardinsmenyn: ned
Menytekst
Ändra sedan menytekstinställningarna.
- Aktiv länkfärg: # ef6f49
- Menyteckensnitt: Montserrat
- Menyn typsnitt vikt: Halv fet
- Meny typsnitt stil: versaler
- Meny textfärg: # 333333 (standard), # ef6f49 (hover)
- Menytekststorlek: 0.7vw (skrivbord), 1.8vw (surfplatta), 2.5vw (telefon)
- Menybokstavsavstånd: 1 st
Listrutan i textmenyn
Ändra också textinställningarna i rullgardinsmenyn.
- Listrutans bakgrundsfärg: #ffffff
- Färg på linjen i rullgardinsmenyn: # ef6f49
ikoner
Ändra sedan färgen på hamburgermenyikonen.
- Hamburger-menyns ikonfärg: # 000000
dimensionering
Lägg också till en maximal logotypbredd i dimensioneringsparametrarna.
- Maximal logobredd: 9vw (skrivbord), 12vw (surfplatta), 15vw (telefon)
CSS-logotypmeny
Och slutför modulinställningarna genom att lägga till en rad CSS-kod i menylogotypen på den avancerade fliken.
margin-right: 10vw;
Lägg till en kodmodul i 1-kolumnen
Lägg till en anpassad CSS-kod i modulen
Nästa och sista modul vi behöver i kolumn 1 är en kodmodul. Lägg till följande rader med CSS-kod för att anpassa utrymmet mellan menyalternativen:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Lägg till den första knappmodulen i kolumn 2
Lägg till en kopia
Låt oss gå vidare till nästa modul! Lägg till den första knappmodulen och ange en kopia efter eget val.
Lägg till en länk
Lägg sedan till en länk till knappmodulen.
uppriktning
Byt till fliken moduldesign och ändra knappjustering.
- Knappinställning: Höger
Knappinställningar
Style också knappen.
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 0.8vw (skrivbord), 1.7vw (surfplatta), 2.5vw (telefon)
- Knappens textfärg: # 000000
- Knappens bakgrundsfärg: # edeef0 (standard), # d6d7d8 (svävar)
- Knappens bredd: 0px
- Knappens radie: 0px
- Avstånd för knappbokstäver: 2px
- Knappsnitt: Montserrat
- Knappsteckens vikt: Halv fet
- Knappsnittstil: versaler
avstånd
Slutför modulinställningarna genom att lägga till anpassade utfyllnadsvärden på olika skärmstorlekar.
- Övre stoppning: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Botten stoppning: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Vänster stoppning: 2vw (skrivbord), 4vw (surfplatta), 6vw (telefon)
- Höger stoppning: 2vw (skrivbord), 4vw (surfplatta), 6vw (telefon)
Klon-knappmodul
När du har slutfört den första knappmodulen klonar du den.
Redigera länk
Öppna dubblettknappsmodulen och ändra URL.
Ändra inriktning
Ändra också modulens inriktning.
- Knappinställning: vänster
Ändra knappinställningar
Ändra också knappinställningarna.
- Knapptextfärg: #ffffff
- Knappens bakgrundsfärg: # ef6f49 (standard), # e06945 (svävar)
Hover transformation skala
Slutför knappinställningarna genom att lägga till en transform-skala-svävareffekt.
- Höger: 110%
- Låg: 110%
3. Spara ändringarna i temageneratorn och förhandsgranskningsresultatet
När din globala rubrik är klar, spara alla ändringar som gjorts i temabyggaren och se resultatet på din webbplats!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
Avslutande tankar
I denna handledning har vi visat dig hur du lägger till två knappar sida vid sida i din övergripande rubrik med Divis temabyggare.
En av knapparna vi har lagt till är primär, den andra är sekundär. Genom att lägga till knappar i din övergripande rubrik kan du lyfta fram några av de viktigaste CTA:erna i din webbplats. Du kunde också ladda ner JSON-filen gratis! Om du har några frågor, lämna gärna en kommentar i kommentarsfältet nedan.
