Je třeba zkombinovat vložená pole a pole plné šířky modulu Kontaktní formulář de divi ?
Le kontaktní formulář je důležitým prvkem, který byste měli zahrnout na svůj web, pokud chcete zachytit e-maily a přeměnit své návštěvníky na zákazníky.
Modul Kontaktní formulář de divi lze snadno přizpůsobit k vytvoření formuláře atraktivní a podmanivé kontaktní karty pro všechny typy webových stránek. Tento modul je dodáván se dvěma možnostmi zobrazení, které lze použít pro každé pole formuláře: en ligne ou plná šířka.
V tomto tutoriálu vám představíme čtyři jedinečné možnosti rozvržení kontaktní formulář Divi pomocí vložených polí a polí s plnou šířkou.
Začněme!
přehled
Zde je náhled toho, co budeme navrhovat.
První rozložení
Druhé rozložení
Třetí rozložení
Čtvrté rozložení
Co potřebujete, abyste mohli začít
Než začneme, nainstalovat a aktivovat téma Divi a ujistěte se, že máte na svém webu nejnovější verzi Divi.
Nyní jste připraveni začít!
4 ukázkové rozvržení pro modul Kontaktního formuláře Divi pomocí vložených polí a polí s plnou šířkou
Vyberte předdefinované rozvržení
Každá ze 4 šablon je upravena z rozvržení kontaktní stránky na opravu obuvi Balíček rozložení na opravu obuvi, kterou najdete v Divi Library.
Přidejte na svůj web novou stránku, pojmenujte ji a poté vyberte možnost Použijte Divi Builder.
Pro tento příklad použijeme předem připravené rozvržení z Divi Library, takže vyberte Procházet rozvržení.
Najděte a vyberte rozvržení stránky kontaktu na opravu obuvi.
vybrat Použijte toto rozvržení přidat rozvržení na stránku.
Nyní jsme připraveni navrhnout naše příklady.
První rozložení
Nejprve přesuňte řádek obsahující modul Kontaktní formulář k části výše, těsně pod čarou s moduly Blurb. Poté můžete smazat zbývající prázdnou sekci.
Otevřete nastavení linky a přidejte levé a pravé odsazení,
- Polstrování (vlevo a vpravo): 15 %
Vyberte responzivní možnosti a nastavte odsazení pro mobily.
- Polstrování (vlevo a vpravo): 5 %
Změněno rozložení kontaktního formuláře s vloženými poli a poli v plné šířce
Pro toto rozložení vytvoříme dvě samostatná pole pro jméno a příjmení.
Otevřete nastavení modulu Kontaktní formulář a změňte pole ID a Titul pro pole Příjmení na Křestní jméno.
Přidejte nové pole pod pole Křestní jméno. Nastavte pole ID a Název na Název.
V nastavení pole názvu otevřete nastavení rozvržení a nastavte možnost Make Fullwidth na Ne.
- Udělat plnou šířku: NE
Poté v nastavení kontaktní formulář, změňte pořadí předmětu a telefonu tak, aby byl telefon uveden před předmětem.
Otevřete nastavení rozvržení pole Předmět a nastavte pole na celou šířku.
- Vytvořit plnou šířku: ANO
Přizpůsobení designu kontaktního formuláře
Nyní změňme několik nastavení, abychom dokončili návrh. Přejděte na kartu Návrh v nastavení modulu Kontaktní formulář.
Nejprve změňte barvu pozadí tlačítka.
- Pozadí tlačítka: #DBC2B3
Přidejte k tlačítku horní okraj.
- Okraj tlačítka (nahoře): 10 pixelů
Nakonec přejděte do nastavení ohraničení a přidejte do polí zaoblené rohy.
- Vstupy Zaoblené rohy: 30px
Viz také: Divi: Jak přidat responzivní logo do modulu "Fullwidth Menu".
Konečný výsledek příkladu 1
Zde je konečný výsledek na počítači a mobilu.
Druhý příklad
V našem druhém příkladu přesuneme moduly Blurb na levou stranu stránky a kontaktní formulář umístíme na pravou stranu stránky. Přesuňte moduly Blurb do sloupce.
Změňte rozložení řádků.
Otevřete nastavení návrhu čar a vypněte Použijte vlastní šířku okapu.
- Použít vlastní šířku okapu: NE
Přidejte kód do vlastního CSS hlavního prvku, abyste svisle zarovnali moduly Blurb a Contact Form.
align-items:center;
Nyní musíme odstranit tenkou hranici mezi sloupci. Otevřete nastavení řádků a poté otevřete nastavení sloupců 1. Na kartě Návrh přejděte na nastavení ohraničení a odstraňte ohraničení.
- Šířka pravého okraje: 0px
Dále otevřete nastavení sloupce 2 a opakujte kroky k odstranění ohraničení.
- Šířka pravého okraje: 0px
Nastavte text "Kontaktujte nás" tak, aby byl vycentrován.
Přesuňte kontaktní formulář do pravého sloupce. Odstraňte zbývající prázdnou sekci.
Změněno rozložení kontaktního formuláře s vloženými poli a poli v plné šířce
Toto rozložení bude mít také dvě samostatná pole pro jméno a příjmení. Otevřete nastavení modulu Kontaktní formulář a změňte pole ID a Titul pro pole Příjmení na Křestní jméno.
Přidejte nové pole pod pole Křestní jméno. Nastavte pole ID a Název na Název.
V nastavení pole názvu otevřete nastavení rozvržení a nastavte možnost Make Fullwidth na Ne.
- Udělat plnou šířku: NE
Změňte pořadí polí telefonu a předmětu tak, aby telefon předcházel předmětu.
Otevřete nastavení pole pro E-mail, Telefon a Předmět a nastavte rozvržení na plnou šířku.
- Vytvořit plnou šířku: ANO
Přizpůsobení designu kontaktního formuláře
Otevřete nastavení řádků, poté otevřete nastavení sloupců 2. Nastavte barvu pozadí.
- Pozadí: #DBC2B3
V nastavení sloupce 2 přejděte na kartu Návrh a přidejte výplň.
- Výplň (nahoře, dole, vlevo a vpravo: 50px
Chcete-li změnit responzivní nastavení, vyberte ikonu mobilu. Nastavit polstrování pro mobil.
- Výplň (nahoře, dole, vlevo a vpravo): 30 pixelů
Poté přidejte do sloupce stín krabice.
Nakonec otevřete nastavení modulu Kontaktní formulář a změňte barvu textu pole.
- Barva textu polí: #000000
Konečný výsledek příkladu 2
Zde je konečný výsledek druhého rozložení.
Třetí příklad
Pro třetí rozložení budeme mít kontaktní formulář vlevo a moduly Blurb vpravo. Začněme změnou sloupcové struktury řádku obsahujícího moduly Blurb.
Přesuňte modul adresy do pravého sloupce.
Dále přesuňte textový modul „Kontaktujte nás“ do levého sloupce a poté odstraňte zbývající prázdný řádek.
Přesuňte modul kontaktního formuláře do levého sloupce pod textový modul „Kontaktujte nás“. Odstraňte zbývající prázdnou sekci.
Otevřete nastavení čáry na kartě Návrh a vypněte Použijte vlastní šířku okapu
- Použít vlastní šířku okapu: NE
Přidejte kód do vlastního CSS hlavního prvku, abyste svisle zarovnali moduly Blurb a Contact Form.
align-items:center;
Otevřete nastavení řádků a poté otevřete nastavení sloupců 1. Na kartě Návrh přejděte na nastavení ohraničení a odstraňte ohraničení. Opakujte kroky pro odstranění ohraničení ze sloupce 2.
- Šířka pravého okraje: 0px
Změna vzhledu kontaktního formuláře
U třetího návrhu necháme šířky polí tak, jak jsou, nicméně otevřete nastavení kontaktního formuláře a změňte pořadí pole telefonní číslo a předmět tak, aby byl telefon na prvním místě.
Konečný výsledek příkladu 3
Zde je konečný výsledek třetího rozložení.
Čtěte také: Divi: Jak zobrazit modul Fullwidth Header na celou obrazovku
Čtvrtý příklad
U čtvrtého a posledního rozvržení bude modul Kontaktní formulář vlevo a moduly Blurb vpravo. Opět začneme změnou sloupcové struktury řádku obsahujícího moduly Blurb.
Přesuňte modul adresy do pravého sloupce.
Dále přesuňte modul Kontaktní formulář do levého sloupce. Odstraňte zbývající prázdnou sekci.
Otevřete nastavení čáry na kartě Návrh a deaktivujte Použijte vlastní šířku okapu.
- Použít vlastní šířku okapu: NE
Přidejte kód do vlastního CSS hlavního prvku, abyste svisle zarovnali moduly Blurb a Contact Form.
align-items:center;
Otevřete nastavení řádků a poté otevřete nastavení sloupců 1. Na kartě Návrh přejděte na nastavení ohraničení a odstraňte ohraničení.
- Šířka pravého okraje: 0px
Dále otevřete nastavení sloupce 2 a opakujte kroky k odstranění ohraničení.
- Šířka pravého okraje: 0px
Otevřete nastavení modulu Text pro text „Kontaktujte nás“ a text vycentrujte.
- Zarovnání textu: Na střed
Změněno rozložení kontaktního formuláře s vloženými poli a poli v plné šířce
U tohoto návrhu budou všechna naše pole v plné šířce. Otevřete nastavení modulu kontaktního formuláře a poté otevřete nastavení pro každé pole. Na kartě Návrh vyberte Nákres a definovat Udělat plnou šířku z ANO.
Jakmile vytvoříte každé pole plné šířky, formulář by měl vypadat takto.
Nyní změňte pole ID a Titul pro pole Příjmení na Křestní jméno.
Přidejte nové pole pod pole Křestní jméno. Nastavte pole ID a Název na Název.
Změňte pořadí polí telefonu a předmětu tak, aby telefon předcházel předmětu.
Přizpůsobení návrhu modulu Kontaktního formuláře
V nastavení modulu na kartě Návrh nastavte barvu textu pole na černou.
- Barva textu polí: #000000
Otevřete nastavení sekce a přidejte barvu pozadí.
- Pozadí: #DBC2B3
Nakonec přidejte masku pozadí.
- Maska pozadí: Arch
- Transformace masky: horizontální
Aby maska pozadí fungovala lépe na mobilu, použijme responzivní nastavení.
- Transformace masky (telefon): horizontální a rotace
Konečný výsledek
Zde je konečný výsledek čtvrtého rozložení.
Konečné výsledky
Podívejme se na všechny naše příklady ještě jednou.
První příklad
Druhý příklad
Třetí příklad
Čtvrtý příklad
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Atraktivní kontaktní formulář může zvýšit vaše konverze a umožnit vašim návštěvníkům spojit se přímo s vámi.
Jak jsme si ukázali v tomto článku, můžete použít možnosti inline a fullwidth field k vytvoření různých vzhledů a rozvržení pro váš formulář a vestavěné možnosti designu Divi vám umožňují vytvářet jedinečné designy a atraktivní, aby pomohly formuláři vyniknout.
Doufejme, že tato technika přidá další užitečnou designovou dovednost pro budoucí projekty.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
