När du skapar en anpassad rubrik för din webbplats, med hjälp av Divis temabyggare, kommer du att leta efter det perfekta sättet att lägga till en AAL (uppmaning). Ett sätt att göra detta är att lägga till en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP rullning. Detta kommer att hjälpa dig att hålla det övergripande utseendet på din header ren samtidigt som det ger möjlighet att komma in kontakta med dig, utan att behöva scrolla ner. I den här handledningen kommer vi att visa dig hur du skapar en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP rullgardinsmenyn med Divi och JQuery & CSS-kod. Du kommer också att kunna 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.
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.
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.
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
avstånd
Ta sedan bort den övre och nedre stoppningen från avsnittet.
- Övre stoppning: 0px
- Botten stoppning: 0px
Skugga låda
Applicera också en subtil lådeskärm.
- Box Shadow suddighetsstyrka: 50px
- Skuggfärg: rgba (0,0,0,0,15)
Lägg till en ny rad
Kolumnstruktur
Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:
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%
avstånd
Lägg sedan till anpassad övre och nedre stoppning.
- Övre stoppning: 1vw
- Botten stoppning: 1vw
Huvudelement
Och justera allt kolumninnehåll genom att lägga till en enda rad CSS-kod till radens huvudelement.
align-items: center;
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
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.
uppriktning
Ändra sedan modulens inriktning.
- Bildjustering: mitt
dimensionering
Ändra också bredden.
- Bredd: 3vw (skrivbord), 5vw (surfplatta), 7vw (telefon)
Lägg till en menymodul i kolumn 2
Välj menyn
I den andra kolumnen lägger vi till en menymodul.
Disposition
Byt till fliken moduldesign och ändra layoutstil.
- Stil: centrerad
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
Listrutan textinställningar
Ändra sedan färgen på linjen i rullgardinsmenyn.
- Färg på raden i rullgardinsmenyn: # 007dff
ikoner
Med hamburgarens meny ikonfärg.
- Hamburgare meny ikon färg: # 007dff
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.
Bakgrundsfärg
Lägg sedan till en bakgrundsfärg.
- Bakgrundsfärg: # 007dff
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
dimensionering
Ändra sedan modulens storlek på parametrarna.
- Bredd: 33%
- Justering av modulen: centrum
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)
gräns
Och slutför modulparametrarna genom att lägga till en gränseradie.
- Alla hörn: 100px
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: "▼".
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
Z-index
Vi ökar också z-index för modulen.
- Z-index: 11
Lägg till kontaktformulärmodulen i kolumn 3
Du kan nu lägga till en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP precis längst ner i textmodulen som innehåller pilen. Denna modul är ganska enkel att använda, så du måste anpassa vilka fält du vill göra synliga.
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;
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: visa-kontakta
Lägg till en CSS-klass i kontaktformuläret
Vi behöver också en anpassad CSS-klass för modulen Kontaktformulär.
- CSS-klass: kontakta-form-modul
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;
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;}
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
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.