Gå till innehållet

Så här lägger du till en rullgardinsformulär till din globala rubrik

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

När du skapar en anpassad rubrik för din webbplats med Divis temagenerator kommer du att leta efter det perfekta sättet att lägga till en AAL (uppmaning till handling). Ett sätt att göra detta är att lägga till ett nedrullningsbart kontaktformulär. Detta hjälper dig att hålla huvudets övergripande utseende rent och samtidigt ge dig möjlighet att komma i kontakt med dig utan att behöva bläddra ner. I den här självstudien visar vi dig hur du skapar ett listruta kontaktformulär med Divi och JQuery & CSS-kod. Du kan också ladda ner JSON-filen gratis!

Låt oss gå.

undersökningen

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

Listrutan Divi

1. Gå till Divi Theme Builder och börja skapa en global rubrik

Gå till Divi Theme Builder

Börja med att gå till Divi Theme Builder i backend på din WordPress-webbplats.

Global divi-rubrik

Skapa en global rubrik

Klicka på "Lägg till global rubrik" och välj "Skapa global rubrik" för att börja skapa en anpassad global rubrik.

Skapa global divi-rubrik

2. Bygg huvudet design

Avsnitt inställningar

Bakgrundsfärg

Väl inne i den övergripande rubrikmallen kommer du att märka ett avsnitt. Öppna detta avsnitt och använd en vit bakgrundsfärg.

  • Bakgrundsfärg: #FFFFFF
Bakgrundsjustering

avstånd

Ta sedan bort den övre och nedre stoppningen från avsnittet.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
Vadderingskonfiguration

Skugga låda

Applicera också en subtil lådeskärm.

  • Box Shadow suddighetsstyrka: 50px
  • Skuggfärg: rgba (0,0,0,0,15)
Divi-skuggkonfiguration

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:

Välj en layout

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och modifierar dimensioneringsparametrarna enligt följande:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja
  • Bredd: 95%
  • Max bredd: 100%
Konfigurera måttlinjedimension

avstånd

Lägg sedan till anpassad övre och nedre stoppning.

  • Övre stoppning: 1vw
  • Botten stoppning: 1vw
Konfiguration av sektionsavstånd

Huvudelement

Och justera allt kolumninnehåll genom att lägga till en enda rad CSS-kod till radens huvudelement.

align-items: center;

Anpassad CSS

Kolumn 2 Z-index

Vi ser också till att den andra kolumnen har ett högre z-indexvärde för reaktiva ändamål.

  • Z-index: 12
Kolumnparameter

Lägg till en bildmodul i kolumn 1

Ladda ner logotyp

Det är dags att börja lägga till moduler! Börja med en bildmodul i kolumn 1. Ladda upp en logotyp.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Bildmodul divi

uppriktning

Ändra sedan modulens inriktning.

  • Bildjustering: mitt
Justeringsbildmodul

dimensionering

Ändra också bredden.

  • Bredd: 3vw (skrivbord), 5vw (surfplatta), 7vw (telefon)
listrutans kontaktformulär

Lägg till en menymodul i kolumn 2

Välj menyn

I den andra kolumnen lägger vi till en menymodul.

Anpassning av divi-menymodulen

Disposition

Byt till fliken moduldesign och ändra layoutstil.

  • Stil: centrerad
Meny modul stil

Inställningar för menytekst

Ändra sedan textinställningarna i modulmenyn.

  • Menyteckensnitt: Öppna utan
  • Menyn typsnitt vikt: Halv fet
  • Färg på menyn: # 000000
  • Menytekststorlek: 0.8vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Menybokstavsavstånd: 1 st
Divi-menytext

Listrutan textinställningar

Ändra sedan färgen på linjen i rullgardinsmenyn.

  • Färg på raden i rullgardinsmenyn: # 007dff
Listrutan Divi

ikoner

Med hamburgarens meny ikonfärg.

  • Hamburgare meny ikon färg: # 007dff
Menyikoner divi

Lägg till textmodulen 1 i kolumnen 3

Lägg till en kopia

Låt oss gå vidare till den tredje modulen! Lägg till en textmodul med en kopia efter eget val.

Kontakta oss divi-modul

Bakgrundsfärg

Lägg sedan till en bakgrundsfärg.

  • Bakgrundsfärg: # 007dff
Divi bakgrund

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

  • Textstilsort: Öppna Sans
  • Textens textvikt: fetstil
  • Textfärg: #ffffff
  • Textstorlek: 0.8vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Justering av texten: centrum
Divi teckensnittsfärg

dimensionering

Ändra sedan modulens storlek på parametrarna.

  • Bredd: 33%
  • Justering av modulen: centrum
Storleksavdelningstextdelning

avstånd

Lägg sedan till anpassad övre och nedre stoppning.

  • Övre stoppning: 0.8vw (skrivbord), 2vw (surfplatta och telefon)
  • Botten stoppning: 0.8vw (skrivbord), 2vw (surfplatta och telefon)
Konfiguration av avstånd för textmodul

gräns

Och slutför modulparametrarna genom att lägga till en gränseradie.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Alla hörn: 100px
Textmodulens kantkonfiguration

Lägg till textmodulen 2 i kolumnen 3

Lägg till en symbol i innehållsområdet

Låt oss gå vidare till nästa modul, som är en annan textmodul. Lägg till följande pil i innehållsområdet: "▼".

Divi fleche textmodul

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

  • Textstilsort: Öppna Sans
  • Textfärg: # 007fff
  • Textstorlek: 3vw
  • Höjd på textrad: 0em
  • Justering av texten: centrum
Textmodul för teckensnittsdelning

Z-index

Vi ökar också z-index för modulen.

  • Z-index: 11
Divi-textmodulposition

Lägg till kontaktformulärmodulen i kolumn 3

Du kan nu lägga till ett kontaktformulär längst ner i textmodulen som innehåller pilen. Denna modul är ganska enkel att använda, så du måste anpassa fälten du vill synliggöra.

Kontaktformulärsmodul

3. Anpassa elementen för att skapa ett kontaktformulär med ett klick

Lägg till höjden på kolumn 3

När alla mods är på plats är det dags att skapa effekten. Det första steget mot att uppnå önskat resultat är att öppna inställningarna i kolumn 3 och lägga till responsiv anpassad höjd på den avancerade fliken.

Office:

height: 3vw;

tablett:

height: 5vw;

Telefon:

height: 6vw;

Kontaktformulär för kontaktblad

Lägg till en CSS-klass till knappen och pilen

Sedan lägger vi till samma CSS-klass till de två första textmodulerna i kolumn 3.

  • CSS-klass: show-contact
Lägg till avsnittet Visa kontakt

Lägg till en CSS-klass i kontaktformuläret

Vi behöver också en anpassad CSS-klass för modulen Kontaktformulär.

  • CSS-klass: kontaktformulär-modul
Lägg till en klass i divi-formuläret

Dölj kontaktformulärmodulen

Fortsätt genom att lägga till en extra rad CSS-kod till huvudelementet i modulen Kontaktformulär. Detta gör att vi kan dölja modulen innan vi klickar.

display: none;

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Style CSS-modul divi

Lägg till en kodmodul i kolumn 3 med JQuery och CSS-kod

Och för att skapa klickfunktionen behöver vi lite JQuery-kod. Vi kommer också att använda anpassad CSS-kod. Lägg till en ny kodmodul i kolumn 2 med koden. Se till att placera JQuery-kod mellan skripttaggar och CSS-kod mellan stiltaggar.

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

Lägg till JavaScript-kod

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

office

Design exempel

Vad man ska komma ihåg

I den här artikeln har vi visat dig hur du lägger till ett nedrullningsbart kontaktformulär i din anpassade rubrik. Det är ett bra sätt att utlösa åtgärder tidigt. 

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
4 aktier
del4
tweet
Enregistrer