Divi: A „Kapcsolatfelvételi űrlap” modul testreszabása

Szeretne létrehozni a Kapcsolatfelvételi űrlap webhelyére a modulnak köszönhetően Kapcsolatfelvétel a Divi-től? Íme 3 testreszabási ötlet…

Les formák Az elérhetőségek számos webhely elengedhetetlen részét képezik. Fő céljuk, hogy intuitívak legyenek, és segítsék a látogatókat, hogy könnyen kapcsolatba léphessenek.

De ez nem jelenti azt, hogy minden formák a névjegyeknek pontos és előre meghatározott megjelenésűnek kell lenniük. Könnyedén kombinálhatja az intuitív élményt a gyönyörű dizájnnal. Ebben az oktatóanyagban pontosan ezt fogjuk tenni.

Megosztunk a modul 3 egyedi dizájnjával Kapcsolatfelvétel de Divi amelyeket csak a Divi beépített opcióival hozhat létre.

Menjünk!

A Divi Contact Form modul kialakításának áttekintése

Asztali verziók

Kezdjük azzal, hogy vessünk egy pillantást a modul különböző kialakításainak asztali változatára Kapcsolatfelvétel amelyet ebben az oktatóanyagban fogunk megtervezni.

adjon hozzá egy kapcsolatfelvételi űrlapot webhelyéhez a Divi Kapcsolatfelvételi űrlap moduljával

Mobil verziók

És így néznek ki kisebb képernyőméreteken:

Töltse le a DIVI-t most!!!

A Divi Kapcsolatfelvételi űrlap modul testreszabása: 3 példa

Olvassa el: Divi: Hogyan hozzunk létre egy csapattag szekciót körhintaként

1. kapcsolatfelvételi űrlap létrehozása

Új szakasz hozzáadása

Színátmenet háttér

Kezdjük az első példával! Adjon hozzá egy új szakaszt, lépjen a háttérbeállításokhoz, és adjon hozzá egy színátmenetes hátteret.

Gradiens megáll
- 34%: #4c00ff
- 34%: #ffd400
Típus: Kerek
Gradiens iránya: balra lent

térköz

Ezután lépjen a Tervezés lap Térköz opciójára, és módosítsa a beállításokat az alábbiak szerint.

Kitöltés (fent és alul): 200 képpont

Új sor hozzáadása

Az oszlop felépítése

Adjon hozzá egy új sort a következő oszlopszerkezettel:

1. oszlop: Háttérszín

Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, majd az 1. oszlop beállításait, és adja hozzá a háttérszínt alább

Háttér: rgba(255,255,255,0.55)

1. oszlop: Háttérkép

Adjon hozzá egy háttérképet is az első oszlophoz.

Háttérkép ismétlés: Nincs ismétlés
Háttérkép keverék: Képernyő

2. oszlop: Háttérkép

És fehér háttérszín a második oszlophoz.

Háttér: #ffffff

méretezés

Ezután módosítsa a méretezési paramétereket.

Oszlopmagasságok kiegyenlítése: IGEN

térköz

Távolítsa el az összes alapértelmezett egyéni párnázást is.

Kitöltés (fent és alul): 0 képpont

Oszlopszegély sugara

Adjon hozzá egy szegély sugarat a Speciális lap mindkét oszlopához.

border-radius: 10px;

Szöveg modul hozzáadása az 1. oszlophoz

Tartalom hozzáadása

Ideje elkezdeni a különböző modulok hozzáadását! Adjon hozzá egy szöveg modult az első oszlophoz az Ön által választott tartalommal.

Szöveg beállítások

Ezután lépjen a Szöveg modul Tervezés lapjára, és hajtson végre néhány módosítást.

Szöveg:
- Betűtípus: Satisfy
- Szöveg színe: #333333
- Méret: 100px
- Vonalmagasság: 1 em
- Igazítás: középre

térköz

Adjon hozzá egyéni kitöltési értékeket.

Kitöltés (felül): 600 képpont
Kitöltés (alul): 100 képpont

Árnyék doboz

Ha mélységet szeretne adni a tervezésnek, használjon finom keretes árnyékot.

A doboz árnyékának elmosódásának erőssége: 80 képpont
Box Shadow Spread Erőssége: -16 képpont
Árnyékszín: rgba(0,0,0,0.3)

Adjon hozzá egy képmodult az 2. oszlophoz

Tölts fel egy képet

Folytassa egy képmodul hozzáadásával a második oszlophoz. Tölts fel egy választott képet.

méretezés

Módosítsa a modul méretezési beállításait.

Szélesség: 25% (asztali számítógép), 50% (táblagép), 60% (telefon)
Modul igazítása: Középre

térköz

Hozzon létre átfedést negatív felső margó használatával.

Margó (felső): -60%

határ

Módosítsa a kép szegélyeit az alábbiak szerint:

Lekerekített sarkok: 100 képpont (minden sarok)

Adja hozzá az 1. szöveg modult a 2. oszlophoz

Tartalom hozzáadása

Közvetlenül a Kép modul alatt adjon hozzá egy szöveg modult tartalommal.

Szöveg beállítások

Módosítsa a modul szövegbeállításait.

Szöveg:
- Betűtípus: Satisfy
- Szöveg színe: #333333
- Szöveg mérete: 44 képpont
- Tájolás: középen

Adja hozzá az 2. szöveg modult a 2. oszlophoz

Tartalom hozzáadása

Ezután adjon hozzá egy másik szöveg modult.

Szöveg beállítások

Módosítsa a modul szövegbeállításait is.

Szöveg:
- Betűtípus: Arial
- Szöveg színe: #ffd400
- Szöveg színe: 18px
- Betűtávolság: 2 képpont
- Tájolás: középen

térköz

Ezután adjon hozzá egy alsó margót.

Margó (alul): 100 képpont

Adja hozzá a Kapcsolatfelvételi űrlap modult a 2. oszlophoz

Aktiválja a "Teljes szélesség létrehozása" opciót a Név és e-mail mezőben

Az utolsó szükséges modul a Kapcsolatfelvételi űrlap modul. Mielőtt bármi mást tenne, nyissa meg a név és az e-mail mezőket, és módosítsa az elrendezést.

Teljes szélességben: igen

Tárgymező hozzáadása

A terv létrehozásához hozzáadtunk egy másik mezőt a tárgyhoz.

Spam védelem

Ezután tiltsa le a captcha opciót.

Basic Captcha használata: NEM

Űrlapmező szöveg beállításai

Végezzen néhány módosítást a kapcsolatfelvételi űrlap modul űrlapmező szöveg-beállításaiban

Mezők:
- Háttérszín: rgba (255,255,255,0)
- Betűtípus: Arial
- Betűsúly: könnyű
- Szöveg mérete: 16 képpont
- Betűtávolság: 2 képpont

Gombbeállítások

A gombok megjelenésén is változtatunk.

Egyedi méret használata a gombhoz: IGEN
Gomb:
- Szöveg színe: #ffd400
- Szegély szélessége: 0 képpont
- Betűköz: 2 képpont
- Betűtípus: Arial
- Betű stílus: U
- aláhúzás Szín: #4c00ff

térköz

Ezután adjon hozzá néhány egyéni kitöltési értéket.

Kitöltés (alul): 100 képpont
Kitöltés (bal és jobb): 50 képpont

határ

És adjon hozzá egy finom alsó szegélyt minden mezőhöz.

Bemenetek alsó szegély szélessége: 2 képpont
Bemenetek alsó szegély színe: #efefef

hozzon létre egy kapcsolatfelvételi űrlapot

Az egyes mezők távolsága

Végül adjon hozzá egy alsó margót minden egyes mezőhöz, kivéve az üzenetmezőt.

Margó (alul): 20 képpont