När du skapar en anpassad rubrik för din webbplats, med hjälp av Divis temabyggare, kommer du att leta efter det perfekta sättet att lägga till en AAL (uppmaning). Ett sätt att göra detta är att lägga till en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP rullning. Detta kommer att hjälpa dig att hålla det övergripande utseendet på din header ren samtidigt som det ger möjlighet att komma in kontakta med dig, utan att behöva scrolla ner. I den här handledningen kommer vi att visa dig hur du skapar en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP rullgardinsmenyn med Divi och JQuery & CSS-kod. Du kommer också att kunna ladda ner JSON-filen gratis!

Låt oss gå.

undersökningen

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

Listrutan Divi

1. Gå till Divi Theme Builder och börja skapa en global rubrik

Gå till Divi Theme Builder

Börja med att gå till Divi Theme Builder i backend på din WordPress-webbplats.

Global divi-rubrik

Skapa en global rubrik

Klicka på "Lägg till global rubrik" och välj "Skapa global rubrik" för att börja skapa en anpassad global rubrik.

Skapa global divi-rubrik

2. Bygg huvudet design

Avsnitt inställningar

Bakgrundsfärg

Väl inne i den övergripande rubrikmallen kommer du att märka ett avsnitt. Öppna detta avsnitt och använd en vit bakgrundsfärg.

  • Bakgrundsfärg: #FFFFFF
Bakgrundsjustering

avstånd

Ta sedan bort den övre och nedre stoppningen från avsnittet.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
Vadderingskonfiguration

Skugga låda

Applicera också en subtil lådeskärm.

  • Box Shadow suddighetsstyrka: 50px
  • Skuggfärg: rgba (0,0,0,0,15)
Divi-skuggkonfiguration

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:

Välj en layout

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och modifierar dimensioneringsparametrarna enligt följande:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja
  • Bredd: 95%
  • Max bredd: 100%
Konfigurera måttlinjedimension

avstånd

Lägg sedan till anpassad övre och nedre stoppning.

  • Övre stoppning: 1vw
  • Botten stoppning: 1vw
Konfiguration av sektionsavstånd

Huvudelement

Och justera allt kolumninnehåll genom att lägga till en enda rad CSS-kod till radens huvudelement.

align-items: center;

Anpassad CSS

Kolumn 2 Z-index

Vi ser också till att den andra kolumnen har ett högre z-indexvärde för reaktiva ändamål.

  • Z-index: 12
Kolumnparameter

Lägg till en bildmodul i kolumn 1

Ladda ner logotyp

Det är dags att börja lägga till moduler! Börja med en bildmodul i kolumn 1. Ladda upp en logotyp.

Bildmodul divi

uppriktning

Ändra sedan modulens inriktning.

  • Bildjustering: mitt
Justeringsbildmodul

dimensionering

Ändra också bredden.

  • Bredd: 3vw (skrivbord), 5vw (surfplatta), 7vw (telefon)
listrutans kontaktformulär

Lägg till en menymodul i kolumn 2

Välj menyn

I den andra kolumnen lägger vi till en menymodul.

Anpassning av divi-menymodulen

Disposition

Byt till fliken moduldesign och ändra layoutstil.

  • Stil: centrerad
Meny modul stil

Inställningar för menytekst

Ändra sedan textinställningarna i modulmenyn.

  • Menyteckensnitt: Öppna utan
  • Menyn typsnitt vikt: Halv fet
  • Färg på menyn: # 000000
  • Menytekststorlek: 0.8vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Menybokstavsavstånd: 1 st
Divi-menytext

Listrutan textinställningar

Ändra sedan färgen på linjen i rullgardinsmenyn.

  • Färg på raden i rullgardinsmenyn: # 007dff
Listrutan Divi

ikoner

Med hamburgarens meny ikonfärg.

  • Hamburgare meny ikon färg: # 007dff
Menyikoner divi

Lägg till textmodulen 1 i kolumnen 3

Lägg till en kopia

Låt oss gå vidare till den tredje modulen! Lägg till en textmodul med en kopia efter eget val.

Kontakta oss divi-modul

Bakgrundsfärg

Lägg sedan till en bakgrundsfärg.

  • Bakgrundsfärg: # 007dff
Divi bakgrund

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

  • Textstilsort: Öppna Sans
  • Textens textvikt: fetstil
  • Textfärg: #ffffff
  • Textstorlek: 0.8vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Justering av texten: centrum
Divi teckensnittsfärg

dimensionering

Ändra sedan modulens storlek på parametrarna.

  • Bredd: 33%
  • Justering av modulen: centrum
Storleksavdelningstextdelning

avstånd

Lägg sedan till anpassad övre och nedre stoppning.

  • Övre stoppning: 0.8vw (skrivbord), 2vw (surfplatta och telefon)
  • Botten stoppning: 0.8vw (skrivbord), 2vw (surfplatta och telefon)
Konfiguration av avstånd för textmodul

gräns

Och slutför modulparametrarna genom att lägga till en gränseradie.

  • Alla hörn: 100px
Textmodulens kantkonfiguration

Lägg till textmodulen 2 i kolumnen 3

Lägg till en symbol i innehållsområdet

Låt oss gå vidare till nästa modul, som är en annan textmodul. Lägg till följande pil i innehållsområdet: "▼".

Divi fleche textmodul

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

  • Textstilsort: Öppna Sans
  • Textfärg: # 007fff
  • Textstorlek: 3vw
  • Höjd på textrad: 0em
  • Justering av texten: centrum
Textmodul för teckensnittsdelning

Z-index

Vi ökar också z-index för modulen.

  • Z-index: 11
Divi-textmodulposition

Lägg till kontaktformulärmodulen i kolumn 3

Du kan nu lägga till en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP precis längst ner i textmodulen som innehåller pilen. Denna modul är ganska enkel att använda, så du måste anpassa vilka fält du vill göra synliga.

Kontaktformulärsmodul

3. Anpassa elementen för att skapa ett kontaktformulär med ett klick

Lägg till höjden på kolumn 3

När alla mods är på plats är det dags att skapa effekten. Det första steget mot att uppnå önskat resultat är att öppna inställningarna i kolumn 3 och lägga till responsiv anpassad höjd på den avancerade fliken.

Office:

height: 3vw;

tablett:

height: 5vw;

Telefon:

height: 6vw;

Kontaktformulär för kontaktblad

Lägg till en CSS-klass till knappen och pilen

Sedan lägger vi till samma CSS-klass till de två första textmodulerna i kolumn 3.

Lägg till avsnittet Visa kontakt

Lägg till en CSS-klass i kontaktformuläret

Vi behöver också en anpassad CSS-klass för modulen Kontaktformulär.

Lägg till en klass i divi-formuläret

Dölj kontaktformulärmodulen

Fortsätt genom att lägga till en extra rad CSS-kod till huvudelementet i modulen Kontaktformulär. Detta gör att vi kan dölja modulen innan vi klickar.

display: none;

Style CSS-modul divi

Lägg till en kodmodul i kolumn 3 med JQuery och CSS-kod

Och för att skapa klickfunktionen behöver vi lite JQuery-kod. Vi kommer också att använda anpassad CSS-kod. Lägg till en ny kodmodul i kolumn 2 med koden. Se till att placera JQuery-kod mellan skripttaggar och CSS-kod mellan stiltaggar.

jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});

.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}

Lägg till JavaScript-kod

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.

office

Design exempel

Vad man ska komma ihåg

I den här artikeln har vi visat dig hur du lägger till ett nedrullningsbart kontaktformulär i din anpassade rubrik. Det är ett bra sätt att utlösa åtgärder tidigt.