Vill du skapa en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP i Divi som visas efter att du klickat på en knapp?
I den här Divi-handledningen kommer vi att visa dig hur du skapar en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP som visas efter att ha klickat på en knapp med bara Divi, jQuery-kod och CSS-kod.
Läs också vår guide om: Divi: Hur man skapar en klibbig sidfot med "Reveal"-effekt
Det är ett bra sätt att behålla besökare din webbplats fokuserade på handlingen de åtog sig med ett enkelt knapptryck. Det tar dem inte till en annan sida.
undersökningen
Nedan kan du ta en snabb titt på vad vi kommer att skapa och hoppa sedan in i handledningen!
Förhandsvisning på PC
Förhandsgranska på telefon och surfplatta
Skapa en ny sida med en fördefinierad layout
Låt oss börja med att använda en fördefinierad layout från Divi-biblioteket. För det här exemplet kommer vi att använda kontaktsidan för Skönhetsproduktlayoutpaket .
Lägg till en ny sida till din webbplats och ge den en titel och välj sedan alternativet "Använd Divi Builder".
Vi kommer att använda en färdig layout från Divi-biblioteket för det här exemplet, så välj 'Välj layout".
Hitta och välj startsidan för layouten 'Inredningsföretag".
Välj 'Välj layout' för att lägga till layouten på din sida.
Vi är nu redo att fortsätta vår handledning.
Skapa en sektion med knappmodulen
Det första vi måste göra är att lägga till ett nytt avsnitt där vi placerar knappen som tillåter kontakt~~POS=TRUNC formulär~~POS=HEADCOMP att komma.
Lägg bara till ett standardavsnitt
Välj sedan en rad med en kolumn.
När du har gjort det lägger du till en knappmodul till den.
Du kan anpassa knappen hur du vill, men du måste se till att knappens URL börjar med '#' följt av något annat. Du kan inte bara lämna det tomt eller bara använda tecknet '#'. Genom att lägga till '#' och text kommer sidan inte att flyttas när du klickar på knappen. Om du lämnar det tomt kommer sidan att uppdateras vid klick. Och om du bara använder '#' kommer du att skickas till toppen av sidan.
Nästa viktiga sak vi behöver göra är att tilldela en CSS-klass till knappen. Vi kommer att använda den här CSS-klassen senare i den här artikeln i jQuery-koden för att säkerställa att kontaktformuläret visas efter att ha klickat. Klassen vi måste tilldela knappen är helt enkelt "knapp".
- CSS-klass: knapp
Skapa ett kontaktformulär för PC-version
Nästa sak vi behöver göra är att skapa skrivbordskontaktformuläret som visas när någon klickar på knappen vi skapade i föregående del av den här artikeln. Senare i den här artikeln kommer vi också att visa dig hur du skapar mobilversionen.
Lägg till ett nytt standardavsnitt
Börja med att lägga till ett nytt standardavsnitt på sidan du arbetar med. I avsnittet inställningar, gå till fliken Avancerat lägg till "popup" i CSS-klassfältet.
Rulla ner på samma flik och placera följande rader med CSS-kod i fältet Före i underkategorin Anpassad CSS:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Genom att lägga till detta säkerställer vi att avsnittet tar upp hela fliken. Du kan justera bakgrundsfärgen i CSS-koden för att skapa önskad bakgrundsöverlagring. I det här fallet använder vi svart färg med viss transparens. På samma flik lägger du också till följande rad med CSS-kod till huvudelementet:
display: none;
Det sista vi måste göra på fliken Avancerat är att avaktivera avsnittet på telefonen och surfplattan i underkategorin Synlighet.
Lägg till en rad i två kolumner
Fortsätt genom att lägga till en rad med två kolumner och navigera till fliken Stil.
- Använd anpassad rännbredd: JA
- Maximal bredd: 1291px
Ange parametrarna för var och en av kolumnerna.
Ändra de interna marginalerna (överst, vänster och höger) enligt följande:
- Intern marginal (överst, vänster, höger): 30px
Avsluta genom att gå till fliken Avancerat. I huvudelementet lägger du till följande rader med CSS-kod:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Lägg till den första textmodulen
När du har gjort alla ändringar i avsnittet och raden är det dags att lägga till de olika modulerna du vill visa.
Det första vi lägger till är titeln som visas. Börja med att lägga till en ny textmodul i den första kolumnen på raden, skriv texten i fliken Innehåll och växla till fliken Stil.
På fliken Stil använde vi följande inställningar för underkategorin Text:
- Header Font: Lobster
- Mjukt ljus rubrik: fet text
- Textjustering: Fet
- Rubrikens textfärg: #002282
- Rubriktextstorlek: 37px
- Rubrikradshöjd: 1,7 em
Lägg till en andra textmodul
Fortsätt genom att lägga till en ny textmodul och skriv in texten du vill ska visas på fliken Innehåll. Växla till fliken Stil och tillämpa följande inställningar på underkategorin Text:
- Textjustering: Center
- Texttypsnitt: Arial
- Text Textstorlek: 13px
- Textfärg Text: #002282
- Textradshöjd: 1,7 em
Lägg till en "Följ oss på sociala nätverk"-modul
Därefter kommer vi också att lägga till modulen "Följ oss på sociala medier" i den första kolumnen. I det här fallet har vi valt tre sociala medier-ikoner; Facebook, Twitter och Instagram.
Det sista vi behöver göra är att lägga till utfyllnad (vänster) till denna modul på fliken Avancerat. Lägg till följande rad med CSS-kod till huvudelementet:
padding-left: 40%;
Lägg till en kontaktformulärmodul
Sedan kan vi flytta till den andra kolumnen i raden. I den här kolumnen är det första vi ska placera modulen Kontaktformulär.
För detta exempel har vi bara valt två fält; namn och e-post.
När du har lagt till modulen Kontaktformulär, navigerar du till fliken Stil i modulen Kontaktformulär och gör följande ändringar i underkategorin Fält:
- Textfärgfält: #002282
- Textstorleksfält: #002282
- Fältlinjehöjd: 1,7 em
På samma flik gör du följande ändringar i underkategorin Knapp:
- Använd anpassade stilar för Knapp: Ja
- Textstorleksknapp: 20
- Knappens textfärg: #FFFFFF
- Bakgrundsknapp: #0086c4
- Knappkantsbredd: 2
- Kantradieknapp: 3
Byt till fliken Avancerat och lägg till en marginal på 5 %.
Lägg till en sammanfattningsmodul
En annan sak som vi kommer att behöva lägga till i den andra kolumnen är en sammanfattningsmodul. Det enda vi behöver den här modulen till är utgångsikonen längst upp till höger i popup-fönstret. Välj nästa ikon från listan över ikoner och lämna allt annat tomt.
Gå sedan till fliken Avancerat och skriv "stäng" som CSS-klassen.
På samma flik lägger du till följande kodrader till huvudelementet i den anpassade CSS-underkategorin:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Applicera en gradientfyllning på linjen
Slutligen lägger vi till en fin gradientbakgrund till linjen. Öppna inställningarna och tillämpa följande ändringar på alternativet för gradientbakgrund:
- Första gradientfärg: #FFFFFF
- Andra gradientfärg: #0c71c3
- Gradienttyp: Linjär
- Lutningsriktning: 124 grader
- Startposition: 50%
- Slutposition: 50 %
Skapa ett kontaktformulär för surfplatta och telefon
Nu när vi har skapat PC-versionen kommer tablet- och telefonversionen att gå mycket snabbare. De flesta av modulerna vi använde för PC-versionen är desamma som för mobilversionen.
Duplicera föregående avsnitt
Istället för att inaktivera den för telefon och surfplatta, som vi gjorde för PC-versionen, kommer vi att inaktivera PC-versionen i underkategorin Synlighet i modulinställningarna:
Ändra CSS-koden för modulen Sammanfattning
Istället för att använda skrivbordskoden, använd följande istället:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Applicera en gradientfyllning på linjen
För mobilversionen använder vi olika inställningar för linjens gradientbakgrund:
- Första gradientfärg: #FFFFFF
- Andra gradientfärg: #0c71c3
- Gradienttyp: Linjär
- Lutningsriktning: 180 grader
- Startposition: 40%
- Slutposition: 40 %
Lägg till jQuery-kod
Det sista vi behöver göra för den här handledningen är att lägga till jQuery-koden. Lägg till en kodmodul och infoga följande JQuery-kod:
<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
Om du följer meddelandet steg för steg bör du kunna få följande resultat på datorn:
Och följande resultat på surfplattor och telefoner:
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln har vi visat dig hur du skapar ett kontaktformulär med ett klick. Använd den här metoden för att komma i kontakt med din besökare är subtil men effektiv.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
