Divi: Sådan tilføjer du en kontaktformular til en global header

Skal tilføje en Kontaktformular til en global header?

Når du opretter en brugerdefineret header til din Websted Ved at bruge Divi Theme Builder, finder du dig selv på udkig efter den perfekte måde at tilføje en CTA (Call to Action). En måde at gøre dette på er at tilføje en Kontaktformular rulle. 

Dette vil hjælpe dig med at holde det overordnede udseende af dit header rent og samtidig give dig muligheden for at komme ind kontakt uden at skulle scrolle. 

I denne vejledning viser vi dig, hvordan du opretter en Kontaktformular kan rulles ved hjælp af Divi og JQuery & CSS-kode.

Lad os starte!

undersøgelse

Før vi dykker ned i denne tutorial, lad os tage et kig på en forhåndsvisning af det resultat, vi får.

Opret en global overskrift

Gå til Theme Builder

Gå til Theme Builder fra Divi-menuen i dit WordPress-dashboard, og klik på "Tilføj en global header".

Vælg 'Opret global overskrift'.

Opret en header-stil

Sektionsindstillinger

Baggrundsfarve

Når du først er i skabeloneditoren, vil du bemærke en sektion. Åbn denne sektion og skift baggrundsfarven.

• Baggrund: #FFFFFF

afstand

Fjern derefter standard top- og bundmargener fra sektionen.

• Indre margin toppunkt: 0px
• Bund intern margin: 0px

Skyggeæske

Påfør også en subtil boksskygge.

• Box Shadow Blue Styrke: 50px
• Undertekstskriftfarve: rgba(0,0,0,0.15)

Tilføj en ny linje

Struktur af søjlen

Tilføj en ny række til sektionen ved hjælp af følgende kolonnestruktur:

dimensionering

Uden at tilføje nogen moduler skal du åbne rækkeindstillingerne og ændre størrelsesindstillingerne som følger:

• Brug tilpasset tagrendebredde: Ja
• Kolonneafstand: 1
• Harmoniser søjlehøjder: Ja
• Maksimal bredde: 95%
• Maksimal bredde: 100%

afstand

Tilføj derefter brugerdefineret øverste og nederste polstring.

• Peak indre margin: 1vw
• Bund indvendig margin: 1vw

hovedelement

Juster alt kolonneindhold ved at tilføje en enkelt linje CSS-kode til hovedrækkeelementet.

align-items: center;

Z-underskrift af kolonne 2

Vi sørger også for, at den anden kolonne har en højere z-indeksværdi for responsivt design.

• Z-indeks: 12

Tilføj billedmodul til kolonne 1

Download logo

Det er tid til at begynde at tilføje moduler! Start med et billedmodul i kolonne 1. Upload et logo.

tilpasning

Skift derefter justeringen af ​​modulet.

• Billedjustering: Centreret

dimensionering

Skift også bredden.

• Maksimal bredde: 3vw (desktop), 5vw (tablet), 7vw (telefon)

Tilføj menumodul til kolonne 2

Vælg Menu

I den anden kolonne tilføjer vi et menumodul.

Disposition

Skift til fanen Modulstil og skift layoutstilen.

• Stilarter: Centreret

Menu tekstindstillinger

Skift derefter tekstindstillingerne i modulmenuen.

• Skrifttypemenu: Åbn Ingen
• Menu for dæmpet lys: halvfed
• Menutekstfarve: #000000
• Menutekststørrelse: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefon)
• Menubogstavafstand: 1px

Tekstindstillinger i rullemenuen

Skift derefter linjefarven fra rullemenuen.

• Farve på rullemenuens linje: #007dff

ikoner

Skift farve på hamburgermenuikonet.

• Hamburger menu ikon farve: #007dff

Tilføj tekstmodul til kolonne 3

Tilføj besked

Videre til det tredje modul! Tilføj et tekstmodul med en besked efter eget valg.

Baggrundsfarve

Tilføj en baggrundsfarve.

• Baggrundsfarve: #007dff

Tekstindstillinger

Skift til fanen moduldesign, og rediger tekstindstillingerne i overensstemmelse hermed:

• Tekstskrifttype: Åbn Sans
• Blødt lys tekst: Fed
• Tekstfarve Tekst: #ffffff
• Tekst Tekststørrelse: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefon)
• Tekstjustering: Centreret

dimensionering

Rediger derefter modulets størrelsesparametre.

• Maksimal bredde: 33%
• Moduljustering: Center

afstand

Tilføj derefter brugerdefinerede top- og bundpolstringer.

• Top intern margin: 0,8 vw (desktop), 2 vw (tablet og telefon)
• Intern margin lav: 0,8 vw (desktop), 2 vw (tablet og telefon)

grænse

Og fuldfør modulparametrene ved at tilføje en grænseradius.

• Afrundet rektangel: 100px

Tilføj endnu et tekstmodul til kolonne 3

Føj et symbol til indholdsområdet

Lad os gå videre til næste modul, som er endnu et tekstmodul. Tilføj følgende pilesymbol i indholdsområdet: '▼'.

Tekstindstillinger

Skift til fanen moduldesign, og rediger tekstindstillingerne i overensstemmelse hermed:

• Tekstskrifttype: Åbn Sans
• Tekstfarve: #007fff
• Tekst Tekststørrelse: 3vw
• Tekstlinjehøjde: 0em
• Tekstjustering: Centreret

Z-indeks

Lad os også øge modulets z-indeks.

• Z-indeks: 11

Tilføj kontaktformularmodul til kolonne 3

Tilføj felter i fuld bredde efter eget valg

Det næste og sidste modul, vi skal bruge i tredje kolonne, er et kontaktformularmodul. Tilføj alle felter i fuld bredde, du har brug for.

Tilføj en titel

Brug også en titel.

Baggrundsfarve

Lad os derefter ændre baggrundsfarven.

• Baggrundsfarve: #e7f2ff

Feltindstillinger

Lad os gå til modulets Style-fane og ændre feltindstillingerne.

• Baggrundsfarvefelter: #ffffff
• Felttekstfarve: #dddddd
• Fokus tekstfarve: #007dff
• Vertex polstringsfelter: 1vw (desktop), 2vw (tablet), 3vw (telefon)
• Bundpolstringsfelter: 1vw (desktop), 2vw (tablet), 3vw (telefon)
• Skrifttypefelter: Åbn Ingen

• Felter Tekststørrelse: 0,7 vw (desktop), 1,8 vw (tablet), 3 vw (telefon)

Titeltekstindstillinger

Rediger titeltekstindstillingerne.

• Indsæt overskrift tre: H3
• Soft Light Titel: Fed tekst
• Tekstjustering: centreret
• Titeltekstfarve: #007dff
• Titel Tekststørrelse: 1 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefon)
• Titellinjehøjde: 1,6 em

Captcha-tekstindstillinger

Med captcha-tekstindstillinger.

• Font Captcha: Åbn Sans
• Captcha tekstfarve: #007dff

Knapindstillinger

Fortsæt ved at tilpasse knappen.

• Brug brugerdefinerede stilarter til knap: Ja
• Knaptekststørrelse: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefon)
• Knaptekstfarve: #ffffff
• Baggrundsknap: #007dff
• Knap til kantbredde: 0 pixels
• Knapkantradius: 100 px

• Font-knap: Åbn Ingen
• Blødt lys-knap: Fed tekst

• Knapmargin: 1vw
• Top polstringsknap: 1vw (desktop), 2vw (tablet og telefon)
• Bundpolstringsknap: 1vw (desktop), 2vw (tablet og telefon)
• Venstre pudeknap: 2vw (desktop), 7vw (tablet og telefon)
• Højre pudeknap: 2vw (desktop), 7vw (tablet og telefon)

afstand

Brug tilpassede polstringsværdier på forskellige skærmstørrelser.

• Maksimal intern frihøjde: 4vw (desktop), 6vw (tablet og telefon)
• Intern margin bund: 4vw (desktop), 6vw (tablet og telefon)
• Venstre indre margen: 2vw (desktop), 6vw (tablet og telefon)
• Højre intern margen: 2vw (desktop), 6vw (tablet og telefon)

grænse

Skift derefter grænseindstillingerne.

• Input afrundet rektangel: 10px

Hovedelement, kontakttitel og Captcha CSS

Fuldfør modulindstillingerne ved at tilføje nogle små CSS-ændringer til den avancerede fane.

Hovedelement:

01	border-radius: 20px;

Titel på kontakt :

01	margin-bottom: 1vw;

Captcha:

01	margin-top: 1.5vw;

Tilpas elementer for at oprette en kontaktformular med et enkelt klik

Tilføj højden på søjle 3

Når du har alle modulerne på plads, er det tid til at skabe effekten. Det første skridt i retning af at få det ønskede resultat er at åbne de 3 kolonneindstillinger og tilføje en brugerdefineret responsiv højde i den avancerede fane.

Skrivebord:

01	height: 3vw;

tablet:

01	height: 5vw;

Telefon:

01	height: 6vw;

Føj en CSS-klasse til knappen og pilen

Dernæst tilføjer vi den samme CSS-klasse til de første to tekstmoduler i kolonne 3.

• CSS klasse: vis-kontakt

Føj en CSS-klasse til kontaktformularen

Vi skal også bruge en tilpasset CSS-klasse til kontaktformularmodulet.

• CSS-klasse: kontaktformular-modul

Skjul kontaktformularmodul

Fortsæt ved at tilføje en ekstra linje med CSS-kode til hovedelementet i kontaktformularmodulet. Dette giver os mulighed for at skjule modulet, før vi klikker.

01	display: none;

Tilføj kodemodul til kolonne 3 med JQuery og CSS-kode

Og for at oprette klikfunktionen skal vi bruge JQuery-kode. Vi vil også bruge tilpasset CSS-kode. Tilføj et nyt kodemodul til kolonne 2 med koden. Sørg for at placere JQuery-kode mellem script-tags og CSS-kode mellem stiltags.

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øgelse

Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på resultatet.

Konklusion

I denne artikel viste vi dig, hvordan du tilføjer en drop-down kontaktformular til din tilpassede overskrift.

Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.