Noodzaak om een toe te voegen Contact formulier naar een globale header?
Wanneer u een aangepaste koptekst maakt voor uw Site web Met behulp van de Divi Theme Builder ben je op zoek naar de perfecte manier om een CTA (Call to Action) toe te voegen. Een manier om dit te doen is door een toe te voegen Contact formulier scrollen.
Dit zal u helpen om het algehele uiterlijk van uw koptekst schoon te houden en tegelijkertijd de mogelijkheid te bieden om erin te komen contact zonder te hoeven scrollen.
In deze tutorial laten we zien hoe je een Contact formulier scrollbaar met Divi en JQuery & CSS-code.
Laten we beginnen!
overzicht
Laten we, voordat we in deze tutorial duiken, eens kijken naar een voorbeeld van het resultaat dat we gaan krijgen.
Maak een algemene koptekst
Ga naar Themabouwer
Ga naar Theme Builder vanuit het Divi-menu dat aanwezig is in uw WordPress-dashboard en klik op "Een globale koptekst toevoegen".
Selecteer 'Creëer globale kop'.
Een kopstijl maken
Sectie-instellingen
Achtergrond kleur
Eenmaal in de sjablooneditor ziet u een sectie. Open dit gedeelte en verander de achtergrondkleur.
- Achtergrond: #FFFFFF
tussenruimte
Verwijder vervolgens de standaard binnenmarges boven en onder uit de sectie.
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
Schaduw doos
Breng ook een subtiele doosschaduw aan.
- Box Shadow Blue Sterkte: 50px
- Letterkleur ondertitel: rgba(0,0,0,0.15)
Een nieuwe regel toevoegen
Structuur van de kolom
Voeg een nieuwe rij toe aan de sectie met behulp van de volgende kolomstructuur:
sizing
Zonder modules toe te voegen, opent u de rij-instellingen en wijzigt u de formaatinstellingen als volgt:
- Aangepaste gootbreedte gebruiken: Ja
- Kolomafstand: 1
- Kolomhoogten harmoniseren: Ja
- Maximale breedte: 95%
- Maximale breedte: 100%
tussenruimte
Voeg vervolgens aangepaste bovenste en onderste vulling toe.
- Piek interne marge: 1vw
- Onderste interne marge: 1vw
hoofdelement
Lijn alle kolominhoud uit door een enkele regel CSS-code toe te voegen aan het hoofdrij-element.
align-items: center;
Z-subscript van kolom 2
We zorgen er ook voor dat de tweede kolom een hogere z-indexwaarde heeft voor responsive design.
- Z-index: 12
Voeg afbeeldingsmodule toe aan kolom 1
Logo downloaden
Het is tijd om modules toe te voegen! Beginnend met een Afbeeldingsmodule in kolom 1. Upload een logo.
alignement
Wijzig vervolgens de uitlijning van de module.
- Beelduitlijning: gecentreerd
sizing
Wijzig ook de breedte.
- Maximale breedte: 3vw (desktop), 5vw (tablet), 7vw (telefoon)
Menumodule toevoegen aan kolom 2
Selecteer menu
In de tweede kolom voegen we een menumodule toe.
Aanleg
Schakel over naar het tabblad Modulestijl en wijzig de lay-outstijl.
- Stijlen: Gecentreerd
Menu tekst instellingen
Wijzig vervolgens de tekstinstellingen in het modulemenu.
- Lettertypemenu: Geen openen
- Dimlichtmenu: halfvet
- Kleur menutekst: #000000
- Tekstgrootte menu: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefoon)
- Letterafstand menu: 1px
Instellingen voor tekst in vervolgkeuzelijst
Wijzig vervolgens de lijnkleur in het vervolgkeuzemenu.
- Kleur dropdownmenu: #007dff
pictogrammen
Verander de kleur van het hamburgermenupictogram.
- Kleur hamburgermenupictogram: #007dff
Tekstmodule toevoegen aan kolom 3
Voeg een bericht toe
Op naar de derde module! Voeg een tekstmodule toe met een bericht naar keuze.
Achtergrond kleur
Voeg een achtergrondkleur toe.
- Achtergrondkleur: #007dff
Tekst instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:
- Tekstlettertype: Open Sans
- Tekst zacht licht: vet
- Tekstkleur Tekst: #ffffff
- Tekst Tekstgrootte: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefoon)
- Tekstuitlijning: gecentreerd
sizing
Wijzig vervolgens de parameters voor het modificeren van de module.
- Maximale breedte: 33%
- Module-uitlijning: midden
tussenruimte
Voeg vervolgens aangepaste boven- en ondervullingen toe.
- Bovenste interne marge: 0,8 vw (desktop), 2 vw (tablet en telefoon)
- Interne marge laag: 0,8 vw (desktop), 2 vw (tablet en telefoon)
grens
En voltooi de moduleparameters door een randradius toe te voegen.
- Afgeronde rechthoek: 100px
Voeg nog een tekstmodule toe aan kolom 3
Voeg een symbool toe aan het inhoudsgebied
Laten we verder gaan met de volgende module, een andere tekstmodule. Voeg het volgende pijlsymbool toe in het inhoudsgebied: '▼'.
Tekst instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:
- Tekstlettertype: Open Sans
- Tekstkleur: #007ffff
- Tekst Tekstgrootte: 3vw
- Hoogte tekstregel: 0em
- Tekstuitlijning: gecentreerd
Z-index
Laten we ook de z-index van de module verhogen.
- Z-index: 11
Voeg contactformuliermodule toe aan kolom 3
Voeg velden naar keuze over de volledige breedte toe
De volgende en laatste module die we nodig hebben in de derde kolom is een contactformuliermodule. Voeg alle velden over de volledige breedte toe die u nodig hebt.
Voeg een titel toe
Gebruik ook een titel.
Achtergrond kleur
Laten we vervolgens de achtergrondkleur wijzigen.
- Achtergrondkleur: #e7f2ff
Lokale instellingen
Laten we naar het tabblad Stijl van de module gaan en de veldinstellingen wijzigen.
- Achtergrondkleur velden: #ffffff
- Tekstkleur veld: #dddddd
- Tekstkleur focus: #007dff
- Vertex Padding Fields: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Onderste opvulvelden: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Lettertypevelden: Geen openen
- Velden Tekstgrootte: 0,7 vw (desktop), 1,8 vw (tablet), 3 vw (telefoon)
Instellingen voor titeltekst
Bewerk de instellingen voor de titeltekst.
- Kop drie invoegen: H3
- Titel zacht licht: vetgedrukte tekst
- Tekstuitlijning: gecentreerd
- Titel tekstkleur: #007dff
- Titel Tekstgrootte: 1 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefoon)
- Hoogte titelregel: 1,6 em
Instellingen voor Captcha-tekst
Met captcha-tekstinstellingen.
- Lettertype Captcha: Open Sans
- Captcha-tekstkleur: #007dff
Knop instellingen
Ga verder door de knop aan te passen.
- Gebruik aangepaste stijlen voor Knop: Ja
- Tekstgrootte knop: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefoon)
- Tekstkleur knop: #ffffff
- Achtergrondkleurknop: #007dff
- Randbreedte knop: 0 pixels
- Knoprandstraal: 100 px
- Lettertype-knop: Geen openen
- Soft Light-knop: vetgedrukte tekst
- Knoopmarge: 1vw
- Top Padding Button: 1vw (desktop), 2vw (tablet en telefoon)
- Onderste opvulknop: 1vw (desktop), 2vw (tablet en telefoon)
- Linker Pad-knop: 2vw (desktop), 7vw (tablet en telefoon)
- Rechter Pad-knop: 2vw (desktop), 7vw (tablet en telefoon)
tussenruimte
Gebruik aangepaste opvulwaarden op verschillende schermformaten.
- Piek interne stahoogte: 4vw (desktop), 6vw (tablet en telefoon)
- Interne marge Bodem: 4vw (desktop), 6vw (tablet en telefoon)
- Linker binnenmarge: 2vw (desktop), 6vw (tablet en telefoon)
- Rechter binnenmarge: 2vw (desktop), 6vw (tablet en telefoon)
grens
Wijzig vervolgens de randinstellingen.
- Invoer afgeronde rechthoek: 10px
Hoofdelement, Contacttitel en Captcha CSS
Voltooi de module-instellingen door enkele kleine CSS-wijzigingen toe te voegen aan het tabblad Geavanceerd.
Hoofdelement:
| 01 | border-radius: 20px; |
Titel van contact :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Pas elementen aan om met één klik een contactformulier te maken
Voeg de hoogte van kolom 3 toe
Zodra u alle modules op hun plaats hebt, is het tijd om het effect te creëren. De eerste stap om het gewenste resultaat te krijgen, is door de instellingen van 3 kolommen te openen en een aangepaste responsieve hoogte toe te voegen op het tabblad Geavanceerd.
Bureau :
| 01 | height: 3vw; |
tablet:
| 01 | height: 5vw; |
Opbellen:
| 01 | height: 6vw; |
Voeg een CSS-klasse toe aan de knop en de pijl
Vervolgens voegen we dezelfde CSS-klasse toe aan de eerste twee tekstmodules in kolom 3.
- CSS-klasse: show-contact
Voeg een CSS-klasse toe aan het contactformulier
We hebben ook een aangepaste CSS-klasse nodig voor de contactformuliermodule.
- CSS-klasse: contactformulier-module
Verberg contactformulier module
Ga verder door een extra regel CSS-code toe te voegen aan het hoofdelement van de contactformuliermodule. Hierdoor kunnen we de module verbergen voordat we erop klikken.
| 01 | display: none; |
Codemodule toevoegen aan kolom 3 met JQuery- en CSS-code
En om de klikfunctie te maken, hebben we JQuery-code nodig. We zullen ook aangepaste CSS-code gebruiken. Voeg een nieuwe codemodule toe aan kolom 2 met de code. Zorg ervoor dat u JQuery-code tussen scripttags en CSS-code tussen stijltags plaatst.
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;
}
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer naar het resultaat kijken.
Conclusie
In dit artikel hebben we je laten zien hoe je een drop-down contactformulier toevoegt aan je custom header.
Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.
