Wanneer u een aangepaste koptekst maakt voor uw Site web, met Divi's themabouwer, zul je merken dat je op zoek bent naar de perfecte manier om een ​​AAL (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 binnen te komen contact met je mee, zonder naar beneden te hoeven scrollen. In deze zelfstudie laten we u zien hoe u een Contact formulier vervolgkeuzelijst met behulp van Divi en JQuery & CSS-code. U kunt het JSON-bestand ook gratis downloaden!

Laten we gaan.

overzicht

Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.

Divi vervolgkeuzemenu

1. Ga naar Divi Theme Builder en begin met het maken van een globale koptekst

Ga naar Divi Theme Builder

Begin met naar de Divi Theme Builder te gaan in de backend van je WordPress-site.

Globale divi-koptekst

Maak een algemene koptekst

Klik op "Globale koptekst toevoegen" en selecteer "Globale koptekst maken" om een ​​aangepaste globale koptekst te maken.

Bouw een globale divi-header

2. Bouw het header-ontwerp

Sectie-instellingen

Achtergrond kleur

Eenmaal binnen de algemene koptekstsjabloon, zult u een sectie opmerken. Open dit gedeelte en gebruik een witte achtergrondkleur.

  • Achtergrondkleur: #FFFFFF
Achtergrondaanpassing

tussenruimte

Verwijder vervolgens de standaard bovenste en onderste vulling uit de sectie.

  • Bovenste vulling: 0 px
  • Vulling onderkant: 0px
Padding configuratie

Schaduw doos

Breng ook een subtiele box-schaduw aan.

  • Box Shadow Blur Strength: 50 px
  • Schaduwkleur: rgba (0,0,0,0,15)
Divi-schaduwconfiguratie

Voeg een nieuwe regel toe

Kolomstructuur

Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:

Kies een indeling

sizing

Zonder meer modules toe te voegen, opent u de lijnparameters en wijzigt u de grootteparameters als volgt:

  • Gebruik een aangepaste gootbreedte: Ja
  • Dakgootbreedte: 1
  • Kolomhoogten gelijk maken: Ja
  • Breedte: 95%
  • Max breedte: 100%
Configureer divi line dimensie

tussenruimte

Voeg vervolgens aangepaste bovenste en onderste vulling toe.

  • Bovenvoering: 1vw
  • Vulling onderkant: 1vw
Configuratie van sectie-afstand

Hoofdelement

En lijn alle kolominhoud uit door een enkele regel CSS-code toe te voegen aan het hoofdelement van de rij.

align-items: center;

Aangepaste css

Kolom 2 Z Index

We zorgen er ook voor dat de tweede kolom een ​​hogere z-indexwaarde heeft voor reactieve doeleinden.

  • Z Index: 12
Kolom parameter

Voeg een afbeeldingsmodule toe aan kolom 1

Logo downloaden

Het is tijd om modules toe te voegen! Begin met een afbeeldingsmodule in kolom 1. Upload een logo.

Afbeelding module divi

alignement

Wijzig vervolgens de uitlijning van de module.

  • Afbeelding uitlijnen: midden
Uitlijningsbeeldmodule

sizing

Wijzig ook de breedte.

  • Breedte: 3vw (desktop), 5vw (tablet), 7vw (telefoon)
drop-down contactformulier

Voeg een menumodule toe aan kolom 2

Selecteer het menu

In de tweede kolom voegen we een menumodule toe.

Aanpassing van de Divi-menumodule

Aanleg

Schakel over naar het tabblad moduleontwerp en verander de lay-outstijl.

  • Stijl: gecentreerd
Menu module stijl

Menu tekst instellingen

Wijzig vervolgens de tekstinstellingen in het modulemenu.

  • Menulettertype: openen zonder
  • Gewicht van het lettertype van het menu: Semi vetgedrukt
  • Menutekstkleur: # 000000
  • Menutekstgrootte: 0.8vw (desktop), 2vw (tablet), 3vw (telefoon)
  • Menu-letterafstand: 1 px
Divi-menutekst

Vervolgkeuzemenu tekstinstellingen

Wijzig vervolgens de kleur van de lijn in het vervolgkeuzemenu.

  • Kleur van de regel in het vervolgkeuzemenu: # 007dff
Divi vervolgkeuzemenu

pictogrammen

Met de kleur van het menupictogram van de hamburger.

  • Pictogramkleur hamburgermenu: # 007dff
Menupictogrammen divi

Voeg de 1-tekstmodule toe aan de 3-kolom

Voeg een kopie toe

Laten we doorgaan naar de derde module! Voeg een tekstmodule toe met een kopie naar keuze.

Neem contact met ons op divi module

Achtergrond kleur

Voeg vervolgens een achtergrondkleur toe.

  • Achtergrondkleur: # 007dff
Divi achtergrond

Tekst instellingen

Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:

  • Tekstlettertype: Open Sans
  • Lettergewicht van de tekst: vet
  • Tekstkleur: #ffffff
  • Tekstgrootte: 0.8vw (desktop), 2vw (tablet), 3vw (telefoon)
  • Uitlijning van de tekst: midden
Divi-lettertypekleur

sizing

Wijzig vervolgens de parameters voor het modificeren van de module.

  • Breedte: 33%
  • Uitlijning van de module: midden
Sectie tekst divi

tussenruimte

Voeg vervolgens aangepaste bovenste en onderste vulling toe.

  • Bovenvoering: 0.8vw (desktop), 2vw (tablet en telefoon)
  • Vulling onderkant: 0.8vw (bureau), 2vw (tablet en telefoon)
Configuratie van afstand tussen tekstmodules

grens

En voltooi de moduleparameters door een randradius toe te voegen.

  • Alle hoeken: 100 px
Randconfiguratie van tekstmodule

Voeg de 2-tekstmodule toe aan de 3-kolom

Voeg een symbool toe aan het inhoudsgebied

Laten we doorgaan naar de volgende module, een andere tekstmodule. Voeg de volgende pijl toe in het inhoudsgebied: "▼".

Divi fleche tekstmodule

Tekst instellingen

Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:

  • Tekstlettertype: Open Sans
  • Tekstkleur: # 007fff
  • Tekstgrootte: 3vw
  • Hoogte van de regel tekst: 0em
  • Uitlijning van de tekst: midden
Lettertype divi tekstmodule

Z Index

We verhogen ook de z-index van de module.

  • Z Index: 11
Divi tekst module positie

Voeg de contactformuliermodule toe aan kolom 3

U kunt nu een toevoegen Contact formulier net onder aan de tekstmodule die de pijl bevat. Deze module is vrij eenvoudig te gebruiken, dus u moet aanpassen welke velden u zichtbaar wilt maken.

Contactformulier module

3. Pas de elementen aan om met één klik een contactformulier te maken

Voeg de hoogte van kolom 3 toe

Zodra alle mods op hun plaats zijn, is het tijd om het effect te creëren. De eerste stap om het gewenste resultaat te bereiken, is door de instellingen in kolom 3 te openen en responsieve aangepaste hoogte toe te voegen in het tabblad Geavanceerd.

Office:

height: 3vw;

tablet:

height: 5vw;

telefoon:

height: 6vw;

Voorbeeld bijsluiter contactformulier

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.

Voeg show contact sectie toe

Voeg een CSS-klasse toe aan het contactformulier

We hebben ook een aangepaste CSS-klasse nodig voor de contactformuliermodule.

  • CSS-klasse: contact-formulier-module
Voeg een klas toe aan het divi-formulier

Verberg de Contactformulier-module

Ga verder door een extra regel CSS-code toe te voegen aan het hoofdelement van de Contactformulier-module. Hierdoor kunnen we de module verbergen voordat we klikken.

display: none;

Stijl css module divi

Voeg een codemodule toe aan kolom 3 met JQuery en CSS-code

En om de klikfunctie te maken, hebben we wat 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;}

Voeg javascript-code toe

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Bureau

Ontwerpvoorbeeld

Wat te onthouden

In dit artikel hebben we u laten zien hoe u een vervolgkeuzelijst met contactformulier aan uw aangepaste koptekst kunt toevoegen. Het is een geweldige manier om al vroeg actie te ondernemen.