Divi: Hur man lägger till ett kontaktformulär i en global rubrik

Behöver lägga till en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP till en global header?

När du skapar en anpassad rubrik för din webbplats Med hjälp av Divi Theme Builder letar du efter det perfekta sättet att lägga till en CTA (Call to Action). Ett sätt att göra detta är att lägga till en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP rullning. 

Detta hjälper dig att hålla det övergripande utseendet på din header ren samtidigt som du får möjlighet att komma in i den kontakta utan att behöva scrolla. 

I den här handledningen kommer vi att visa dig hur du skapar en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP rullningsbar med Divi och JQuery & CSS-kod.

Låt oss börja!

undersökningen

Innan vi dyker in i den här handledningen, låt oss ta en titt på en förhandsvisning av resultatet vi kommer att få.

Skapa en global rubrik

Gå till Theme Builder

Gå till Theme Builder från Divi-menyn som finns i din WordPress-instrumentpanel och klicka på "Lägg till en global rubrik".

Välj "Skapa global rubrik".

Skapa en rubrikstil

Avsnitt inställningar

Bakgrundsfärg

Väl i mallredigeraren kommer du att märka ett avsnitt. Öppna det här avsnittet och ändra bakgrundsfärgen.

• Bakgrund: #FFFFFF

avstånd

Ta sedan bort de förinställda övre och nedre inre marginalerna från avsnittet.

• Innermarginal Vertex: 0px
• Nedre intern marginal: 0px

Skugga låda

Applicera även en subtil boxskugga.

• Box Shadow Blue Styrka: 50px
• Textningstypsnittsfärg: rgba(0,0,0,0.15)

Lägg till en ny rad

Strukturen av kolonnen

Lägg till en ny rad i avsnittet med följande kolumnstruktur:

dimensionering

Utan att lägga till några moduler öppnar du radinställningarna och ändrar storleksinställningarna enligt följande:

• Använd anpassad rännbredd: Ja
• Kolumnavstånd: 1
• Harmonisera kolumnhöjder: Ja
• Maximal bredd: 95%
• Maximal bredd: 100%

avstånd

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

• Maximal inre marginal: 1vw
• Nedre inre marginal: 1vw

huvudelement

Justera allt kolumninnehåll genom att lägga till en enda rad med CSS-kod till huvudradelementet.

align-items: center;

Z-subscript för kolumn 2

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

• Z-index: 12

Lägg till 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.

uppriktning

Ändra sedan modulens inriktning.

• Bildjustering: Centrerad

dimensionering

Ändra också bredden.

• Maximal bredd: 3vw (dator), 5vw (surfplatta), 7vw (telefon)

Lägg till menymodul i kolumn 2

Välj Meny

I den andra kolumnen kommer vi att lägga till en menymodul.

Disposition

Växla till fliken Modulstil och ändra layoutstilen.

• Stilar: Centrerad

Inställningar för menytekst

Ändra sedan textinställningarna i modulmenyn.

• Teckensnittsmeny: Öppna Ingen
• Dimljusmeny: halvfet
• Menytextfärg: #000000
• Menytextstorlek: 0,8 vw (dator), 2 vw (surfplatta), 3 vw (telefon)
• Menybokstavsavstånd: 1px

Textinställningar i rullgardinsmenyn

Ändra sedan linjefärgen från rullgardinsmenyn.

• Färg på rullgardinsmenyn: #007dff

ikoner

Ändra färg på hamburgermenyns ikon.

• Hamburgermenyikonens färg: #007dff

Lägg till textmodul i kolumn 3

Lägg till meddelande

Till den tredje modulen! Lägg till en textmodul med ett valfritt meddelande.

Bakgrundsfärg

Lägg till en bakgrundsfärg.

• Bakgrundsfärg: #007dff

Textinställningar

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

• Textfont: Öppna Sans
• Mjukt ljus text: fet
• Textfärg Text: #ffffff
• Text Textstorlek: 0,8 vw (dator), 2 vw (surfplatta), 3 vw (telefon)
• Textjustering: Centrerad

dimensionering

Ändra sedan modulens storlek på parametrarna.

• Maximal bredd: 33%
• Modulinriktning: Center

avstånd

Lägg sedan till anpassade topp- och bottenstoppningar.

• Topp intern marginal: 0,8 vw (dator), 2 vw (surfplatta och telefon)
• Intern marginal låg: 0,8 vw (dator), 2 vw (surfplatta och telefon)

gräns

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

• Rundad rektangel: 100px

Lägg till ytterligare en textmodul i kolumn 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 pilsymbol i innehållsområdet: '▼'.

Textinställningar

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

• Textfont: Öppna Sans
• Textfärg: #007fff
• Text Textstorlek: 3vw
• Textradshöjd: 0em
• Textjustering: Centrerad

Z-index

Låt oss också öka modulens z-index.

• Z-index: 11

Lägg till kontaktformulärmodulen i kolumn 3

Lägg till fält i full bredd som du väljer

Nästa och sista modul vi behöver i den tredje kolumnen är en kontaktformulärmodul. Lägg till alla fält i full bredd du behöver.

Lägg till en titel

Använd också en titel.

Bakgrundsfärg

Låt oss sedan ändra bakgrundsfärgen.

• Bakgrundsfärg: #e7f2ff

Fältinställningar

Låt oss gå till modulens Style-flik och ändra fältinställningarna.

• Bakgrundsfärgfält: #ffffff
• Fälttextfärg: #dddddd
• Fokustextfärg: #007dff
• Vertex Padding Fields: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
• Nedre stoppningsfält: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
• Teckensnittsfält: Öppna Inga

• Fält Textstorlek: 0,7 vw (dator), 1,8 vw (surfplatta), 3 vw (telefon)

Titeltextinställningar

Redigera inställningarna för titeltext.

• Infoga rubrik tre: H3
• Mjukt ljus Titel: Fet text
• Textjustering: centrerad
• Titeltextfärg: #007dff
• Titel Textstorlek: 1 vw (dator), 2,5 vw (surfplatta), 3,5 vw (telefon)
• Titelradshöjd: 1,6 em

Captcha textinställningar

Med captcha textinställningar.

• Font Captcha: Öppna Sans
• Captcha-textfärg: #007dff

Knappinställningar

Fortsätt genom att anpassa knappen.

• Använd anpassade stilar för Knapp: Ja
• Knapptextstorlek: 0,8 vw (dator), 2 vw (surfplatta), 3 vw (telefon)
• Knappens textfärg: #ffffff
• Bakgrundsknapp: #007dff
• Kantbreddsknapp: 0 pixlar
• Knappkantradie: 100 px

• Teckensnittsknapp: Öppna Ingen
• Knapp för mjukt ljus: fet text

• Knappmarginal: 1vw
• Toppstoppningsknapp: 1vw (dator), 2vw (surfplatta och telefon)
• Nedre stoppningsknapp: 1vw (dator), 2vw (surfplatta och telefon)
• Vänster Pad-knapp: 2vw (dator), 7vw (surfplatta och telefon)
• Höger Pad-knapp: 2vw (dator), 7vw (surfplatta och telefon)

avstånd

Använd anpassade utfyllnadsvärden på olika skärmstorlekar.

• Maximal intern takhöjd: 4vw (dator), 6vw (surfplatta och telefon)
• Intern marginal Botten: 4vw (dator), 6vw (surfplatta och telefon)
• Vänster innermarginal: 2vw (dator), 6vw (surfplatta och telefon)
• Höger intern marginal: 2vw (dator), 6vw (surfplatta och telefon)

gräns

Ändra sedan gränsinställningarna.

• Ingång avrundad rektangel: 10px

Huvudelement, kontakttitel och Captcha CSS

Slutför modulinställningarna genom att lägga till några små CSS-ändringar på fliken Avancerat.

Huvudelement:

01	border-radius: 20px;

Titel på kontakta :

01	margin-bottom: 1vw;

Captcha:

01	margin-top: 1.5vw;

Anpassa element för att skapa ett kontaktformulär med ett klick

Lägg till höjden på kolumn 3

När du har alla moduler på plats är det dags att skapa effekten. Det första steget mot att få det önskade resultatet är att öppna de tre kolumninställningarna och lägga till en anpassad responsiv höjd på den avancerade fliken.

Skrivbord:

01	height: 3vw;

tablett:

01	height: 5vw;

Ring upp:

01	height: 6vw;

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

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

• CSS-klass: visa-kontakta

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

Vi kommer också att behöva en anpassad CSS-klass för kontaktformulärmodulen.

• CSS-klass: kontaktformulär-modul

Dölj kontaktformulärmodulen

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

01	display: none;

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

Och för att skapa klickfunktionen behöver vi JQuery-kod. Vi kommer även 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;

}

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på resultatet.

Slutsats

I den här artikeln visade vi dig hur du lägger till ett kontaktformulär i rullgardinsmenyn i din anpassade rubrik.

Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.