Gå till innehållet

Hur du lägger till två knappar sida vid sida till din globala Divi-rubrik

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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å knappar sida vid sida i din övergripande rubrik med Divis Theme Builder. En av knapparna är primär, den andra sekundär. Du kommer också att kunna ladda ner den globala rubriken JSON-fil gratis!

undersökningen

Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.

office

Juxaposed knapp divi

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

Använda temabyggaren

Skapa en global rubrik

Fortsätt genom att klicka på "Build Global Header".

Huvudkonfiguration

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
Divi space-konfiguration

Z-index

Se också till att öka z-index för avsnittet i synlighetsinställningarna. Detta kommer att säkerställa att det totala rubrikinnehållet visas högst upp på hela sidan och publicerar innehållet.

  • Z-index: 99999
Z-indexkonfiguration

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:

Layoutkonfiguration

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

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)
Divi line-inställningar

Huvudelement

För att centrera allt kolumninnehåll lägger vi till dessa två rader av CSS-kod till radens huvudelement.

display: flex;align-items: center;

Ta bort skrivbordsskärmsegenskaper på surfplatta och mobil

display: block;

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Konfiguration av Divi-linjestil

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
Kolumngränskonfiguration

Z-index

Öka också kolumnens z-index.

  • Z-index: 11
Kolumnkonfiguration avancerade inställningar

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

Konfiguration av kolumnstil 1

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.

Urvalsmenymodul

Ladda ner logotyp

Ladda sedan upp en logotyp.

Divi-logotypkonfiguration

Disposition

Byt till fliken moduldesign och se till att följande layoutinställningar gäller:

  • Stil: vänsterjusterad
  • Riktning på rullgardinsmenyn: ned
Meny layout

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
Divi-menykonfiguration

Listrutan i textmenyn

Ändra också textinställningarna i rullgardinsmenyn.

  • Listrutans bakgrundsfärg: #ffffff
  • Färg på linjen i rullgardinsmenyn: # ef6f49
Konfiguration av rullgardinsmenyn för Divi

ikoner

Ändra sedan färgen på hamburgermenyikonen.

  • Hamburger-menyns ikonfärg: # 000000
Divi-menyikonkonfiguration

dimensionering

Lägg också till en maximal logotypbredd i dimensioneringsparametrarna.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Maximal logobredd: 9vw (skrivbord), 12vw (surfplatta), 15vw (telefon)
Konfiguration av divi-menydimension

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 kod css meny divi

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>

Anpassad CSS-koddelningskolumn

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.

Kopiera divi-knappmodulen

Lägg till en länk

Lägg sedan till en länk till knappmodulen.

Konfiguration av knapplänk

uppriktning

Byt till fliken moduldesign och ändra knappjustering.

  • Knappinställning: Höger
Konfiguration av knappmoduljustering

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
Inställningar för knappen för Divi-stil
  • Knappens radie: 0px
  • Avstånd för knappbokstäver: 2px
  • Knappsnitt: Montserrat
  • Knappsteckens vikt: Halv fet
  • Knappsnittstil: versaler
Anpassa divi-knappstilsort

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)
Inställningar för utrymme för Divi-knapp

Klon-knappmodul

När du har slutfört den första knappmodulen klonar du den.

Divi-modulplats

Redigera länk

Öppna dubblettknappsmodulen och ändra URL.

Konfiguration av länk för Divi-knapp

Ändra inriktning

Ändra också modulens inriktning.

  • Knappinställning: vänster
Divi-knappjustering

Ändra knappinställningar

Ändra också knappinställningarna.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Knapptextfärg: #ffffff
  • Knappens bakgrundsfärg: # ef6f49 (standard), # e06945 (svävar)
Anpassning av knappfärg

Hover transformation skala

Slutför knappinställningarna genom att lägga till en transform-skala-svävareffekt.

  • Höger: 110%
  • Låg: 110%
Transformering av Divi-knapp

3. Spara ändringarna i temageneratorn och förhandsgranskningsresultatet

När din globala rubrik är klar kan du spara ändringar i temageneratorn och publicera resultatet på din webbplats!

Spara ändringar
Huvudkonfigurationsdel

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.

Slutligt demoresultat

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 lade till är primär, den andra är sekundär. Genom att lägga till knappar i din övergripande rubrik kan du markera några av webbplatsens viktigaste uppmaningar. Du kan också ladda ner JSON-filen gratis! Om du har några frågor, lämna gärna en kommentar i kommentarsektionen nedan.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer