Keď vytvoríte vlastnú hlavičku pre váš webové stránky, pomocou Diviho tvorcu tém zistíte, že hľadáte dokonalý spôsob, ako pridať AAL (výzva na akciu). Jedným zo spôsobov, ako to urobiť, je pridať a Kontaktný formulár rolovanie. To vám pomôže udržať celkový vzhľad vašej hlavičky čistý a zároveň vám poskytne možnosť vstupu kontakt s vami bez toho, aby ste museli rolovať nadol. V tomto návode vám ukážeme, ako vytvoriť a Kontaktný formulár pomocou Divi a JQuery & CSS kódu. Budete si tiež môcť zadarmo stiahnuť súbor JSON!
Poďme.
prehľad
Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.
1. Prejdite do Divi Theme Builder a začnite vytvárať globálnu hlavičku
Prejdite na Divi Theme Builder
Začnite tým, že prejdete do časti Divi Theme Builder na konci svojho webu WordPress.
Vytvorte globálnu hlavičku
Kliknite na „Pridať globálnu hlavičku“ a vyberte „Vytvoriť globálnu hlavičku“, aby ste mohli začať vytvárať vlastnú globálnu hlavičku.
2. Vytvorte dizajn hlavičky
Nastavenia sekcií
Farba pozadia
Keď sa dostanete do celkovej šablóny hlavičky, všimnete si sekciu. Otvorte túto časť a použite bielu farbu pozadia.
- Farba pozadia: #FFFFFF
vzdialenosť
Potom zo sekcie odstráňte predvolené vrchné a spodné čalúnenie.
- Horná vypchávka: 0px
- Spodné čalúnenie: 0px
Tieňová skrinka
Použite aj jemný odtieň škatule.
- Sila rozostrenia tieňa škatule: 50px
- Farba tieňa: rgba (0,0,0,0,15)
Pridať nový riadok
Štruktúra stĺpcov
Pokračujte v pridávaní nového riadku do sekcie pomocou nasledujúcej štruktúry stĺpcov:
dimenzovanie
Bez pridania ďalších modulov otvorte parametre linky a upravte parametre veľkosti takto:
- Použite vlastnú šírku odkvapov: Áno
- Šírka odkvapov: 1
- Vyrovnajte výšky stĺpcov: Áno
- Šírka: 95%
- Maximálna šírka: 100%
vzdialenosť
Potom pridajte vlastné horné a dolné čalúnenie.
- Vrchná vypchávka: 1vw
- Spodné čalúnenie: 1vw
Hlavný prvok
Zarovnajte všetok obsah stĺpca pridaním jedného riadku kódu CSS k hlavnému prvku riadku.
align-items: center;
Stĺpec 2 index
Zaisťujeme tiež, aby mal druhý stĺpec vyššiu hodnotu indexu z pre reaktívne účely.
- Z Index: 12
Pridajte modul obrázkov do stĺpca 1
Stiahnite si logo
Je čas začať pridávať moduly! Začnite obrázkovým modulom v stĺpci 1. Nahrajte logo.
zarovnanie
Potom zmeňte zarovnanie modulu.
- Zarovnanie obrázku: na stred
dimenzovanie
Zmeniť tiež šírku.
- Šírka: 3vw (počítač), 5vw (tablet), 7vw (telefón)
Pridajte modul ponuky do stĺpca 2
Vyberte ponuku
V druhom stĺpci pridáme modul ponuky.
dispozície
Prepnite na kartu návrhu modulu a zmeňte štýl rozloženia.
- Štýl: Vycentrovaný
Nastavenia textu ponuky
Potom zmeňte nastavenie textu v ponuke modulu.
- Písmo ponuky: Otvorené bez
- Hmotnosť písma ponuky: Semi bold
- Farba textu ponuky: # 000000
- Veľkosť textu ponuky: 0.8vw (počítač), 2vw (tablet), 3vw (telefón)
- Riadkovanie písmen v ponuke: 1px
Nastavenia textu rozbaľovacej ponuky
Potom v rozbaľovacej ponuke zmeňte farbu čiary.
- Farba riadku rozbaľovacej ponuky: # 007dff
ikony
S farbou ikony ponuky hamburger.
- Farba ikony ponuky Hamburger: # 007dff
Pridajte textový stĺpec 1 do stĺpca 3
Pridajte kópiu
Prejdime k tretiemu modulu! Pridajte textový modul s kópiou podľa vášho výberu.
Farba pozadia
Potom pridajte farbu pozadia.
- Farba pozadia: # 007dff
Nastavenia textu
Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:
- Písmo textu: Open Sans
- Váha písma textu: tučne
- Farba textu: #ffffff
- Veľkosť textu: 0.8vw (počítač), 2vw (tablet), 3vw (telefón)
- Zarovnanie textu: stred
dimenzovanie
Potom upravte parametre veľkosti modulu.
- Šírka: 33%
- Zarovnanie modulu: stred
vzdialenosť
Potom pridajte vlastné horné a dolné čalúnenie.
- Vrchné čalúnenie: 0.8vw (stolné), 2vw (tablet a telefón)
- Spodné čalúnenie: 0.8vw (stôl), 2vw (tablet a telefón)
hraničné
A dokončite parametre modulu pridaním polomeru orámovania.
- Všetky rohy: 100px
Pridajte textový stĺpec 2 do stĺpca 3
Pridajte symbol do oblasti obsahu
Prejdime k ďalšiemu modulu, ktorý je ďalším textovým modulom. Pridajte do oblasti obsahu nasledujúcu šípku: „▼“.
Nastavenia textu
Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:
- Písmo textu: Open Sans
- Farba textu: # 007fff
- Veľkosť textu: 3vw
- Výška riadku textu: 0em
- Zarovnanie textu: stred
Z index
Tiež zvyšujeme index z modulu.
- Z Index: 11
Pridajte modul kontaktného formulára do stĺpca 3
Teraz môžete pridať a Kontaktný formulár len v spodnej časti textového modulu, ktorý obsahuje šípku. Tento modul sa používa pomerne jednoducho, takže si budete musieť prispôsobiť polia, ktoré chcete zviditeľniť.
3. Prispôsobte prvky tak, aby ste jedným kliknutím vytvorili kontaktný formulár
Pridajte výšku stĺpca 3
Keď sú všetky mody na mieste, je čas vytvoriť efekt. Prvým krokom k dosiahnutiu požadovaného výsledku je otvorenie nastavení v stĺpci 3 a pridanie responzívnej vlastnej výšky na karte rozšírené.
bureau:
height: 3vw;
tabliet:
height: 5vw;
Telefón:
height: 6vw;
Pridajte k tlačidlu a šípke triedu CSS
Ďalej pridáme rovnakú triedu CSS do prvých dvoch textových modulov v stĺpci 3.
- CSS trieda: show-kontakt
Pridajte do kontaktného formulára triedu CSS
Budeme tiež potrebovať vlastnú triedu CSS pre modul Kontaktný formulár.
- CSS trieda: kontakt-form-modul
Skryť modul Kontaktný formulár
Pokračujte pridaním ďalšieho riadku kódu CSS do hlavného prvku modulu Kontaktný formulár. Toto nám umožní skryť modul pred kliknutím.
display: none;
Pridajte stĺpec kódu do stĺpca 3 pomocou kódu JQuery a CSS
A na vytvorenie funkcie kliknutia budeme potrebovať nejaký kód JQuery. Použijeme tiež vlastný kód CSS. Pridajte do stĺpca 2 s kódom nový modul kódu. Nezabudnite umiestniť kód JQuery medzi značky skriptu a kód CSS medzi značky štýlu.
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;}
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
kancelária
Čo si pamätať
V tomto článku sme si ukázali, ako pridať rozbaľovací kontaktný formulár do vlastnej hlavičky. Je to skvelý spôsob, ako včas podniknúť kroky.
