Když vytvoříte vlastní záhlaví pro váš Webové stránky, pomocí Divi's theme builder, zjistíte, že hledáte perfektní způsob, jak přidat AAL (výzva k akci). Jedním ze způsobů, jak toho dosáhnout, je přidat a kontaktní formulář rolování. To vám pomůže udržet celkový vzhled vaší hlavičky čistý a zároveň poskytne možnost vstoupit Kontakt s vámi, aniž byste museli rolovat dolů. V tomto tutoriálu vám ukážeme, jak vytvořit a kontaktní formulář rozevíracího seznamu pomocí Divi a JQuery & CSS kódu. Budete si také moci zdarma stáhnout soubor JSON!
Pojďme.
přehled
Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.
1. Jděte do Divi Theme Builder a začněte vytvářet globální hlavičku
Přejít na Divi Theme Builder
Začněte tím, že navštívíte Divi Theme Builder na pozadí vašeho webu WordPress.
Vytvořte globální záhlaví
Klikněte na „Přidat globální záhlaví“ a vyberte „Vytvořit globální záhlaví“ a začněte vytvářet vlastní globální záhlaví.
2. Vytvořte design záhlaví
Nastavení sekce
Barva pozadí
Jakmile se dostanete do šablony celkové hlavičky, všimnete si sekce. Otevřete tuto část a použijte bílou barvu pozadí.
- Barva pozadí: #FFFFFF
vzdálenost
Potom ze sekce odstraňte výchozí horní a dolní výplň.
- Horní výplň: 0px
- Spodní výplň: 0px
Stínová krabička
Použijte také jemný odstín krabice.
- Síla stínění stínu: 50px
- Barva stínu: rgba (0,0,0,0,15)
Přidat nový řádek
Struktura sloupců
Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:
dimenzování
Bez přidání dalších modulů otevřete parametry linky a upravte parametry velikosti takto:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Vyrovnání výšek sloupců: Ano
- Šířka: 95%
- Maximální šířka: 100%
vzdálenost
Poté přidejte vlastní horní a dolní výplň.
- Horní výplň: 1vw
- Spodní výplň: 1vw
Hlavní prvek
Zarovnejte veškerý obsah sloupce přidáním jediného řádku kódu CSS k hlavnímu prvku řádku.
align-items: center;
Sloupec 2 Z Index
Také se ujistíme, že druhý sloupec má vyšší hodnotu indexu z pro reaktivní účely.
- Z Index: 12
Přidejte modul obrázku do sloupce 1
Stáhnout logo
Je čas začít přidávat moduly! Začněte modulem obrázků ve sloupci 1. Nahrajte logo.
zarovnání
Poté změňte zarovnání modulu.
- Zarovnání obrázku: na střed
dimenzování
Také změňte šířku.
- Šířka: 3vw (stolní), 5vw (tablet), 7vw (telefon)
Přidejte modul nabídky do sloupce 2
Vyberte nabídku
Do druhého sloupce přidáme modul nabídky.
Dispozice
Přepněte na kartu návrhu modulu a změňte styl rozvržení.
- Styl: Na střed
Nastavení textu nabídky
Poté změňte nastavení textu v nabídce modulu.
- Písmo nabídky: Otevřít bez
- Hmotnost písma nabídky: Polotučné
- Barva textu nabídky: # 000000
- Velikost textu nabídky: 0.8vw (stolní), 2vw (tablet), 3vw (telefon)
- Mezery v nabídce: 1px
Nastavení textu rozevírací nabídky
Poté v rozevírací nabídce změňte barvu čáry.
- Barva řádku v rozbalovací nabídce: # 007dff
ikony
S barvou ikony nabídky hamburger.
- Barva ikony nabídky Hamburger: # 007dff
Do sloupce 1 přidejte textový modul 3
Přidat kopii
Pojďme na třetí modul! Přidejte textový modul s kopií podle vašeho výběru.
Barva pozadí
Poté přidejte barvu pozadí.
- Barva pozadí: # 007dff
Nastavení textu
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:
- Písmo textu: Open Sans
- Váha písma textu: tučně
- Barva textu: #ffffff
- Velikost textu: 0.8vw (stolní), 2vw (tablet), 3vw (telefon)
- Zarovnání textu: střed
dimenzování
Poté upravte parametry pro dimenzování modulu.
- Šířka: 33%
- Zarovnání modulu: střed
vzdálenost
Poté přidejte vlastní horní a dolní výplň.
- Horní výplň: 0.8vw (stolní), 2vw (tablet a telefon)
- Spodní výplň: 0.8vw (stůl), 2vw (tablet a telefon)
hraniční
A dokončete parametry modulu přidáním poloměru ohraničení.
- Všechny rohy: 100px
Do sloupce 2 přidejte textový modul 3
Přidejte symbol do oblasti obsahu
Přejdeme k dalšímu modulu, což je další textový modul. Přidejte následující šipku do oblasti obsahu: „▼“.
Nastavení textu
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:
- Písmo textu: Open Sans
- Barva textu: # 007fff
- Velikost textu: 3vw
- Výška řádku textu: 0em
- Zarovnání textu: střed
Z index
Také zvýšíme index z modulu.
- Z Index: 11
Přidejte modul kontaktního formuláře do sloupce 3
Nyní můžete přidat a kontaktní formulář jen ve spodní části textového modulu, který obsahuje šipku. Tento modul je poměrně jednoduchý na používání, takže si budete muset přizpůsobit, která pole chcete zviditelnit.
3. Přizpůsobte prvky tak, abyste vytvořili kontaktní formulář jedním kliknutím
Přidejte výšku sloupce 3
Jakmile jsou všechny mody na místě, je čas vytvořit efekt. Prvním krokem k dosažení požadovaného výsledku je otevření nastavení ve sloupci 3 a přidání responzivní vlastní výšky na záložce Upřesnit.
Office:
height: 3vw;
tablet:
height: 5vw;
Telefon:
height: 6vw;
Přidejte do tlačítka a šipky třídu CSS
Poté přidáme stejnou třídu CSS do prvních dvou textových modulů ve sloupci 3.
- CSS třída: show-Kontakt
Přidejte do kontaktního formuláře třídu CSS
Budeme také potřebovat vlastní třídu CSS pro modul Kontaktní formulář.
- CSS třída: Kontakt-form-modul
Skrýt modul Kontaktní formulář
Pokračujte přidáním dalšího řádku kódu CSS do hlavního prvku modulu Kontaktní formulář. To nám umožní skrýt modul před kliknutím.
display: none;
Do sloupce 3 přidejte kódový kód s kódem JQuery a CSS
A abychom vytvořili funkci kliknutí, budeme potřebovat nějaký kód JQuery. Použijeme také vlastní kód CSS. Přidejte nový kódový modul do sloupce 2 s kódem. Nezapomeňte umístit kód JQuery mezi značky skriptu a kód CSS mezi značky stylu.
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;}
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Kancelář
Co si pamatovat
V tomto článku jsme vám ukázali, jak přidat rozevírací kontaktní formulář do vlastní hlavičky. Je to skvělý způsob, jak včas zahájit akci.
