Divi: Jak přizpůsobit modul "Kontaktní formulář".

Chcete vytvořit a kontaktní formulář na váš web díky modulu Kontaktní formulář od Divi? Zde jsou 3 nápady na přizpůsobení…

Les formuláře Kontaktní údaje jsou nezbytnou součástí mnoha webových stránek. Jejich hlavním cílem je být intuitivní a usnadnit návštěvníkům kontakt.

To ale neznamená, že vše formuláře kontakty musí mít přesný a předem definovaný vzhled. Můžete snadno spojit intuitivní zážitek s krásným designem. To je přesně to, co budeme dělat v tomto tutoriálu.

Budeme sdílet 3 unikátní design modulu Kontaktní formulář de divi které můžete vytvořit pouze pomocí vestavěných možností Divi.

Pojďme!

Přehled návrhů modulu Kontaktního formuláře Divi

Desktopové verze

Začněme tím, že se podíváme na desktopovou verzi různých provedení modulu Kontaktní formulář které navrhneme v tomto tutoriálu.

přidejte na svůj web kontaktní formulář pomocí modulu Kontaktní formulář Divi

Mobilní verze

A takto vypadají na menších obrazovkách:

Stáhněte si DIVI hned teď!!!

Jak přizpůsobit modul Kontaktního formuláře Divi: 3 příklady

Čtěte také: Divi: Jak vytvořit sekci členů týmu jako kolotoč

Vytvoření kontaktního formuláře #1

Přidejte novou sekci

Přechodové pozadí

Začněme prvním příkladem! Přidejte novou sekci, přejděte do nastavení pozadí a přidejte pozadí s přechodem.

Přechodové zastávky
- 34%: #4c00ff
- 34 %: #ffd400
Typ: Kulatý
Směr přechodu: vlevo dole

vzdálenost

Dále přejděte na možnost Mezery na kartě Návrh a změňte nastavení následovně.

Výplň (nahoře a dole): 200 pixelů

Přidat nový řádek

Struktura kolony

Přidejte nový řádek pomocí následující struktury sloupců:

Sloupec 1: Barva pozadí

Bez přidání jakýchkoli modulů otevřete nastavení řádku, poté nastavení sloupce 1 a přidejte barvu pozadí níže

Pozadí: rgba(255,255,255,0.55)

Sloupec 1: Obrázek na pozadí

Do prvního sloupce přidejte také obrázek na pozadí.

Opakování obrázku na pozadí: Neopakovat
Prolnutí obrázku na pozadí: Obrazovka

Sloupec 2: Obrázek na pozadí

A bílá barva pozadí do druhého sloupce.

Pozadí: #ffffff

dimenzování

Poté upravte parametry velikosti.

Vyrovnat výšky sloupců: ANO

vzdálenost

Odstraňte také všechny výchozí vlastní výplně.

Výplň (nahoře a dole): 0 pixelů

Poloměr ohraničení sloupce

Přidejte poloměr ohraničení do obou sloupců na kartě Upřesnit.

border-radius: 10px;

Přidejte textový modul do sloupce 1

Přidat obsah

Je čas začít přidávat různé moduly! Přidejte Textový modul do prvního sloupce s obsahem dle vašeho výběru.

Nastavení textu

Dále přejděte na kartu Návrh modulu Text a proveďte nějaké změny.

Text:
- Písmo: Uspokojit
- Barva textu: #333333
- Velikost: 100px
- Výška řádku: 1 em
- Zarovnání: Střed

vzdálenost

Přidejte také vlastní hodnoty výplně.

Výplň (nahoře): 600 pixelů
Výplň (dole): 100px

Stínová krabička

Chcete-li návrhu přidat hloubku, použijte jemný stín krabice.

Síla rozostření rámečku: 80 pixelů
Síla rozprostření stínu rámečku: -16px
Barva stínu: rgba (0,0,0,0.3)

Přidejte Image modul do sloupce 2

Nahrajte obrázek

Pokračujte přidáním modulu Image do druhého sloupce. Nahrajte obrázek dle vlastního výběru.

dimenzování

Změňte nastavení velikosti pro tento modul.

Šířka: 25 % (počítač), 50 % (tablet), 60 % (telefon)
Zarovnání modulu: Střed

vzdálenost

Vytvořte překrytí pomocí záporného horního okraje.

Marže (nahoře): -60 %

Hranice

Upravte okraje obrázku následovně:

Zaoblené rohy: 100px (všechny rohy)

Přidejte modul Text #1 do sloupce 2

Přidat obsah

Hned pod modul Obrázek přidejte modul Text s obsahem.

Nastavení textu

Upravte nastavení textu pro tento modul.

Text:
- Písmo: Uspokojit
- Barva textu: #333333
- Velikost textu: 44px
- Orientace: Střed

Přidejte modul Text #2 do sloupce 2

Přidat obsah

Poté přidejte další modul Text.

Nastavení textu

Změňte také nastavení textu pro tento modul.

Text:
- Písmo: Arial
- Barva textu: #ffd400
- Barva textu: 18px
- Mezera mezi písmeny: 2px
- Orientace: Střed

vzdálenost

Pak přidejte spodní okraj.

Okraj (dole): 100 pixelů

Přidejte modul Kontaktní formulář do sloupce 2

Aktivujte možnost „Nastavit plnou šířku“ v poli Jméno a e-mail

Posledním potřebným modulem je modul Kontaktní formulář. Než uděláte cokoliv jiného, otevřete pole pro jméno a e-mail a změňte rozvržení.

Udělat plnou šířku: ano

Přidejte pole předmětu

Pro vytvoření tohoto návrhu jsme přidali další pole pro předmět.

Ochrana proti spamu

Poté vypněte možnost captcha.

Použijte základní captcha: NE

Nastavení textu pole formuláře

Proveďte nějaké změny v nastavení textu pole formuláře tohoto modulu kontaktního formuláře

Pole:
- Barva pozadí: rgba (255,255,255,0)
- Písmo: Arial
- Hmotnost písma: Lehká
- Velikost textu: 16px
- Mezera mezi písmeny: 2px

Nastavení tlačítek

Měníme také vzhled tlačítek.

Použít vlastní velikost pro tlačítko: ANO
Knoflík :
- Barva textu: #ffd400
- Šířka okraje: 0 pixelů
- Mezera mezi písmeny: 2px
- Písmo: Arial
- Styl fontu: U
- barva podtržení: #4c00ff

vzdálenost

Poté přidejte nějaké vlastní hodnoty výplně.

Výplň (dole): 100 pixelů
Výplň (vlevo a vpravo): 50px

hraniční

A ke každému z polí přidejte jemné spodní ohraničení.

Vstupy Šířka spodního okraje: 2px
Vstupy Barva spodního okraje: #efefef

Rozestupy jednotlivých polí

Nakonec přidejte spodní okraj ke každému jednotlivému poli kromě pole se zprávou.

Okraj (dole): 20 pixelů