Kombinálni kell a soron belüli mezőket és a modul teljes szélességű mezőit Kapcsolatfelvétel de Divi ?
Le Kapcsolatfelvételi űrlap fontos elem, amelyet fel kell venni a webhelyére, ha e-maileket szeretne rögzíteni, és látogatóit ügyfelekké szeretné alakítani.
A modul Kapcsolatfelvétel de Divi könnyen személyre szabható létrehozásához formák vonzó és magával ragadó névjegykártyák minden típusú webhelyhez. Ez a modul két megjelenítési opcióval rendelkezik, amelyek mindegyik ű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 az Ön számára Kapcsolatfelvételi űrlap Divi sorközi é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ön meg arról, hogy webhelyén a Divi legújabb verziója található.
Most már készen áll a kezdésre!
4 mintaelrendezés a Divi Kapcsolatfelvételi űrlap moduljához soron belüli és teljes szélességű mezőkkel
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.
Adjon hozzá egy új oldalt a webhelyéhez, adjon neki címet, majd válassza ki 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 mozgassa a modult tartalmazó sort Kapcsolatfelvétel a fenti szakaszhoz, közvetlenül a Blurb modulokat tartalmazó vonal alatt. Ezután törölheti a fennmaradó üres részt.
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 beállítások alatt a Kapcsolatfelvételi űrlap, módosítsa a téma és a telefon sorrendjét úgy, hogy a telefon 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 tervezés befejezéséhez. Lépjen a Kapcsolatfelvételi űrlap modul beállításainak Tervezés lapjára.
Először módosítsa 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
Az 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
Adjon hozzá kódot a fő elem egyéni CSS-jához, hogy függőlegesen igazítsa a Blurb és a Kapcsolatfelvételi űrlap modulokat.
align-items:center;
Most el kell távolítanunk az oszlopok közötti vékony szegélyt. Sorbeállítások, majd oszlopbeállítások megnyitása 1. A Tervezés lapon lépjen a szegélybeállításokhoz, és távolítsa 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ítsa középre a „Kapcsolatfelvétel” szöveget.
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 a tárgy mezők sorrendjét úgy, hogy a telefon a tárgy elé kerüljön.
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
Nyissa meg a sorbeállításokat, majd az oszlopbeállításokat. 2. Állítsa be a háttérszínt.
- Háttér: #DBC2B3
A 2. oszlop beállításaiban lépjen a Tervezés lapra, és adjon hozzá kitöltést.
- Kitöltés (felső, alsó, bal és jobb oldali: 50 képpont
Válassza a mobil ikont az adaptív beállítások módosításához. Állítsa be a padding mobilhoz.
- 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
Az 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 „Kapcsolatfelvétel” 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 kapcsolja ki Használjon egyedi ereszcsatorna-szélességet
- Egyedi ereszcsatorna-szélesség használata: NEM
Adjon hozzá kódot a fő elem egyéni CSS-jához, hogy függőlegesen igazítsa a Blurb és a Kapcsolatfelvételi űrlap modulokat.
align-items:center;
Sorbeállítások, majd oszlopbeállítások megnyitása 1. A Tervezés lapon lépjen a szegélybeállításokhoz, és távolítsa el a szegélyt. Ismételje meg a lépéseket a szegély eltávolításához a 2. oszlopból.
- Jobb oldali szegély szélessége: 0 képpont
A kapcsolatfelvételi űrlap elrendezésének módosítása
Meghagyjuk a mezőszélességeket a harmadik tervnél, azonban nyissa meg a kapcsolatfelvételi űrlap beállításait, és módosítsa a telefonszám és tárgymező sorrendjét úgy, hogy a telefon legyen az első.
Az 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 a Tervezés lapon, és tiltsa le Használjon egyedi ereszcsatorna-szélességet.
- Egyedi ereszcsatorna-szélesség használata: NEM
Adjon hozzá kódot a fő elem egyéni CSS-jához, hogy függőlegesen igazítsa a Blurb és a Kapcsolatfelvételi űrlap modulokat.
align-items:center;
Sorbeállítások, majd oszlopbeállítások megnyitása 1. A Tervezés lapon lépjen a szegélybeállításokhoz, és távolítsa 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
Nyissa meg a Szöveg modul beállításait a „Kapcsolatfelvétel” szöveghez, és helyezze 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 kialakításnál minden mezőnk teljes szélességű lesz. Nyissa meg a Kapcsolatfelvételi űrlap modul beállításait, majd nyissa meg az egyes mezők beállításait. A Tervezés lapon válassza ki a lehetőséget 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 a tárgy mezők sorrendjét úgy, hogy a telefon a tárgy elé kerüljön.
A Kapcsolatfelvételi űrlap modul kialakításának testreszabása
A modul beállításainál a Tervezés lapon állítsa a mező szövegének színét feketére.
- Mezők szövegének színe: #000000
Nyissa meg a szakasz beállításait, és adjon hozzá egy háttérszínt.
- Háttér: #DBC2B3
Végül adjon 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áljuk a 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
Nézzük meg még egyszer az összes példánkat.
Első példa
Második példa
Harmadik példa
Negyedik példa
Töltse le a DIVI-t most!!!
Következteté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.
Amint azt ebben a cikkben bemutattuk, a beágyazott és a teljes szélességű mezőopciók segítségével különböző megjelenéseket és elrendezéseket hozhat létre űrlapjaihoz, a Divi beépített tervezési lehetőségei pedig lehetővé teszik egyedi és tetszetős dizájn létrehozását, hogy az űrlap kitűnjön.
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.
...
