Potreba kombinovať vložené polia a polia s plnou šírkou modulu Kontaktný formulár z divi ?
Kontaktný formulár je dôležitým prvkom, ktorý musíte zahrnúť na svoju webovú stránku, ak chcete zachytiť e-maily a premeniť návštevníkov na zákazníkov.
Modul kontaktného formulára divi Dá sa jednoducho prispôsobiť na vytvorenie atraktívnych a pútavých kontaktných formulárov pre všetky typy webových stránok. Tento modul ponúka dve možnosti zobrazenia, ktoré je možné použiť pre každé pole formulára: en ligne ou plná šírka.
V tomto návode si ukážeme štyri jedinečné možnosti rozloženia vášho kontaktného formulára Divi pomocou vložených polí a polí na celú šírku.
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 na svojej webovej stránke máte najnovšiu verziu Divi.
Teraz ste pripravení začať!
4 príklady rozloženia pre modul kontaktného formulára Divi s použitím vložených a plnošírkových polí
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 svoju webovú stránku novú stránku, zadajte jej názov a potom vyberte požadovanú 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 sekcie vyššie, tesne pod riadok s modulmi Blurb. Potom môžete odstrániť 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
Ďalej v nastaveniach kontaktného formulára zmeňte poradie predmetu a telefónneho čísla tak, aby sa telefónne číslo zobrazovalo 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 upravme niekoľko nastavení, aby sme dokončili dizajn. Prejdite na kartu Dizajn 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 elementu na vertikálne zarovnanie modulov Blurb a Contact Form.
align-items:center;
Teraz musíme odstrániť tenký okraj medzi stĺpcami. Otvorte nastavenia riadka a potom nastavenia pre stĺpec 1. Na karte Návrh prejdite na nastavenia okraja a odstráňte okraj.
- Šírka pravého okraja: 0px
Potom otvorte nastavenia stĺpca 2 a zopakujte kroky na odstránenie orámovania.
- Šírka pravého okraja: 0px
Nastavte text „Kontaktujte nás“ na stred.
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ón a objekt tak, aby telefónne číslo bolo pred objektom.
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 riadka a potom nastavenia stĺpca 2. Nastavte farbu pozadia.
- Pozadie: #DBC2B3
V nastaveniach pre stĺpec 2 prejdite na kartu Návrh a pridajte odsadenie.
- Výplň (hore, dole, vľavo a vpravo: 50 pixelov
Vyberte ikonu mobilného zariadenia a upravte nastavenia responzívneho zobrazenia. Nastavte odsadenie pre mobilné zariadenia.
- 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 vymažte zostávajúci prázdny riadok.
Presuňte modul Kontaktný formulár do ľavého stĺpca pod textový modul „Kontaktujte nás“. Zvyšnú prázdnu sekciu vymažte.
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 elementu na vertikálne zarovnanie modulov Blurb a Contact Form.
align-items:center;
Otvorte nastavenia riadka a potom nastavenia pre stĺpec 1. Na karte Návrh prejdite na nastavenia orámovania a odstráňte orámovanie. Zopakujte tieto kroky, ak chcete odstrániť orámovanie zo stĺpca 2.
- Šírka pravého okraja: 0px
Zmena rozloženia kontaktného formulára
Šírky polí ponecháme tak, ako sú pre tretí návrh; otvorte však nastavenia kontaktného formulára a zmeňte poradie telefónneho čísla a predmetu správy tak, aby telefónne číslo bolo prvé.
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 riadku, prejdite na kartu 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 elementu na vertikálne zarovnanie modulov Blurb a Contact Form.
align-items:center;
Otvorte nastavenia riadka a potom nastavenia pre stĺpec 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 text vycentrujte.
- Zarovnanie textu: na stred
Zmenené rozloženie kontaktného formulára s vloženými poľami a poliami s plnou šírkou
V tomto dizajne budú všetky naše polia na celú šírku. Otvorte nastavenia modulu Kontaktný formulár a potom otvorte nastavenia pre každé pole. Na karte Dizajn 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ón a objekt tak, aby telefónne číslo bolo pred objektom.
Prispôsobenie dizajnu modulu Kontaktný formulár
V nastaveniach modulu, na karte Návrh, nastavte farbu textu polí 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 lepšie fungovala na mobilných zariadeniach, použite 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 ešte raz na všetky naše príklady.
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 ukázali v tomto článku, môžete použiť možnosti vložených polí a polí na celú šírku na vytvorenie rôznych vzhľadov a rozložení formulára a vstavané možnosti dizajnu Divi vám umožňujú vytvárať jedinečné a atraktívne dizajny, 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.
...