Je třeba přidat a kontaktní formulář do globální hlavičky?
Když vytvoříte vlastní záhlaví pro váš Webové stránky Pomocí Divi Theme Builderu zjistíte, že hledáte perfektní způsob, jak přidat CTA (Call to Action). 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 se do ní dostat Kontakt aniž byste museli rolovat.
V tomto tutoriálu vám ukážeme, jak vytvořit a kontaktní formulář rolovatelné pomocí Divi a JQuery & CSS kódu.
Začněme!
přehled
Než se pustíme do tohoto tutoriálu, podívejme se na náhled výsledku, kterého dosáhneme.
Vytvořte globální záhlaví
Přejděte do Tvůrce témat
Přejděte na Theme Builder z nabídky Divi na vašem ovládacím panelu WordPress a klikněte na „Přidat globální záhlaví“.
Vyberte „Vytvořit globální záhlaví“.
Vytvořte styl záhlaví
Nastavení sekce
Barva pozadí
Jakmile jste v editoru šablon, všimnete si sekce. Otevřete tuto sekci a změňte barvu pozadí.
- Pozadí: #FFFFFF
vzdálenost
Poté z oddílu odeberte výchozí horní a spodní vnitřní okraj.
- Vertex vnitřního okraje: 0px
- Spodní vnitřní okraj: 0px
Stínová krabička
Naneste také jemný box stín.
- Box Shadow Blue Síla: 50px
- Barva písma titulků: rgba(0,0,0,0.15)
Přidat nový řádek
Struktura kolony
Přidejte do sekce nový řádek pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů otevřete nastavení řádku a změňte nastavení velikosti následovně:
- Použít vlastní šířku okapu: Ano
- Rozteč sloupců: 1
- Harmonizovat výšky sloupců: Ano
- Maximální šířka: 95%
- Maximální šířka: 100%
vzdálenost
Poté přidejte vlastní horní a dolní výplň.
- Špičkový vnitřní okraj: 1vw
- Spodní vnitřní okraj: 1vw
hlavním prvkem
Zarovnejte veškerý obsah sloupce přidáním jednoho řádku kódu CSS do prvku hlavního řádku.
align-items: center;
Index Z ve sloupci 2
Také se ujistíme, že druhý sloupec má vyšší hodnotu z-indexu pro responzivní design.
- Z-index: 12
Přidejte modul obrázku do sloupce 1
Stáhnout logo
Je čas začít přidávat moduly! Počínaje Image modulem ve sloupci 1. Nahrajte logo.
zarovnání
Poté změňte zarovnání modulu.
- Zarovnání obrazu: Na střed
dimenzování
Také změňte šířku.
- Maximální šířka: 3vw (stolní počítač), 5vw (tablet), 7vw (telefon)
Přidejte modul nabídky do sloupce 2
Vyberte Nabídka
Do druhého sloupce přidáme modul Menu.
Dispozice
Přejděte na kartu Styl modulu a změňte styl rozvržení.
- Styly: Střed
Nastavení textu nabídky
Poté změňte nastavení textu v nabídce modulu.
- Nabídka písma: Otevřít Žádné
- Nabídka tlumeného světla: polotučné
- Barva textu nabídky: #000000
- Velikost textu nabídky: 0,8 vw (počítač), 2 vw (tablet), 3 vw (telefon)
- Mezera mezi písmeny nabídky: 1px
Nastavení textu rozevírací nabídky
Dále změňte barvu čáry z rozevírací nabídky.
- Barva řádku rozbalovací nabídky: #007dff
ikony
Změňte barvu ikony nabídky hamburgeru.
- Barva ikony menu hamburger: #007dff
Přidejte textový modul do sloupce 3
Přidat zprávu
Do třetího modulu! Přidejte textový modul se zprávou dle vlastního výběru.
Barva pozadí
Přidejte barvu pozadí.
- Barva pozadí: #007dff
Nastavení textu
Přepněte na kartu návrhu modulu a podle toho změňte nastavení textu:
- Písmo textu: Open Sans
- Text Soft Light: Tučný
- Barva textu Text: #ffffff
- Text Velikost textu: 0,8 vw (počítač), 2 vw (tablet), 3 vw (telefon)
- Zarovnání textu: Na střed
dimenzování
Poté upravte parametry pro dimenzování modulu.
- Maximální šířka: 33%
- Zarovnání modulu: Střed
vzdálenost
Dále přidejte vlastní horní a dolní vycpávky.
- Horní vnitřní okraj: 0,8 vw (desktop), 2 vw (tablet a telefon)
- Nízká vnitřní marže: 0,8 vw (počítač), 2 vw (tablet a telefon)
Hranice
A dokončete parametry modulu přidáním poloměru ohraničení.
- Zaoblený obdélník: 100px
Přidejte další textový modul do sloupce 3
Přidejte symbol do oblasti obsahu
Přejděme k dalšímu modulu, kterým je další textový modul. Do oblasti obsahu přidejte následující symbol šipky: '▼'.
Nastavení textu
Přepněte na kartu návrhu modulu a podle toho změňte nastavení textu:
- Písmo textu: Open Sans
- Barva textu: #007fff
- Text Velikost textu: 3vw
- Výška řádku textu: 0 em
- Zarovnání textu: Na střed
Z-index
Zvyšme také z-index modulu.
- Z-index: 11
Přidejte modul kontaktního formuláře do sloupce 3
Přidejte pole s plnou šířkou dle vlastního výběru
Dalším a posledním modulem, který potřebujeme ve třetím sloupci, je modul kontaktního formuláře. Přidejte všechna pole plné šířky, která potřebujete.
Přidejte název
Použijte také název.
Barva pozadí
Dále změňme barvu pozadí.
- Barva pozadí: #e7f2ff
Nastavení pole
Pojďme na kartu Styl modulu a změňme nastavení pole.
- Pole barev pozadí: #ffffff
- Barva textu pole: #dddddd
- Barva textu zaměření: #007dff
- Vertex Padding Fields: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
- Pole spodní výplně: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
- Pole písem: Otevřít Žádné
- Pole Velikost textu: 0,7 vw (počítač), 1,8 vw (tablet), 3 vw (telefon)
Nastavení textu nadpisu
Upravte nastavení textu nadpisu.
- Vložte nadpis tři: H3
- Soft Light Title: Tučný text
- Zarovnání textu: na střed
- Barva textu nadpisu: #007dff
- Velikost textu nadpisu: 1 vw (počítač), 2,5 vw (tablet), 3,5 vw (telefon)
- Výška titulního řádku: 1,6 em
Nastavení textu captcha
S nastavením textu captcha.
- Font Captcha: Open Sans
- Barva textu captcha: #007dff
Nastavení tlačítek
Pokračujte přizpůsobením tlačítka.
- Použít vlastní styly pro tlačítko: Ano
- Velikost textu tlačítka: 0,8 vw (stolní počítač), 2 vw (tablet), 3 vw (telefon)
- Barva textu tlačítka: #ffffff
- Tlačítko pozadí: #007dff
- Tlačítko šířky ohraničení: 0 pixelů
- Poloměr okraje tlačítka: 100 px
- Tlačítko písma: Otevřít Žádné
- Tlačítko Soft Light: Tučný text
- Okraj tlačítka: 1vw
- Tlačítko horního polstrování: 1vw (stolní počítač), 2vw (tablet a telefon)
- Tlačítko spodního polstrování: 1vw (stolní počítač), 2vw (tablet a telefon)
- Tlačítko levé podložky: 2vw (stolní počítač), 7vw (tablet a telefon)
- Pravé tlačítko Pad: 2vw (desktop), 7vw (tablet a telefon)
vzdálenost
Použijte vlastní hodnoty odsazení na různých velikostech obrazovky.
- Špičková vnitřní výška: 4vw (desktop), 6vw (tablet a telefon)
- Spodní vnitřní okraj: 4vw (stolní počítač), 6vw (tablet a telefon)
- Levý vnitřní okraj: 2vw (stolní počítač), 6vw (tablet a telefon)
- Pravý vnitřní okraj: 2vw (stolní počítač), 6vw (tablet a telefon)
Hranice
Poté změňte nastavení ohraničení.
- Vstupní zaoblený obdélník: 10px
Hlavní prvek, název kontaktu a captcha CSS
Dokončete nastavení modulu přidáním několika malých změn CSS na kartu Upřesnit.
Hlavní prvek:
01 | border-radius : 20px ; |
Název Kontakt :
01 | margin-bottom : 1 vw; |
captcha:
01 | margin-top : 1.5 vw; |
Přizpůsobte prvky a vytvořte kontaktní formulář jedním kliknutím
Přidejte výšku sloupce 3
Jakmile máte všechny moduly na svém místě, je čas vytvořit efekt. Prvním krokem k dosažení požadovaného výsledku je otevřít nastavení 3 sloupců a přidat vlastní responzivní výšku na kartě Upřesnit.
Lavice :
01 | height : 3 vw; |
tablet:
01 | height : 5 vw; |
Volání:
01 | height : 6 vw; |
Přidejte do tlačítka a šipky třídu CSS
Dále 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ího formuláře.
- CSS třída: contact-form-module
Skrýt modul kontaktního formuláře
Pokračujte přidáním dalšího řádku kódu CSS do hlavního prvku modulu kontaktního formuláře. To nám umožní skrýt modul před kliknutím.
01 | display : none ; |
Přidejte modul kódu do sloupce 3 pomocí kódu JQuery a CSS
A abychom vytvořili funkci kliknutí, budeme potřebovat kód JQuery. Použijeme také vlastní CSS kód. Přidejte nový modul kódu 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 naposledy podívat na výsledek.
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak přidat rozevírací kontaktní formulář do vlastního záhlaví.
Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.