A Kapcsolatfelvételi űrlap modul beágyazott mezőinek és teljes szélességű mezőinek kombinálására van szükség. Divi ?
A kapcsolatfelvételi űrlap fontos elem a weboldaladon, ha e-maileket szeretnél gyűjteni és a látogatókat vásárlókká konvertálni.
A Kapcsolatfelvételi űrlap modul Divi Könnyen testreszabható, így vonzó és lebilincselő kapcsolatfelvételi űrlapokat hozhat létre minden típusú weboldalhoz. Ez a modul két megjelenítési beállítással rendelkezik, amelyek minden űrlapmezőre alkalmazhatók: en Ligne ou teljes szélességű.
Ebben az oktatóanyagban négy egyedi elrendezési lehetőséget mutatunk be a Divi kapcsolatfelvételi űrlapodhoz, beágyazott és teljes szélességű mezők használatával.
Kezdjük!
felmérés
Íme egy előnézet arról, hogy mit fogunk tervezni.
Első elrendezés
Második elrendezés
Harmadik elrendezés
Negyedik elrendezés
Mit kell elkezdeni
Mielőtt elkezdenénk, telepítse és aktiválja a Divi témát és győződj meg róla, hogy a Divi legújabb verziója van a weboldaladon.
Most már készen áll a kezdésre!
4 elrendezési példa a Divi Kapcsolatfelvételi Űrlap modulhoz beágyazott és teljes szélességű mezők használatával
Válassza ki az előre meghatározott elrendezést
A 4 sablon mindegyike a cipőjavítási kapcsolattartó oldal elrendezéséből módosult Cipőjavító elrendezési csomag, amelyet a Divi Könyvtárban találhat meg.
Adj hozzá egy új oldalt a webhelyedhez, adj neki címet, majd válaszd a lehetőséget Használja a Divi Builder alkalmazást.
Ebben a példában a Divi könyvtárból előre elkészített elrendezést fogunk használni, ezért válassza ki Böngésszen az elrendezések között.
Keresse meg és válassza ki a Cipőjavítás kapcsolati oldalának elrendezését.
választ Használja ezt az elrendezést az elrendezés hozzáadásához az oldalához.
Most már készen állunk a példáink megtervezésére.
Első elrendezés
Először is helyezd át a Kapcsolatfelvételi űrlap modult tartalmazó sort a fenti szakaszba, közvetlenül a Blurb modulokat tartalmazó sor alá. Ezután törölheted a fennmaradó üres szakaszt.
Nyissa meg a sorbeállításokat, és adjon hozzá bal és jobb oldali kitöltést,
- Kitöltés (bal és jobb): 15%
Válassza ki a reszponzív beállításokat, és állítsa be a kitöltést a mobilhoz.
- Kitöltés (bal és jobb): 5%
Megváltozott a kapcsolatfelvételi űrlap elrendezése soros és teljes szélességű mezőkkel
Ehhez az elrendezéshez két külön mezőt hozunk létre a keresztnév és a vezetéknév számára.
Nyissa meg a Kapcsolatfelvételi űrlap modul beállításait, és módosítsa a Vezetéknév mező Azonosító és Cím mezőjét Keresztnévre.
Adjon hozzá egy új mezőt a Keresztnév mező alá. Állítsa az ID és Title mezőt Név értékre.
A névmező beállításainál nyissa meg az elrendezés beállításait, és állítsa a Make Fullwidth beállítást Nem értékre.
- Teljes szélesség: NEM
Ezután a kapcsolatfelvételi űrlap beállításai alatt módosítsa a tárgy és a telefonszám sorrendjét úgy, hogy a telefonszám a tárgy előtt szerepeljen.
Nyissa meg a Tárgymező elrendezési beállításait, és állítsa a mezőt teljes szélességre.
- Teljes szélesség: IGEN
Kapcsolatfelvételi űrlap tervezésének testreszabása
Most módosítsunk néhány beállítást a dizájn véglegesítéséhez. Lépjünk a Design fülre a Contact Form modul beállításaiban.
Először is, változtasd meg a gomb háttérszínét.
- Gomb háttere: #DBC2B3
Adjon hozzá egy felső margót a gombhoz.
- Gombmargó (felső): 10 képpont
Végül lépjen a szegélybeállításokhoz, és adjon hozzá lekerekített sarkokat a mezőkhöz.
- Bemenetek Lekerekített sarkok: 30 képpont
Lásd még: Divi: Hogyan adjunk hozzá érzékeny logót a „Teljes szélességű menü” modulhoz
A 1. példa végeredménye
Íme a végeredmény asztali számítógépen és mobilon.
Második példa
Második példánkban a Blurb modulokat az oldal bal oldalára helyezzük, a kapcsolatfelvételi űrlapot pedig az oldal jobb oldalára helyezzük el. Helyezze át a Blurb modulokat egy oszlopba.
Módosítsa a sorelrendezést.
Nyissa meg a vonaltervezési beállításokat, és kapcsolja ki Használjon egyedi ereszcsatorna-szélességet.
- Egyedi ereszcsatorna-szélesség használata: NEM
Adj hozzá kódot a fő elem egyéni CSS-jéhez a Blurb és a Contact Form modulok függőleges igazításához.
align-items:center;
Most el kell távolítanunk az oszlopok közötti vékony szegélyt. Nyissuk meg a sorbeállításokat, majd az 1. oszlop beállításait. A Tervezés lapon lépjünk a szegélybeállításokhoz, és távolítsuk el a szegélyt.
- Jobb oldali szegély szélessége: 0 képpont
Ezután nyissa meg a 2. oszlop beállításait, és ismételje meg a lépéseket a szegély eltávolításához.
- Jobb oldali szegély szélessége: 0 képpont
Állítsd a „Kapcsolat” szöveget középre igazítva.
Helyezze át a kapcsolatfelvételi űrlapot a jobb oldali oszlopba. Törölje a fennmaradó üres részt.
Megváltozott a kapcsolatfelvételi űrlap elrendezése soros és teljes szélességű mezőkkel
Ebben az elrendezésben két külön mező lesz a vezetéknév és a vezetéknév számára. Nyissa meg a Kapcsolatfelvételi űrlap modul beállításait, és módosítsa a Vezetéknév mező Azonosító és Cím mezőjét Keresztnévre.
Adjon hozzá egy új mezőt a Keresztnév mező alá. Állítsa az ID és Title mezőt Név értékre.
A névmező beállításainál nyissa meg az elrendezés beállításait, és állítsa a Make Fullwidth beállítást Nem értékre.
- Teljes szélesség: NEM
Módosítsa a telefon- és objektummezők sorrendjét úgy, hogy a telefonszám az objektum előtt szerepeljen.
Nyissa meg az E-mail, Telefon és Tárgy mezőbeállításait, és állítsa be az elrendezést teljes szélességre.
- Teljes szélesség: IGEN
Kapcsolatfelvételi űrlap tervezésének testreszabása
Nyisd meg a sorbeállításokat, majd a 2. oszlop beállításait. Állítsd be a háttérszínt.
- Háttér: #DBC2B3
A 2. oszlop beállításainál lépjen a Tervezés fülre, és adjon hozzá kitöltést.
- Kitöltés (felső, alsó, bal és jobb oldali: 50 képpont
Válaszd ki a mobil ikont a reszponzív beállítások módosításához. Állítsd be a mobilhoz illő kitöltést.
- Kitöltés (felső, alsó, bal és jobb): 30 képpont
Ezután adjon hozzá egy doboz árnyékot az oszlophoz.
Végül nyissa meg a Kapcsolatfelvételi űrlap modul beállításait, és módosítsa a mező szövegének színét.
- Mezők szövegének színe: #000000
A 2. példa végeredménye
Íme a második elrendezés végeredménye.
Harmadik példa
A harmadik elrendezésnél a kapcsolatfelvételi űrlap a bal oldalon, a Blurb modulok pedig a jobb oldalon lesznek. Kezdjük a Blurb modulokat tartalmazó sor oszlopszerkezetének megváltoztatásával.
Helyezze át a címmodult a jobb oldali oszlopba.
Ezután helyezze át a „Kapcsolat” szövegmodult a bal oldali oszlopba, majd törölje a fennmaradó üres sort.
Helyezze át a Kapcsolatfelvételi űrlap modult a bal oldali oszlopba, a „Kapcsolatfelvétel” szövegmodul alá. Törölje a fennmaradó üres részt.
Nyissa meg a vonalbeállításokat a Tervezés lapon, és tiltsa le a Használjon egyedi ereszcsatorna-szélességet
- Egyedi ereszcsatorna-szélesség használata: NEM
Adj hozzá kódot a fő elem egyéni CSS-jéhez a Blurb és a Contact Form modulok függőleges igazításához.
align-items:center;
Nyissa meg a sorbeállításokat, majd az 1. oszlop beállításait. A Tervezés lapon lépjen a szegélybeállításokhoz, és távolítsa el a szegélyt. Ismételje meg ezeket a lépéseket a 2. oszlop szegélyének eltávolításához.
- Jobb oldali szegély szélessége: 0 képpont
A kapcsolatfelvételi űrlap elrendezésének módosítása
A mezők szélességét a harmadik tervben változatlanul hagyjuk; azonban nyisd meg a kapcsolatfelvételi űrlap beállításait, és módosítsd a telefonszám és a tárgy mező sorrendjét úgy, hogy a telefonszám legyen az első.
A 3. példa végeredménye
Íme a harmadik elrendezés végeredménye.
Olvassa el: Divi: A Fullwidth Header modul teljes képernyős megjelenítése
Negyedik példa
A negyedik és egyben utolsó elrendezésnél a Kapcsolatfelvételi űrlap modul a bal oldalon, a Blurb modul pedig a jobb oldalon lesz. Ismét a Blurb modulokat tartalmazó sor oszlopszerkezetének megváltoztatásával kezdjük.
Helyezze át a címmodult a jobb oldali oszlopba.
Ezután helyezze át a Kapcsolatfelvételi űrlap modult a bal oldali oszlopba. Törölje a fennmaradó üres részt.
Nyissa meg a vonalbeállításokat, lépjen a Tervezés fülre, és tiltsa le Használjon egyedi ereszcsatorna-szélességet.
- Egyedi ereszcsatorna-szélesség használata: NEM
Adj hozzá kódot a fő elem egyéni CSS-jéhez a Blurb és a Contact Form modulok függőleges igazításához.
align-items:center;
Nyisd meg a sorbeállításokat, majd az 1. oszlop beállításait. A Tervezés lapon lépj a szegélybeállításokhoz, és távolítsd el a szegélyt.
- Jobb oldali szegély szélessége: 0 képpont
Ezután nyissa meg a 2. oszlop beállításait, és ismételje meg a lépéseket a szegély eltávolításához.
- Jobb oldali szegély szélessége: 0 képpont
Nyisd meg a „Kapcsolat” szöveghez tartozó Szöveg modul beállításait, és igazítsd középre a szöveget.
- Szöveg igazítása: Középre igazítva
Megváltozott a kapcsolatfelvételi űrlap elrendezése soros és teljes szélességű mezőkkel
Ennél a tervnél minden mezőnk teljes szélességű lesz. Nyisd meg a Kapcsolatfelvételi űrlap modul beállításait, majd nyisd meg az egyes mezők beállításait. A Tervezés lapon válaszd a elrendezés és meghatározza Teljes szélességben sur IGEN.
Miután létrehozta az egyes teljes szélességű mezőket, az űrlapnak így kell kinéznie.
Most módosítsa a Vezetéknév mező ID és Title mezőjét Keresztnévre.
Adjon hozzá egy új mezőt a Keresztnév mező alá. Állítsa az ID és Title mezőt Név értékre.
Módosítsa a telefon- és objektummezők sorrendjét úgy, hogy a telefonszám az objektum előtt szerepeljen.
A Kapcsolatfelvételi űrlap modul kialakításának testreszabása
A modulbeállításokban, a Tervezés lapon állítsd a mezők szövegszínét feketére.
- Mezők szövegének színe: #000000
Nyisd meg a szakasz beállításait, és adj hozzá egy háttérszínt.
- Háttér: #DBC2B3
Végül adj hozzá egy háttérmaszkot.
- Háttér maszk: Arch
- Maszk transzformáció: vízszintes
Ahhoz, hogy a háttérmaszk jobban működjön mobilon, használjunk reszponzív beállításokat.
- Mask Transform (Telefon): vízszintes és forgatás
Végső eredmény
Íme a negyedik elrendezés végeredménye.
Végső eredmények
Vessünk még egy pillantást az összes példánkra.
Első példa
Második példa
Harmadik példa
Negyedik példa
Töltse le a DIVI-t most!!!
Összegzés
A vonzó kapcsolatfelvételi űrlap megnövelheti a konverziókat, és lehetővé teszi látogatói számára, hogy közvetlenül kapcsolatba léphessenek Önnel.
Ahogy ebben a cikkben bemutattuk, a beágyazott és a teljes szélességű mezőopciókkal különböző megjelenéseket és elrendezéseket hozhatsz létre az űrlapodhoz, a Divi beépített tervezési beállításai pedig lehetővé teszik egyedi és vonzó dizájnok létrehozását, amelyek segítenek az űrlapnak kitűnni.
Remélhetőleg ez a technika további hasznos tervezési készségeket ad a jövőbeli projektekhez.
Reméljük, hogy ez az oktatóanyag inspirációt ad a következő Divi projektjeihez. Ha bármilyen aggálya vagy javaslata van, keressen minket a megjegyzések szakasz hogy megbeszéljük.
Konzultálhat is forrásaink, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához.
Ne habozzon, tekintse meg útmutatónkat is a WordPress blog létrehozása vagy az egyiket Divi: minden idők legjobb WordPress témája.
De időközben ossza meg ezt a cikket a különböző közösségi hálózatokon.
...