Je potrebné skombinovať vložené polia a polia s plnou šírkou modulu Kontaktný formulár de divi ?
Le Kontaktný formulár je dôležitým prvkom, ktorý by ste mali zahrnúť na svoje webové stránky, ak chcete zachytiť e-maily a premeniť návštevníkov na zákazníkov.
Modul Kontaktný formulár de divi možno ľahko prispôsobiť na vytvorenie formuláre atraktívne a podmanivé karty kontaktov pre všetky typy webových stránok. Tento modul sa dodáva s dvoma možnosťami zobrazenia, ktoré možno použiť na každé pole formulára: en ligne ou plná šírka.
V tomto návode vám predstavíme štyri jedinečné možnosti rozloženia Kontaktný formulár Divi pomocou inline polí a polí s plnou šírkou.
Začnime!
prehľad
Tu je ukážka toho, čo budeme navrhovať.
Prvé rozloženie
Druhé rozloženie
Tretie rozloženie
Štvrté rozloženie
Čo potrebujete, aby ste začali
Než začneme, nainštalujte a aktivujte tému Divi a uistite sa, že máte na svojom webe najnovšiu verziu Divi.
Teraz ste pripravení začať!
4 vzorové rozloženia pre modul Kontaktného formulára Divi pomocou vložených polí a polí s plnou šírkou
Vyberte preddefinované rozloženie
Každá zo 4 šablón je upravená z rozloženia kontaktnej stránky na opravu obuvi Balík rozloženia na opravu obuvi, ktorú nájdete v Divi knižnici.
Pridajte na svoj web novú stránku, pomenujte ju a potom vyberte možnosť Použite Divi Builder.
V tomto príklade použijeme vopred pripravené rozloženie z knižnice Divi, takže vyberte Prehľadávať rozloženia.
Nájdite a vyberte rozloženie kontaktnej stránky na opravu obuvi.
vybrať Použite toto rozloženie pridajte rozloženie na svoju stránku.
Teraz sme pripravení navrhnúť naše príklady.
Prvé rozloženie
Najprv presuňte riadok obsahujúci modul Kontaktný formulár do časti vyššie, tesne pod čiaru s modulmi Blurb. Potom môžete vymazať zostávajúcu prázdnu sekciu.
Otvorte nastavenia linky a pridajte ľavé a pravé vypchávky,
- Výplň (vľavo a vpravo): 15 %
Vyberte responzívne možnosti a nastavte výplň pre mobil.
- Výplň (vľavo a vpravo): 5 %
Zmenené rozloženie kontaktného formulára s vloženými poľami a poliami s plnou šírkou
Pre toto rozloženie vytvoríme dve samostatné polia pre meno a priezvisko.
Otvorte nastavenia modulu Kontaktný formulár a zmeňte pole ID a Titul pre pole Priezvisko na Krstné meno.
Pridajte nové pole pod pole Krstné meno. Nastavte pole ID a Názov na Názov.
V nastaveniach poľa názvu otvorte nastavenia rozloženia a nastavte možnosť Make Fullwidth na Nie.
- Urobiť na plnú šírku: NIE
Potom v nastaveniach Kontaktný formulár, zmeňte poradie predmetu a telefónu tak, aby bol telefón uvedený pred predmetom.
Otvorte nastavenia rozloženia poľa Predmet a nastavte pole na celú šírku.
- Urobiť celú šírku: ÁNO
Prispôsobenie dizajnu kontaktného formulára
Teraz poďme zmeniť niekoľko nastavení, aby sme dokončili dizajn. Prejdite na kartu Návrh v nastaveniach modulu Kontaktný formulár.
Najprv zmeňte farbu pozadia tlačidla.
- Pozadie tlačidla: #DBC2B3
Pridajte k tlačidlu horný okraj.
- Okraj tlačidla (hore): 10 pixelov
Nakoniec prejdite na nastavenia okrajov a pridajte zaoblené rohy do polí.
- Vstupy so zaoblenými rohmi: 30px
Pozri tiež: Divi: Ako pridať responzívne logo do modulu „Ponuka plnej šírky“.
Konečný výsledok príkladu 1
Tu je konečný výsledok pre počítače a mobilné zariadenia.
Druhý príklad
V našom druhom príklade presunieme moduly Blurb na ľavú stranu stránky a kontaktný formulár umiestnime na pravú stranu stránky. Presuňte moduly Blurb do stĺpca.
Zmeňte rozloženie riadkov.
Otvorte nastavenia dizajnu čiar a vypnite ich Použiť vlastnú šírku odkvapu.
- Použiť vlastnú šírku odkvapu: NIE
Pridajte kód do vlastného CSS hlavného prvku, aby ste vertikálne zarovnali moduly Blurb a Contact Form.
align-items:center;
Teraz musíme odstrániť tenkú hranicu medzi stĺpcami. Otvoriť nastavenia riadkov a potom otvoriť nastavenia stĺpcov 1. Na karte Návrh prejdite na nastavenia orámovania a odstráňte orámovanie.
- Šírka pravého okraja: 0px
Potom otvorte nastavenia stĺpca 2 a zopakujte kroky na odstránenie orámovania.
- Šírka pravého okraja: 0px
Text „Kontaktujte nás“ nastavte tak, aby bol vycentrovaný.
Presuňte kontaktný formulár do pravého stĺpca. Odstráňte zostávajúcu prázdnu sekciu.
Zmenené rozloženie kontaktného formulára s vloženými poľami a poliami s plnou šírkou
Toto rozloženie bude mať aj dve samostatné polia pre meno a priezvisko. Otvorte nastavenia modulu Kontaktný formulár a zmeňte pole ID a Titul pre pole Priezvisko na Krstné meno.
Pridajte nové pole pod pole Krstné meno. Nastavte pole ID a Názov na Názov.
V nastaveniach poľa názvu otvorte nastavenia rozloženia a nastavte možnosť Make Fullwidth na Nie.
- Urobiť na plnú šírku: NIE
Zmeňte poradie polí telefónu a predmetu tak, aby bol telefón pred predmetom.
Otvorte nastavenia poľa pre E-mail, Telefón a Predmet a nastavte rozloženie na celú šírku.
- Urobiť celú šírku: ÁNO
Prispôsobenie dizajnu kontaktného formulára
Otvorte nastavenia riadkov, potom otvorte nastavenia stĺpcov 2. Nastavte farbu pozadia.
- Pozadie: #DBC2B3
V nastaveniach stĺpca 2 prejdite na kartu Návrh a pridajte výplň.
- Výplň (hore, dole, vľavo a vpravo: 50 pixelov
Ak chcete zmeniť nastavenia odozvy, vyberte ikonu mobilu. Nastaviť výplň pre mobil.
- Výplň (hore, dole, vľavo a vpravo): 30 pixelov
Potom pridajte tieň boxu do stĺpca.
Nakoniec otvorte nastavenia modulu Kontaktný formulár a zmeňte farbu textu poľa.
- Farba textu polí: #000000
Konečný výsledok príkladu 2
Tu je konečný výsledok druhého rozloženia.
Tretí príklad
Pri treťom rozložení budeme mať kontaktný formulár vľavo a moduly Blurb vpravo. Začnime zmenou stĺpcovej štruktúry riadku obsahujúceho moduly Blurb.
Presuňte modul adresy do pravého stĺpca.
Potom presuňte textový modul „Kontaktujte nás“ do ľavého stĺpca a potom odstráňte zostávajúci prázdny riadok.
Presuňte modul kontaktného formulára do ľavého stĺpca pod textovým modulom „Kontaktujte nás“. Odstráňte zostávajúcu prázdnu sekciu.
Otvorte nastavenia čiary na karte Návrh a vypnite ju Použiť vlastnú šírku odkvapu
- Použiť vlastnú šírku odkvapu: NIE
Pridajte kód do vlastného CSS hlavného prvku, aby ste vertikálne zarovnali moduly Blurb a Contact Form.
align-items:center;
Otvoriť nastavenia riadkov a potom otvoriť nastavenia stĺpcov 1. Na karte Návrh prejdite na nastavenia orámovania a odstráňte orámovanie. Opakujte kroky na odstránenie orámovania zo stĺpca 2.
- Šírka pravého okraja: 0px
Zmena rozloženia kontaktného formulára
Šírky polí pri treťom návrhu ponecháme tak, ako sú, otvorte si však nastavenia kontaktného formulára a zmeňte poradie poľa telefónneho čísla a predmetu tak, aby bol telefón na prvom mieste.
Konečný výsledok príkladu 3
Tu je konečný výsledok tretieho rozloženia.
Čítajte tiež: Divi: Ako zobraziť modul Fullwidth Header na celej obrazovke
Štvrtý príklad
Pre štvrté a posledné rozloženie bude modul Kontaktný formulár vľavo a moduly Blurb vpravo. Opäť začneme zmenou stĺpcovej štruktúry riadku obsahujúceho moduly Blurb.
Presuňte modul adresy do pravého stĺpca.
Potom presuňte modul Kontaktný formulár do ľavého stĺpca. Odstráňte zostávajúcu prázdnu sekciu.
Otvorte nastavenia čiary na karte Návrh a vypnite ich Použiť vlastnú šírku odkvapu.
- Použiť vlastnú šírku odkvapu: NIE
Pridajte kód do vlastného CSS hlavného prvku, aby ste vertikálne zarovnali moduly Blurb a Contact Form.
align-items:center;
Otvoriť nastavenia riadkov a potom otvoriť nastavenia stĺpcov 1. Na karte Návrh prejdite na nastavenia orámovania a odstráňte orámovanie.
- Šírka pravého okraja: 0px
Potom otvorte nastavenia stĺpca 2 a zopakujte kroky na odstránenie orámovania.
- Šírka pravého okraja: 0px
Otvorte nastavenia modulu Text pre text „Kontaktujte nás“ a vycentrujte text.
- Zarovnanie textu: na stred
Zmenené rozloženie kontaktného formulára s vloženými poľami a poliami s plnou šírkou
Pre tento dizajn budú všetky naše polia v plnej šírke. Otvorte nastavenia modulu Kontaktný formulár a potom otvorte nastavenia pre každé pole. Na karte Návrh vyberte Dispozícia a definovať Urobiť Plnú šírku sur ÁNO.
Po vytvorení každého poľa plnej šírky by formulár mal vyzerať takto.
Teraz zmeňte pole ID a Titul pre pole Priezvisko na Krstné meno.
Pridajte nové pole pod pole Krstné meno. Nastavte pole ID a Názov na Názov.
Zmeňte poradie polí telefónu a predmetu tak, aby bol telefón pred predmetom.
Prispôsobenie dizajnu modulu Kontaktný formulár
V nastaveniach modulu na karte Návrh nastavte farbu textu poľa na čiernu.
- Farba textu polí: #000000
Otvorte nastavenia sekcie a pridajte farbu pozadia.
- Pozadie: #DBC2B3
Nakoniec pridajte masku pozadia.
- Maska pozadia: Arch
- Transformácia masky: horizontálna
Aby maska pozadia fungovala lepšie na mobile, použime responzívne nastavenia.
- Transformácia masky (telefón): horizontálna a rotácia
Konečný výsledok
Tu je konečný výsledok štvrtého rozloženia.
Konečné výsledky
Pozrime sa na všetky naše príklady ešte raz.
Prvý príklad
Druhý príklad
Tretí príklad
Štvrtý príklad
Stiahnite si DIVI teraz!!!
záver
Atraktívny kontaktný formulár môže zvýšiť vaše konverzie a umožniť vašim návštevníkom spojiť sa priamo s vami.
Ako sme demonštrovali v tomto článku, môžete použiť možnosti inline a plnej šírky na vytvorenie rôznych vzhľadov a rozložení pre váš formulár a vstavané možnosti dizajnu Divi vám umožňujú vytvárať jedinečné a atraktívne návrhy, ktoré pomôžu formuláru vyniknúť.
Dúfajme, že táto technika pridá ďalšiu užitočnú dizajnérsku zručnosť pre budúce projekty.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
