Wilt u een contactformulier in Divi maken dat verschijnt nadat u op een knop klikt?
In deze Divi-tutorial laten we je zien hoe je een contactformulier maakt dat verschijnt na het klikken op een knop, met alleen Divi, jQuery-code en CSS-code.
Lees ook onze gids over: Divi: Hoe maak je een sticky footer met "Reveal" effect
Dit is een uitstekende manier om websitebezoekers gefocust te houden op de actie die ze hebben uitgevoerd door op een knop te klikken. Ze worden niet naar een andere pagina doorgestuurd.
overzicht
Hieronder kun je alvast een voorproefje krijgen van wat we gaan maken, en daarna kun je meteen met de tutorial beginnen!
Voorbeeld op pc
Voorbeeld op telefoon en tablet
Een nieuwe pagina maken met een vooraf gedefinieerde lay-out
Laten we beginnen met een vooraf gedefinieerde lay-out uit de Divi-bibliotheek. Voor dit voorbeeld gebruiken we de contactpagina van de Lay-outpakket voor schoonheidsproducten .
Voeg een nieuwe pagina toe aan uw website, geef deze een titel en selecteer vervolgens de optie 'Gebruik Divi Builder'.
We zullen voor dit voorbeeld een kant-en-klare lay-out uit de Divi-bibliotheek gebruiken, dus selecteer 'Kies lay-out'.
Zoek en selecteer de startpagina van de lay-out 'Interieurontwerpbedrijf'.
Selecteer 'Kies lay-out' om de lay-out aan uw pagina toe te voegen.
We zijn nu klaar om onze tutorial voort te zetten.
Maak een sectie met de knopmodule
Het eerste wat we moeten doen, is een nieuwe sectie toevoegen waar we de knop plaatsen waarmee het contactformulier wordt weergegeven.
Zie ook: Divi: een aangepaste voettekst maken
Voeg gewoon een standaardsectie toe
Selecteer vervolgens een rij met één kolom.
Zodra je dat hebt gedaan, voeg je er een Button-module aan toe.
Je kunt de knop naar eigen wens aanpassen, maar zorg ervoor dat de URL van de knop begint met een '#' gevolgd door iets anders. Je kunt het veld niet leeg laten of alleen het teken '#' gebruiken. Het toevoegen van een '#' en tekst zorgt ervoor dat de pagina niet laadt nadat je op de knop hebt geklikt. Als je het veld leeg laat, wordt de pagina vernieuwd na een klik. En als je alleen een '#' gebruikt, ga je naar de bovenkant van de pagina.
De volgende belangrijke stap is het toewijzen van een CSS-klasse aan de knop. We gebruiken deze CSS-klasse later in dit artikel in de jQuery-code om ervoor te zorgen dat het contactformulier verschijnt na het klikken. De klasse die we aan de knop moeten toewijzen is simpelweg "button".
- CSS-klasse: knop
Een contactformulier voor de pc-versie maken
De volgende stap is het maken van het contactformulier voor desktops dat verschijnt zodra iemand op de knop klikt die we in het vorige deel van dit artikel hebben gemaakt. Later in dit artikel laten we je ook zien hoe je de mobiele versie maakt.
Een nieuwe standaardsectie toevoegen
Begin met het toevoegen van een nieuwe standaardsectie aan de pagina waaraan u werkt. Ga in de sectie-instellingen naar het tabblad 'Geavanceerd' en voeg 'popup' toe aan het veld 'CSS-klasse'.
Scroll naar beneden op datzelfde tabblad en plaats de volgende regels CSS-code in het veld Voor van de subcategorie Aangepaste CSS:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Door dit toe te voegen, zorgen we ervoor dat de sectie het hele tabblad vult. Je kunt de achtergrondkleur in de CSS-code aanpassen om de gewenste achtergrondoverlay te creëren. In dit geval gebruiken we zwart met een beetje transparantie. Voeg in hetzelfde tabblad ook de volgende regel CSS-code toe aan het hoofdelement:
display: none;
Het laatste wat we in het tabblad 'Geavanceerd' moeten doen, is de sectie 'Telefoon en tablet' in de subcategorie 'Zichtbaarheid' uitschakelen.
Een rij toevoegen aan twee kolommen
Ga verder door een rij met twee kolommen toe te voegen en ga naar het tabblad. Style .
- Gebruik aangepaste gootbreedte: JA
- Maximale breedte: 1291px
Voer de parameters van elk van de kolommen in.
Stel de interne marges (boven, links en rechts) als volgt in:
- Interne marge (boven, links, rechts): 30px
Ga tot slot naar het tabblad 'Geavanceerd'. Voeg in het hoofdelement de volgende CSS-regels toe:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Voeg de eerste tekstmodule toe
Nadat je alle wijzigingen in de sectie en de regel hebt aangebracht, is het tijd om de verschillende modules toe te voegen die je wilt weergeven.
Het eerste wat we toevoegen is de titel die verschijnt. Begin met het toevoegen van een nieuwe tekstmodule aan de eerste kolom van de rij en typ de tekst in het tabblad. Inhoud en overschakelen naar het tabblad Style .
In het tabblad Stijl hebben we de volgende instellingen gebruikt voor de subcategorie Tekst:
- Lettertype kop: Kreeft
- Koptekst zacht licht: vetgedrukte tekst
- Tekstuitlijning: Vet
- Kleur koptekst: #002282
- Grootte koptekst: 37px
- Hoogte kopregel: 1,7 em
Een tweede tekstmodule toevoegen
Ga verder door een nieuwe tekstmodule toe te voegen en typ de gewenste tekst in het tabblad 'Inhoud'. Ga naar het tabblad 'Stijl' en pas de volgende instellingen toe op de subcategorie 'Tekst':
- Tekstuitlijning: Midden
- Tekstlettertype: Arial
- Tekst Tekstgrootte: 13px
- Tekst Kleur Tekst: #002282
- Hoogte tekstregel: 1,7 em
Voeg een module 'Volg ons op sociale media' toe.
Vervolgens voegen we ook de module 'Volg ons op sociale media' toe aan de eerste kolom. In dit geval hebben we drie socialemedia-pictogrammen gekozen: Facebook, Twitter en Instagram.
Het laatste wat we moeten doen, is een linkermarge toevoegen aan deze module in het tabblad 'Geavanceerd'. Voeg de volgende CSS-code toe aan het hoofdelement:
padding-left: 40%;
Een contactformuliermodule toevoegen
Dan kunnen we naar de tweede kolom in de rij gaan. In deze kolom gaan we als eerste de module Contactformulier plaatsen.
Voor dit voorbeeld hebben we slechts twee velden gekozen: naam en e-mailadres.
Nadat je de module Contactformulier hebt toegevoegd, ga je naar het tabblad Stijl van de module Contactformulier en breng je de volgende wijzigingen aan in de subcategorie Velden:
- Tekstkleurvelden: #002282
- Velden tekstgrootte: #002282
- Hoogte veldlijn: 1,7 em
Breng op datzelfde tabblad de volgende wijzigingen aan in de subcategorie Knop:
- Gebruik aangepaste stijlen voor Knop: Ja
- Tekstgrootte knop: 20
- Tekstkleur knop: #FFFFFF
- Achtergrondknop: #0086c4
- Breedte knoprand: 2 "
- Rand Radius-knop: 3
Ga naar het tabblad 'Geavanceerd' en voeg een marge van 5% toe.
Een overzichtsmodule toevoegen
Een ander element dat we aan de tweede kolom moeten toevoegen, is een samenvattingsmodule. Deze module is alleen nodig voor het afsluitpictogram in de rechterbovenhoek van het pop-upvenster. Kies het volgende pictogram uit de lijst en laat de rest leeg.
Ga vervolgens naar het tabblad 'Geavanceerd' en typ 'close' als CSS-klasse.
Voeg in hetzelfde tabblad de volgende regels code toe aan het hoofdelement van de aangepaste CSS-subcategorie:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Een verloopvulling toepassen op de lijn
Tot slot voegen we een mooie verloopachtergrond toe aan de lijn. Open de instellingen en pas de volgende wijzigingen toe op de optie voor de verloopachtergrond:
- Eerste kleurverloop: #FFFFFF
- Tweede verloopkleur: #0c71c3
- Gradiënttype: Lineair
- Gradiëntrichting: 124 graden
- Startpositie: 50%
- Eindstand: 50%
Maak een contactformulier voor tablet en telefoon
Nu we de pc-versie hebben gemaakt, gaat de tablet- en telefoonversie veel sneller. De meeste modules die we voor de pc-versie hebben gebruikt, zijn dezelfde als voor de mobiele versie.
Vorige sectie dupliceren
In plaats van de functie uit te schakelen voor de telefoon en tablet, zoals we deden voor de pc-versie, schakelen we de pc-versie uit in de subcategorie 'Zichtbaarheid' binnen de module-instellingen:
Wijzig de CSS-code van de module Samenvatting
Gebruik in plaats van de code voor de desktop de volgende code:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Een verloopvulling toepassen op de lijn
Voor de mobiele versie gebruiken we verschillende instellingen voor de verloopachtergrond van de lijn:
- Eerste kleurverloop: #FFFFFF
- Tweede verloopkleur: #0c71c3
- Gradiënttype: Lineair
- Gradiëntrichting: 180 graden
- Startpositie: 40%
- Eindstand: 40%
jQuery-code toevoegen
Het laatste wat we voor deze tutorial moeten doen, is de jQuery-code toevoegen. Voeg een Code-module toe en voer de volgende jQuery-code in:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Resultaat
Als u het bericht stap voor stap volgt, zou u het volgende resultaat op de computer moeten kunnen krijgen:
En het volgende resultaat op tablets en telefoons:
Download DIVI nu!!!
Conclusie
In dit artikel hebben we je laten zien hoe je een click-through contactformulier maakt. Deze methode om contact te leggen met je bezoekers is subtiel maar effectief.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...