Vytváříme horizontální formulář pro odběr novinek
Publikováno 15. 11. 2019
V kategorii Divi moduly
Použité štítky: CSS, modul odběr novinek

Šablona Divi obsahuje ve svém builderu možnost vložení formuláře pro přihlášení k odběru novinek, nicméně její možnosti nejsou neomezené a někdy můžete z nejrůznějších důvodů potřebovat, aby formulář trochu ubral na svém objemu. Standardně máte možnost vlevo a nebo vpravo vloženého textu a na opačné straně pak polí pro informace nutné k doručení newsletteru.

Samotné vložení modulu formuláře by nám vytvořilo něco podobného jako na obrázku a to my nepotřebujeme.

My si ukážeme, jak to všechno změnit a vytvořit formulář, který nám zabere vlastně jen jeden řádek.

Nejprve si vytvoříme sekci s jedním řádkem rozděleným na dvě části, kdy vlevo bude část velká 1/3 a na pravé straně 2/3. Do levého sloupečku vložíme textový modul a do pravého modul pro přihlášení k odběru novinek.

Pro vloženou sekci provedeme nastavení dle následující tabulky.

ObsahDesignPokročilé
Pozadí: zadáme barvu, v případě ukázky to je #29c4a9Rozestupy, vnitřní odsazení: 0 0 0 0bez úprav

Následuje nastavení řádku a to je následující:

ObsahDesignPokročilé
bez úpravRozestupy, vnitřní odsazení:
nahoře 10px
dole 9px
vlevo 0
vpravo 0
CSS třída pro levý sloupec: horizontal_optin_column_1

Přejdeme k dalšímu kroku a to k nastavení textového modulu v levém sloupci.

ObsahDesignPokročilé
Tělo textu: podle potřeby, v ukázce např. "S prezentovanou úpravou"Nadpis: H3bez úprav
Text v těle textu nastavíme jako h3Nadpis tloušťka písma: tučné
Nadpis barva textu: #ffffff
Rozestupy, vnější odsazení nahoře: 5px

A nakonec nastavíme modul odběru novinek v pravém sloupečku.

ObsahDesignPokročilé
Emailový účet: nastavíme podle potřebRozložení: text dole, formulář nahoře CSS třída: custom_emailoptin
Pole: ponecháme zaškrtnuté pouze pole jménoRozložení: jméno přes celou šířku: NE
Pozadí: položku Použít barvu pozadí nastavíme na NERozložení: email přes celou šířku: NE
Tlačítko: použít vlastní styly pro tlačítko: ANO
Tlačítko: Velikost textu: 16px
Tlačítko: barva textu #ffffff
Tlačítko: barva pozadí #061f5c
Tlačítko: šířka rámečku 0px
Tlačítko: radius rámeřku 0px
Tlačítko: styl písma: velká písmena (druhá volba zleva)
Rozestupy: vnitřní 0 0 0 0

Nyní můžeme vše uložit a přejít k nastavení šablony, kde bude třeba upravit CSS. Do části Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS, vložíme následující CSS:

/*** Horizontalni formular pro newsletter - Zabza.eu ***/

@media (min-width: 981px) {
.custom_emailoptin .et_pb_newsletter_form .et_pb_contact_field_half {
    flex-basis: 30%;
 }

.custom_emailoptin .et_pb_newsletter_fields>* {
    flex-basis: 30%;
}

.custom_emailoptin.et_pb_newsletter_layout_bottom_top .et_pb_newsletter_form {
    padding-bottom: 0px;
}

.custom_emailoptin p.et_pb_newsletter_field {
    padding-bottom: 0px;
}

.custom_emailoptin .et_pb_newsletter_button_wrap {
	margin-top: 0px;
}

.custom_emailoptin .et_pb_newsletter_form .input,
.custom_emailoptin .et_pb_newsletter_form input[type=text], .custom_emailoptin .et_pb_newsletter_form p.et_pb_newsletter_field input[type=text] {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
}}

.custom_emailoptin .et_pb_newsletter_description,
.custom_emailoptin .et_pb_newsletter_footer {
    display: none;
}

@media (max-width: 980px) {
.horizontal_optin_column_1 {
	margin-bottom: 0px !important;
}}

A máme hotovo. Porovnat modul odběru novinek bez a s uvedenou úpravou můžete v ukázce.

DEMO

0 komentářů

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nejnovější příspěvky

Buďte v obraze

Jednou za týden, zpravidla v neděli v dopoledních hodinách, vám pošleme přehled nových článků.
S vašimi daty nakládáme maximálně zopodvědně a uchováváme je v bezpečí. Slouží výhradně k zasílání novinek z našeho webu.

Buďte jednoduše v obraze

Jednou týdně vám pošleme přehled nových článků abyste nemuseli nic hledat a měli všechno najednou pohromadě. Stačí jen vložit email, odeslat a potvrdit ve zprávě kterou vám obratem zašleme odběr novinek.

Přihlášení k odběru novinek proběhlo v pořádku.

Sdílet na Pinterestu

Sdílej