Divi: Ako prispôsobiť modul „Kontaktný formulár“.

Chceli by ste vytvoriť a Kontaktný formulár na váš web vďaka modulu Kontaktný formulár od Diviho? Tu sú 3 nápady na prispôsobenie…

Les formuláre Kontaktné údaje sú nevyhnutnou súčasťou mnohých webových stránok. Ich hlavným cieľom je byť intuitívny a pomôcť návštevníkom ľahko sa s nimi spojiť.

To však neznamená, že všetko formuláre kontakty musia mať presný a vopred definovaný vzhľad. Ľahko skombinujete intuitívny zážitok s krásnym dizajnom. To je presne to, čo budeme robiť v tomto návode.

Budeme zdieľať 3 unikátne prevedenie modulu Kontaktný formulár de divi ktoré môžete vytvoriť iba pomocou vstavaných možností Divi.

Poďme!

Prehľad návrhov modulu Kontaktný formulár Divi

Desktopové verzie

Začnime tým, že sa pozrieme na desktopovú verziu rôznych dizajnov modulu Kontaktný formulár ktoré navrhneme v tomto návode.

pridajte kontaktný formulár na svoju webovú stránku pomocou modulu Kontaktný formulár Divi

Mobilné verzie

A takto vyzerajú na menších obrazovkách:

Stiahnite si DIVI teraz!!!

Ako prispôsobiť modul kontaktného formulára Divi: 3 príklady

Čítajte tiež: Divi: Ako vytvoriť sekciu členov tímu ako kolotoč

Vytvorenie kontaktného formulára #1

Pridajte novú sekciu

Gradient pozadia

Začnime prvým príkladom! Pridajte novú sekciu, prejdite na nastavenia pozadia a pridajte pozadie s prechodom.

Prechodové zarážky
- 34%: #4c00ff
- 34 %: #ffd400
Typ: Okrúhle
Smer prechodu: vľavo dole

vzdialenosť

Ďalej prejdite na možnosť Rozstup na karte Návrh a zmeňte nastavenia nasledovne.

Výplň (horná a dolná časť): 200 pixelov

Pridať nový riadok

Štruktúra stĺpca

Pridajte nový riadok pomocou nasledujúcej štruktúry stĺpcov:

Stĺpec 1: Farba pozadia

Zatiaľ bez pridania modulov, otvorte nastavenia riadkov, potom nastavenia stĺpca 1 a pridajte farbu pozadia nižšie

Pozadie: rgba (255,255,255,0.55)

Stĺpec 1: Obrázok na pozadí

Do prvého stĺpca pridajte aj obrázok na pozadí.

Opakovanie obrázka na pozadí: Neopakovať
Prelínanie obrázkov na pozadí: Obrazovka

Stĺpec 2: Obrázok na pozadí

A biela farba pozadia do druhého stĺpca.

Pozadie: #ffffff

dimenzovanie

Potom upravte parametre veľkosti.

Vyrovnať výšky stĺpcov: ÁNO

vzdialenosť

Odstráňte tiež všetky predvolené vlastné vypchávky.

Výplň (horná a dolná časť): 0 pixelov

Polomer ohraničenia stĺpca

Pridajte polomer okraja do oboch stĺpcov na karte Rozšírené.

border-radius: 10px;

Pridajte textový modul do stĺpca 1

Pridajte obsah

Je čas začať pridávať rôzne moduly! Pridajte textový modul do prvého stĺpca s obsahom podľa vášho výberu.

Nastavenia textu

Ďalej prejdite na kartu Návrh v module Text a vykonajte nejaké zmeny.

Text:
- Písmo: Uspokojiť
- Farba textu: #333333
- Veľkosť: 100px
- Výška riadku: 1 em
- Zarovnanie: Stred

vzdialenosť

Pridajte aj vlastné hodnoty výplne.

Výplň (hore): 600 pixelov
Odsadenie (dole): 100px

Tieňová skrinka

Ak chcete dizajnu pridať hĺbku, použite jemný tieň boxu.

Sila rozmazania rámčeka: 80 pixelov
Sila rozpätia tieňa rámčeka: -16px
Farba tieňa: rgba (0,0,0,0.3)

Pridajte modul Image do stĺpca 2

Nahrajte obrázok

Pokračujte pridaním modulu Image do druhého stĺpca. Nahrajte obrázok podľa vlastného výberu.

dimenzovanie

Zmeňte nastavenia veľkosti pre tento modul.

Šírka: 25 % (stolný počítač), 50 % (tablet), 60 % (telefón)
Zarovnanie modulu: Stred

vzdialenosť

Vytvorte prekrytie pomocou záporného horného okraja.

Marža (horná): -60 %

hraničné

Upravte okraje obrázka nasledovne:

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

Pridajte modul Text #1 do stĺpca 2

Pridajte obsah

Hneď pod modul Obrázok pridajte modul Text s obsahom.

Nastavenia textu

Upravte nastavenia textu pre tento modul.

Text:
- Písmo: Uspokojiť
- Farba textu: #333333
- Veľkosť textu: 44px
- Orientácia: Stred

Pridajte modul Text #2 do stĺpca 2

Pridajte obsah

Potom pridajte ďalší textový modul.

Nastavenia textu

Zmeňte aj nastavenia textu pre tento modul.

Text:
- Písmo: Arial
- Farba textu: #ffd400
- Farba textu: 18px
- Medzera medzi písmenami: 2px
- Orientácia: Stred

vzdialenosť

Potom pridajte spodný okraj.

Okraj (dole): 100 pixelov

Pridajte modul Kontaktný formulár do stĺpca 2

V poli Meno a e-mail aktivujte možnosť „Make Fullwidth“.

Posledným potrebným modulom je modul Kontaktný formulár. Predtým, ako urobíte čokoľvek iné, otvorte polia pre meno a e-mail a zmeňte rozloženie.

Make Fullwidth: áno

Pridajte pole predmetu

Na vytvorenie tohto dizajnu sme pridali ďalšie pole pre predmet.

Ochrana spam

Potom vypnite možnosť captcha.

Použite základný captcha: NIE

Nastavenia textu poľa formulára

Vykonajte nejaké zmeny v nastaveniach textu poľa formulára tohto modulu kontaktného formulára

Polia:
- Farba pozadia: rgba (255,255,255,0)
- Písmo: Arial
- Hmotnosť písma: Svetlá
- Veľkosť textu: 16px
- Medzera medzi písmenami: 2px

Nastavenia tlačidiel

Meníme aj vzhľad tlačidiel.

Použiť vlastnú veľkosť pre tlačidlo: ÁNO
Tlačidlo:
- Farba textu: #ffd400
- Šírka okraja: 0 pixelov
- Medzera medzi písmenami: 2px
- Písmo: Arial
- Štýl písma: U
- farba podčiarknutia: #4c00ff

vzdialenosť

Potom pridajte nejaké vlastné hodnoty výplne.

Výplň (dole): 100 pixelov
Výplň (vľavo a vpravo): 50 pixelov

hraničné

A pridajte jemný spodný okraj ku každému z polí.

Vstupy Šírka spodného okraja: 2px
Vstupy Farba spodného okraja: #efefef

Rozostup jednotlivých polí

Nakoniec pridajte spodný okraj do každého z jednotlivých polí okrem poľa správy.

Okraj (dole): 20 pixelov