Divi: Sådan opretter du en kontaktformular, der vises efter klik på en knap

Kunne du tænke dig at oprette en Kontaktformular i Divi, der vises efter at have klikket på en knap?

I denne Divi-tutorial viser vi dig, hvordan du opretter en Kontaktformular som vises efter at have klikket på en knap, der kun bruger Divi, jQuery-kode og CSS-kode.

Læs også vores vejledning om: Divi: Sådan opretter du en klæbrig sidefod med "Reveal"-effekt

Det er en god måde at beholde besøgende din websted fokuseret på den handling, de forpligtede sig til ved et klik på en knap. Det fører dem ikke til en anden side.

undersøgelse

Nedenfor kan du tage et hurtigt kig på, hvad vi vil skabe, og derefter springe ind i selvstudiet!

Forhåndsvisning på pc

Forhåndsvisning på telefon og tablet

Opret en ny side med et foruddefineret layout

Lad os starte med at bruge et foruddefineret layout fra Divi-biblioteket. Til dette eksempel vil vi bruge kontaktsiden på Skønhedsproduktlayoutpakke .

Tilføj en ny side til din Websted og giv den en titel, og vælg derefter indstillingen 'Brug Divi Builder'.

Vi vil bruge et præ-lavet layout fra Divi-biblioteket til dette eksempel, så vælg 'Vælg layout«.

Find og vælg startsiden for layoutet 'Indretningsfirma«.

Vælg 'Vælg layout' for at tilføje layoutet til din side.

Vi er nu klar til at fortsætte vores tutorial.

Opret en sektion med knapmodulet

Den første ting, vi skal gøre, er at tilføje en ny sektion, hvor vi placerer knappen, der tillader Kontaktformular at vise. 

Se også: Divi: Sådan opretter du en brugerdefineret sidefod

Tilføj blot et standardafsnit

Vælg derefter en række med én kolonne. 

Når du har gjort det, skal du tilføje et knapmodul til det.

Du kan tilpasse knappen, som du vil, men du skal sørge for, at knappens URL starter med '#' efterfulgt af noget andet. Du kan ikke bare lade det være tomt eller bare bruge tegnet '#'. Ved at tilføje '#' og tekst, vil siden ikke flytte sig, når du først klikker på knappen. Hvis du lader det stå tomt, opdateres siden ved klik. Og hvis du kun bruger '#', bliver du sendt til toppen af ​​siden.

Den næste vigtige ting, vi skal gøre, er at tildele en CSS-klasse til knappen. Vi vil bruge denne CSS-klasse senere i denne artikel i jQuery-koden for at sikre, at kontaktformularen vises efter klik. Den klasse, vi skal tildele knappen, er simpelthen "knap".

• CSS-klasse: knap

Opret en kontaktformular til pc-version

Den næste ting, vi skal gøre, er at oprette kontaktformularen på skrivebordet, der vises, når nogen klikker på knappen, vi oprettede i den forrige del af denne artikel. Senere i denne artikel vil vi også vise dig, hvordan du opretter mobilversionen.

Tilføj et nyt standardafsnit

Start med at tilføje et nyt standardafsnit til den side, du arbejder på. I sektionsindstillingerne skal du gå til fanen Avanceret og tilføje "popup" til feltet CSS-klasse. 

Rul ned på den samme fane og placer følgende linjer med CSS-kode i feltet Før i underkategorien Custom CSS:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Ved at tilføje dette sikrer vi, at afsnittet fylder hele fanen. Du kan justere baggrundsfarven i CSS-koden for at skabe den ønskede baggrundsoverlejring. I dette tilfælde bruger vi sort farve med en vis gennemsigtighed. På samme fane skal du også tilføje følgende linje med CSS-kode til hovedelementet:

display: none;

Den sidste ting, vi skal gøre på fanen Avanceret, er at deaktivere sektionen på telefonen og tabletten i underkategorien Synlighed.

Tilføj en række til to kolonner

Fortsæt ved at tilføje en række med to kolonner, og naviger til fanen stil. 

• Brug tilpasset tagrendebredde: JA
• Maksimal bredde: 1291px

Indtast parametrene for hver af kolonnerne.

Rediger de interne margener (øverst, venstre og højre) som følger:

• Intern margen (øverst, venstre, højre): 30px

Afslut ved at gå til fanen Avanceret. I hovedelementet skal du tilføje følgende linjer med CSS-kode:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Tilføj det første tekstmodul

Når du har foretaget alle ændringerne i sektionen og rækken, er det tid til at tilføje de forskellige moduler, du vil have vist. 

Den første ting, vi tilføjer, er titlen, der vises. Start med at tilføje et nyt tekstmodul til den første kolonne i rækken, skriv teksten i fanen Indhold og skift til fanen stil. 

På fanen Stil brugte vi følgende indstillinger for underkategorien Tekst:

• Overskriftsskrifttype: Hummer
• Blødt lys overskrift: Fed tekst
• Tekstjustering: Fed
• Sidehovedtekstfarve: #002282
• Sidehovedtekststørrelse: 37px
• Header line højde: 1,7 em

Tilføj et andet tekstmodul

Fortsæt ved at tilføje et nyt tekstmodul, og skriv den tekst, du vil have vist på fanen Indhold. Skift til fanen Stil og anvend følgende indstillinger på underkategorien Tekst:

• Tekstjustering: Center
• Tekstskrifttype: Arial
• Tekst Tekststørrelse: 13px
• Tekstfarve Tekst: #002282
• Tekstlinje højde: 1,7 em

Tilføj et 'Følg os på sociale netværk'-modul

Dernæst vil vi også tilføje modulet 'Følg os på sociale medier' ​​til den første kolonne. I dette tilfælde har vi valgt tre sociale medier ikoner; Facebook, Twitter og Instagram.

Den sidste ting, vi skal gøre, er at tilføje polstring (venstre) til dette modul på fanen Avanceret. Tilføj følgende linje med CSS-kode til hovedelementet:

padding-left: 40%;

Tilføj et kontaktformularmodul

Så kan vi flytte til den anden kolonne i rækken. I denne kolonne er den første ting, vi skal placere, modulet Kontaktformular. 

Til dette eksempel har vi kun valgt to felter; navn og email. 

Når du har tilføjet kontaktformularmodulet, skal du navigere til fanen Stil i kontaktformularmodulet og foretage følgende ændringer i underkategorien Felter:

• Tekstfarvefelter: #002282

• Tekststørrelsesfelter: #002282
• Feltlinjehøjde: 1,7 em

På den samme fane skal du foretage følgende ændringer i underkategorien Knap:

• Brug brugerdefinerede stilarter til knap: Ja
• Tekststørrelse knap: 20
• Knaptekstfarve: #FFFFFF
• Baggrundsknap: #0086c4

Se også: Sådan opretter du en glidende og push-menu i DIVI

• Knapkantbredde: 2
• Knap til kantradius: 3

Skift til fanen Avanceret og tilføj en margen på 5 %.

Tilføj et oversigtsmodul

En anden ting, vi bliver nødt til at tilføje til den anden kolonne, er et Resumé-modul. Det eneste, vi skal bruge dette modul til, er exit-ikonet øverst til højre i popup-vinduet. Vælg det næste ikon fra listen over ikoner, og lad alt andet stå tomt.

Gå derefter til fanen Avanceret og skriv "luk" som CSS-klassen. 

På samme fane skal du tilføje følgende kodelinjer til hovedelementet i den tilpassede CSS-underkategori:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Påfør et gradientfyld på linjen

Til sidst tilføjer vi en flot gradientbaggrund til linjen. Åbn indstillingerne, og anvend følgende ændringer til indstillingen for gradientbaggrund:

• Første gradientfarve: #FFFFFF
• Anden gradientfarve: #0c71c3
• Gradienttype: Lineær
• Gradientretning: 124 grader
• Udgangsposition: 50%
• Endelig position: 50 %

Opret en kontaktformular til tablet og telefon

Nu hvor vi har lavet pc-versionen, vil tablet- og telefonversionen gå meget hurtigere. De fleste af de moduler, vi brugte til pc-versionen, er de samme som til mobilversionen.

Dupliker forrige afsnit

I stedet for at deaktivere den for telefon og tablet, som vi gjorde for pc-versionen, deaktiverer vi pc-versionen i underkategorien Synlighed i modulindstillingerne:

Rediger CSS-koden for Resumé-modulet

I stedet for at bruge skrivebordskoden skal du bruge følgende i stedet:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Påfør et gradientfyld på linjen

For mobilversionen bruger vi forskellige indstillinger for linjens gradientbaggrund:

• Første gradientfarve: #FFFFFF
• Anden gradientfarve: #0c71c3
• Gradienttype: Lineær
• Gradientretning: 180 grader
• Udgangsposition: 40%
• Endelig position: 40 %

Tilføj jQuery-kode

Den sidste ting, vi skal gøre for denne tutorial, er at tilføje jQuery-koden. Tilføj et kodemodul og indsæt følgende JQuery-kode:

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

Resultat

Hvis du følger meddelelsen trin for trin, bør du være i stand til at få følgende resultat på computeren:

Og følgende resultat på tablets og telefoner:

Download DIVI nu!!!

Konklusion

I denne artikel har vi vist dig, hvordan du opretter en kontaktformular med et enkelt klik. Brug denne metode til at komme i kontakt med din besøgende er subtil, men effektiv. 

Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...