Når du opretter en brugerdefineret header til din Websted, ved at bruge Divis temabygger, vil du finde dig selv på udkig efter den perfekte måde at tilføje en AAL (opfordring til handling). 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, samtidig med at det giver mulighed for at komme ind kontakt med dig, uden at skulle scrolle ned. I denne vejledning viser vi dig, hvordan du opretter en Kontaktformular drop-down ved hjælp af Divi og JQuery & CSS-kode. Du vil også være i stand til at downloade JSON-filen gratis!
Lad os gå.
undersøgelse
Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.
1. Gå til Divi Theme Builder og start med at oprette en global header
Gå til Divi Theme Builder
Start med at gå til Divi Theme Builder i backend på dit WordPress-sted.
Opret en global overskrift
Klik på "Tilføj global overskrift" og vælg "Opret global overskrift" for at begynde at oprette en brugerdefineret global overskrift.
2. Byg headerdesignet
Sektionsindstillinger
Baggrundsfarve
Når du er inde i den overordnede overskriftsskabelon, vil du bemærke et afsnit. Åbn dette afsnit, og brug en hvid baggrundsfarve.
- Baggrundsfarve: #FFFFFF
afstand
Fjern derefter standard øvre og nedre polstring fra sektionen.
- Øvre polstring: 0px
- Bundpolstring: 0px
Skyggeæske
Påfør også en subtil boksskygge.
- Box Shadow Blurstyrke: 50px
- Skygge farve: rgba (0,0,0,0,15)
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje flere moduler skal du åbne linjeparametrene og ændre størrelsesparametrene som følger:
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Udligne kolonnehøjder: Ja
- Bredde: 95%
- Maks bredde: 100%
afstand
Tilføj derefter brugerdefineret øverste og nederste polstring.
- Øvre polstring: 1vw
- Bundpolstring: 1vw
Hovedelement
Og juster alt kolonnens indhold ved at tilføje en enkelt linje CSS-kode til hovedelementet i rækken.
align-items: center;
Kolonne 2 Z-indeks
Vi sørger også for, at den anden kolonne har en højere z-indeksværdi til reaktive formål.
- Z-indeks: 12
Føj et 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: center
dimensionering
Skift også bredden.
- Bredde: 3vw (desktop), 5vw (tablet), 7vw (telefon)
Føj et menumodul til kolonne 2
Vælg menuen
I den anden kolonne tilføjer vi et menu-modul.
Disposition
Skift til moduldesignfanen, og skift layoutstil.
- Stil: Centreret
Menu tekstindstillinger
Skift derefter tekstindstillingerne i modulmenuen.
- Menustype: Åben uden
- Menu fontvægt: Semi-fed
- Menutekstfarve: # 000000
- Menustekststørrelse: 0.8vw (desktop), 2vw (tablet), 3vw (telefon)
- Menubrev mellemrum: 1x
Indstillinger i rullemenuen
Skift derefter farven på linjen i rullemenuen.
- Farve på linjen i rullemenuen: # 007dff
ikoner
Med hamburger menu ikon farve.
- Hamburger-menuikonfarve: # 007dff
Tilføj tekstmodul 1 til kolonnen 3
Tilføj en kopi
Lad os gå videre til det tredje modul! Tilføj et tekstmodul med en kopi efter eget valg.
Baggrundsfarve
Tilføj derefter en baggrundsfarve.
- Baggrundsfarve: # 007dff
Tekstindstillinger
Skift til moduldesignfanen og rediger tekstindstillingerne i overensstemmelse hermed:
- Tekst font: Open Sans
- Skrifttypens vægt: fed skrift
- Tekstfarve: #ffffff
- Tekststørrelse: 0.8vw (desktop), 2vw (tablet), 3vw (telefon)
- Justering af teksten: center
dimensionering
Rediger derefter modulets størrelsesparametre.
- Bredde: 33%
- Justering af modulet: center
afstand
Tilføj derefter brugerdefineret øverste og nederste polstring.
- Øvre polstring: 0.8vw (desktop), 2vw (tablet og telefon)
- Bundpolstring: 0.8vw (skrivebord), 2vw (tablet og telefon)
Border
Og fuldfør modulparametrene ved at tilføje en grænseradius.
- Alle hjørner: 100px
Tilføj tekstmodul 2 til kolonnen 3
Føj et symbol til indholdsområdet
Lad os gå videre til det næste modul, som er et andet tekstmodul. Tilføj følgende pil i indholdsområdet: "▼".
Tekstindstillinger
Skift til moduldesignfanen og rediger tekstindstillingerne i overensstemmelse hermed:
- Tekst font: Open Sans
- Tekstfarve: # 007fff
- Tekststørrelse: 3vw
- Højde på tekstlinjen: 0em
- Justering af teksten: center
Z-indeks
Vi øger også z-indekset for modulet.
- Z-indeks: 11
Føj kontaktformularmodulet til kolonne 3
Du kan nu tilføje en Kontaktformular lige i bunden af tekstmodulet, som indeholder pilen. Dette modul er ret simpelt at bruge, så du bliver nødt til at tilpasse, hvilke felter du vil gøre synlige.
3. Tilpas elementerne til at oprette en kontaktformular med et enkelt klik
Tilføj højden på søjle 3
Når alle mods er på plads, er det tid til at skabe effekten. Det første skridt mod at opnå det ønskede resultat er at åbne indstillingerne i kolonne 3 og tilføje responsiv brugerdefineret højde i fanen avanceret.
Office:
height: 3vw;
tablet:
height: 5vw;
Telefon:
height: 6vw;
Føj en CSS-klasse til knappen og pilen
Så tilføjer vi den samme CSS-klasse til de to første tekstmoduler i kolonne 3.
- CSS klasse: vis-kontakt
Føj en CSS-klasse til kontaktformularen
Vi har også brug for en tilpasset CSS-klasse til kontaktformularmodulet.
- CSS klasse: kontakt-form-modul
Skjul modulet Kontaktformular
Fortsæt med 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.
display: none;
Føj et kodemodul til kolonne 3 med JQuery og CSS-kode
Og for at oprette klikfunktionen har vi brug for noget JQuery-kode. Vi bruger også brugerdefineret 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 style-tags.
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å, hvordan det ser ud på forskellige skærmstørrelser.
kontor
Hvad man skal huske
I denne artikel har vi vist dig, hvordan du tilføjer en drop-down kontaktformular til din brugerdefinerede header. Det er en fantastisk måde at udløse handling tidligt på.
