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.

přidat kontaktní formulář do globální hlavičky v divi

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řidat kontaktní formulář do globální hlavičky v divi

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
přidat kontaktní formulář do globální hlavičky

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
přidat kontaktní formulář do globální hlavičky

dimenzování

Poté upravte parametry pro dimenzování modulu.

  • Maximální šířka: 33%
  • Zarovnání modulu: Střed
přidat kontaktní formulář do globální hlavičky

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)
přidat kontaktní formulář do globální hlavičky

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: '▼'.

přidat kontaktní formulář do globální hlavičky

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
přidat kontaktní formulář do globální hlavičky

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:

01border-radius: 20px;

Název Kontakt :

01margin-bottom: 1vw;

captcha:

01margin-top: 1.5vw;

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 :

01height: 3vw;

tablet:

01height: 5vw;

Volání:

01height: 6vw;

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.

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.

01display: 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.

přidat kontaktní formulář do globální hlavičky v divi

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.