Š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.
| Obsah | Design | Pokročilé |
|---|---|---|
| Pozadí: zadáme barvu, v případě ukázky to je #29c4a9 | Rozestupy, vnitřní odsazení: 0 0 0 0 | bez úprav |
Následuje nastavení řádku a to je následující:
| Obsah | Design | Pokročilé |
|---|---|---|
| bez úprav | Rozestupy, 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.
| Obsah | Design | Pokročilé |
|---|---|---|
| Tělo textu: podle potřeby, v ukázce např. "S prezentovanou úpravou" | Nadpis: H3 | bez úprav |
| Text v těle textu nastavíme jako h3 | Nadpis 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.
| Obsah | Design | Pokročilé |
|---|---|---|
| Emailový účet: nastavíme podle potřeb | Rozložení: text dole, formulář nahoře | CSS třída: custom_emailoptin |
| Pole: ponecháme zaškrtnuté pouze pole jméno | Rozložení: jméno přes celou šířku: NE | |
| Pozadí: položku Použít barvu pozadí nastavíme na NE | Rozlož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ářů