Искате ли да създадете a Формуляр за връзка към вашия уебсайт благодарение на модула Форма за контакт от Диви? Ето 3 идеи за персонализиране...
Les форми Данните за контакт са съществена част от много уебсайтове. Основната им цел е да бъдат интуитивни и да помагат на посетителите да се свързват лесно.
Но това не означава, че всички форми контактите трябва да имат точен и предварително дефиниран вид. Можете лесно да комбинирате интуитивно изживяване с красив дизайн. Точно това ще направим в този урок.
Ще споделим 3 уникални дизайна на модула Форма за контакт de Divi които можете да създадете, като използвате само вградените опции на Divi.
Да вървим!
Преглед на дизайна на модула Divi Contact Form
Настолни версии
Нека започнем, като разгледаме настолната версия на различните дизайни на модула Форма за контакт които ще проектираме в този урок.
Мобилни версии
И ето как изглеждат на по-малки размери на екрана:
Изтеглете DIVI сега!!!
Как да персонализирате модула Divi Contact Form: 3 примера
Прочетете още: Divi: Как да създадете раздел за членове на екипа като въртележка
Създаване на контактна форма №1
Добавете нов раздел
Градиентен фон
Да започнем с първия пример! Добавете нов раздел, отидете на настройките на фона и добавете градиентен фон.
- Градиентни стопове
- 34%: #4c00ff
- 34%: #ffd400
- Тип: Кръгъл
- Посока на градиента: Долу вляво
разстояние
След това отидете на опцията Разстояние в раздела Дизайн и променете настройките, както следва.
- Подложка (отгоре и отдолу): 200px
Добавете нов ред
Структура на колоната
Добавете нов ред, като използвате следната структура на колоните:
Колона 1: Цвят на фона
Без да добавяте още модули, отворете настройките на реда, след това настройките на колона 1 и добавете цвета на фона по-долу
- Фон: rgba(255,255,255,0.55)
Колона 1: Фоново изображение
Също така добавете фоново изображение към първата колона.
- Повторение на фоновото изображение: Без повторение
- Смес на фоново изображение: Екран
Колона 2: Фоново изображение
И бял фон на втората колона.
- Фон: #ffffff
оразмеряване
След това променете параметрите за оразмеряване.
- Изравняване на височините на колоните: ДА
разстояние
Също така премахнете всички персонализирани подложки по подразбиране.
- Подложка (отгоре и отдолу): 0px
Радиус на границата на колоната
Добавете радиус на границата към двете колони в разширения раздел.
border-radius: 10px;
Добавете текстов модул към колона 1
Добавете съдържание
Време е да започнете да добавяте различните модули! Добавете текстов модул към първата колона със съдържание по ваш избор.
Текстови настройки
След това отидете в раздела Дизайн на модула Текст и направете някои промени.
- Текст :
- Шрифт: Задоволяване
- Цвят на текста: #333333
- Размер: 100px
- Височина на реда: 1 em
- Подравняване: Център
разстояние
Също така добавете персонализирани стойности за запълване
- Подложка (отгоре): 600px
- Подложка (отдолу): 100px
Кутия за сянка
За да добавите дълбочина към дизайна, използвайте фина кутия сянка.
- Сила на размазване на сянка на кутията: 80px
- Сила на разпространение на сянка в кутия: -16px
- Цвят на сянката: rgba(0,0,0,0.3)
Добавете модул Image към колона 2
Качете изображение
Продължете, като добавите модул Image към втората колона. Качете изображение по ваш избор.
оразмеряване
Променете настройките за оразмеряване на този модул.
- Ширина: 25% (десктоп), 50% (таблет), 60% (телефон)
- Подравняване на модула: Център
разстояние
Създайте припокриване, като използвате отрицателно горно поле.
- Марж (горен): -60%
граница
Променете границите на изображението, както следва:
- Заоблени ъгли: 100px (всички ъгли)
Добавете модул Text #1 към колона 2
Добавете съдържание
Точно под модула Изображение добавете текстов модул със съдържание.
Текстови настройки
Редактирайте настройките на текста за този модул.
- Текст :
- Шрифт: Задоволяване
- Цвят на текста: #333333
- Размер на текста: 44px
- Ориентация: Център
Добавете модул Text #2 към колона 2
Добавете съдържание
След това добавете друг текстов модул.
Текстови настройки
Също така променете настройките на текста за този модул.
- Текст :
- Шрифт: Arial
- Цвят на текста: #ffd400
- Цвят на текста: 18px
- Разстояние между буквите: 2px
- Ориентация: Център
разстояние
След това добавете долно поле.
- Поле (отдолу): 100px
Добавете модула за формуляр за контакт към колона 2
Активирайте опцията „Направи пълна ширина“ в полето Име и имейл
Последният необходим модул е модулът за контактна форма. Преди да направите нещо друго, отворете полетата за име и имейл и променете оформлението.
- Прави пълна ширина: да
Добавете поле за тема
За да създадем този дизайн, добавихме още едно поле за темата.
Защита спам
След това деактивирайте опцията captcha.
- Използвайте Basic Captcha: НЕ
Настройки на текста на полето на формуляр
Направете някои промени в настройките на текстовото поле на формуляра на този модул за формуляр за контакт
- Полета:
- Цвят на фона: rgba(255,255,255,0)
- Шрифт: Arial
- Дебелина на шрифта: Светъл
- Размер на текста: 16px
- Разстояние между буквите: 2px
Настройки на бутона
Променяме и външния вид на бутоните.
- Използвайте персонализиран размер за бутон: ДА
- Бутон:
- Цвят на текста: #ffd400
- Ширина на рамката: 0 пиксела
- Разстояние между буквите: 2px
- Шрифт: Arial
- Стил на шрифта: U
- Цвят на подчертаването: #4c00ff
разстояние
След това добавете някои персонализирани стойности за подплата.
- Подложка (отдолу): 100px
- Подложка (ляво и дясно): 50px
граница
И добавете фина долна граница към всяко от полетата.
- Ширина на долната граница на входа: 2px
- Цвят на долната граница на входовете: #efefef
Разстояние между отделните полета
Накрая добавете долно поле към всяко от отделните полета, с изключение на полето за съобщения.
- Поле (отдолу): 20px
Създаване на контактна форма №2
Добавете нов раздел
Градиентен фон
Да преминем към следващия пример! Добавете нов раздел с градиентен фон.
- Градиентни стопове:
- 50%: #562fef
- 50%: #ffffff
- Тип градиент: Линеен
разстояние
Добавете персонализирани стойности за подплата към настройките за разстояние в този раздел.
- Подложка (отгоре и отдолу): 200px
Добавете нов ред
Структура на колоната
Добавете нов ред, като използвате следната структура на колоните:
Цвят на фона
Без да добавяте още модули, отворете настройките на реда и добавете фонов цвят към реда.
- Цвят на фона: #ffffff
2 колони градиент фон
Добавете градиентен фон към втората колона в реда.
- Градиентни стопове:
- 0%: #9932ff
- 100%: #562fef
- Тип: Линеен
- Управление: 160 градуса
оразмеряване
Също така променете параметрите за оразмеряване на линията.
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Изравняване на височините на колоните: ДА
разстояние
След това добавете персонализирани стойности за разстояние.
- ред:
- Подложка (отгоре и отдолу): 0px
- Колона 1:
- Подложка: 100px (отгоре), 50px (отдолу)
- Подложка (ляво и дясно): 50px
- Колона 2:
- Подложка (отгоре и отдолу): 100px
- Подложка (ляво и дясно): 50px
граница
Добавете '20px' към всяка граница на линията.
Кутия за сянка
Накрая добавете фина сянка на кутия към линията.
- Сила на размазване на сянка на кутията: 45px
- Сила на разпространение на сянка в кутия: -11px
- Тъгов цвят: rgba(0,0,0,0.3)
Добавете текстов модул към колона 1
Добавете съдържание
Време е да започнете да добавяте модулите! Започнете с текстов модул в първата колона.
Текстови настройки
Редактирайте настройките на текста за този модул.
- Текст :
- Тегло на шрифта: Ultra Bold
- Стил на шрифта: TT
- Цвят: #562fef
- Размер: 100px (десктоп), 80px (таблет), 60px (телефон)
- Разстояние между буквите: -10px
- Височина на реда: 1 em
разстояние
Добавете и долно поле.
- Поле (отдолу): 50px
Добавете модула за формуляр за контакт към колона 1
елементи
Вторият модул, от който ще се нуждаем в първата колона, е модул за формуляр за контакт. След като добавите модула, изключете опцията „Използване на основна Captcha“.
- Използвайте Basic Captcha: НЕ
Настройки на текста на полето на формуляр
След това променете цвета на фона на полетата на формуляра.
- Цвят на фона на полетата: #ffffff
Настройки на бутона
Също така си поиграйте с настройките на бутоните, за да създадете бутон с икона вместо текстов бутон.
- Използване на персонализирани стилове за бутон: ДА
- Бутон:
- Размер на текста: 73px
- Цвят на текста: rgba(0,0,0,0) (по подразбиране),
- Цвят на фона: rgba(255,255,255,0) (Hover)
- Ширина на рамката: 0px
- Цвят на иконата: #9932ff
- Показване на икона само при задържане на курсора на мишката за бутон: НЕ
Кутия за сянка
Накрая добавете фина сянка на кутия към всяко от полетата.
- Сила на замъгляване на сянка в кутия: 36px
- Сила на разпространение на сянка в кутия: -14px
- Цвят на сянката: rgba(0,0,0,0.3)
Добавете текстов модул към колона 2
Добавете съдържание
Първият модул, от който ще се нуждаем във втората колона, е друг текстов модул.
Текстови настройки
След като добавите съдържанието, редактирайте настройките на текста за този модул.
- Текст :
- Тегло на шрифта: Ultra Bold
- Стил на шрифта: TT
- Цвят: #ffffff
- Размер: 23px
- Разстояние между буквите: -1px
Добавете Модул №1 на Blurb към колона 2
Добавете съдържание
Вторият модул, от който ще се нуждаем, е модул Blurb. Продължете и въведете информация за контакт.
Изберете иконата
След това изберете съответната икона.
Настройки на икони
Променете настройките за тази икона.
- Цвят на иконата: #ffffff
- Разположение на изображение/икона: вдясно
Настройки за текст на заглавието
Продължете, като направите някои промени в настройките на текста на заглавието.
- Размер на текста на заглавието: 15px
- Разстояние между заглавните букви: -0,5 пиксела
разстояние
И добавете горно поле.
- Поле (отгоре): 120px
Клонирайте модула Blurb два пъти
След като приключите с редактирането на първия модул Blurb, можете да продължите и да клонирате модула два пъти.
Променете съдържанието и иконата на двата дубликата
Редактирайте съдържанието и иконите на двата дубликата, за да споделяте различни видове информация за контакт с посетителите.
Променете разстоянието на двата дубликата
Горното поле на двата дубликата също трябва да бъде променено.
- Поле (отгоре): 30px
Създаване на контактна форма №3
Добавете нов раздел
Цвят на фона
Да преминем към третия пример! Добавете нов раздел със следния цвят на фона:
- Цвят на фона: #3491CE
разстояние
Продължете, като добавите персонализирани стойности за подложка в настройките за разстояние.
- Подложка (отгоре и отдолу): 200px
Добавете ред #1
Структура на колоната
След това добавете нов ред, като използвате следната структура на колони:
Добавяне на текстов модул
Добавете съдържание
Време е да започнете да добавяте модули! Първият модул, който ще трябва да добавим към първата колона, е текстов модул. Въведете съдържание по избор.
Текстови настройки
След това променете настройките на текста.
- Текст :
- Тегло на шрифта: Ultra Bold
- Цвят на текста: rgba(255,255,255,0.24)
- Размер на текста: 100px (десктоп), 70px (таблет), 36px (телефон)
- Височина на реда: 1 em
- Ориентация: Център
разстояние
Добавете и отрицателно долно поле.
- Поле (отдолу): -100px
Добавете ред 2
Структура на колоната
Вторият ред, от който се нуждаем, за да завършим този пример, съдържа следната структура на колони:
Градиентен фон
Без да добавяте още модули, отворете настройките на линията и добавете градиентен фон.
- Градиентни стопове:
- 50%: #11CE84
- 50%: #10C77F
- Тип градиент: Линеен
- Управление: 160 градуса
оразмеряване
Също така променете параметрите на оразмеряване.
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Изравняване на височините на колоните: ДА
разстояние
След това добавете някои стойности за подплънки.
- Подложка: 150px (отгоре), 100px (отдолу)
- Подложка: 50px (ляво и дясно)
граница
След това отидете на настройките на границите и добавете '20px' към всеки от ъглите. Използвайте също долна граница.
- Заоблени ъгли: 20px
- Ширина на долната граница: 10px
- Цвят на долната граница: #1ba35a
Кутия за сянка
Завършете настройките на линията, като добавите фина сянка на кутията.
- Сила на замъгляване на сянката на кутията: 80px
- Сила на разпространение на сянка в кутия: -24px
- Цвят на сянката: rgba(0,0,0,0.3)
Добавете модула за формуляр за контакт към колона 1
Активирайте опцията „Направи пълна ширина“ в полето Име и имейл
Първият модул, от който се нуждаем в първата колона на реда, е модул за контактна форма. Отворете полето за име и имейл и променете настройките на оформлението.
- Направете пълна ширина: ДА
елементи
След това деактивирайте captcha.
- Използвайте Basic Captcha: НЕ
Настройки на бутона
И променете настройките на бутоните.
- Използване на персонализирани стилове за бутон: ДА
- Цвят на текста на бутона: #ffffff
- Градиентни стопове:
- 50%: #3AA0E3
- 50%: #3491CE
- Тип градиент: Линеен
- Посока на градиента: 155 градуса -
- Ширина на рамката на бутона: 0 пиксела
- Радиус на границата на бутона: 10px
- Сила на разпространение на сянка в кутия: -2px
- Цвят на абажура: #0a60af
Вижте също: Divi: Как да персонализирате кошницата и иконите за търсене на модула „Меню с пълна ширина“
граница
Също така добавяме "5px" заоблени ъгли към всяко от полетата.
Добавете текстов модул към колона 2
Добавете съдържание
Във втората колона първият модул, от който се нуждаем, е текстов модул. Продължете и въведете малко съдържание.
Цвят на фона
След това променете цвета на фона.
- Фон: rgba(255,255,255,0.13)
Текстови настройки
Също така редактирайте с текстови настройки.
- Текст :
- Дебелина на шрифта: Светъл
- Цвят на текста: #ffffff
- Размер на текста: 15px
- Разстояние между буквите: -0,5px
разстояние
И добавете персонализирана подложка, за да дадете място на модула да диша.
- Подложка (отгоре и отдолу): 12px
- Подложка (ляво и дясно): 10px
граница
Също така добавяме „20px“ в горния ляв и долния ляв ъгъл. На всичкото отгоре ще добавим лява рамка.
- Заоблени ъгли: 20px (горе вляво и долу вляво)
- Ширина на лявата граница: 34px
- Цвят на лявата граница: #edf000
видимост
За да накараме този дизайн да съответства на различни размери на екрана, ще деактивираме текстовия модул на телефона и таблета.
Клонирайте текстовия модул два пъти
След като приключите с редактирането на първия текстов модул, продължете и клонирайте модула два пъти.
Променете съдържанието на двата дубликата
Променете съдържанието на двата дубликата на нещо друго.
Променете разстоянието на двата дубликата
И добавете горно поле, за да създадете пространство между всеки от модулите.
- Поле (отгоре): 20px
Променете границата на двата дубликата
Накрая променете цвета на лявата граница на всеки от дубликатите поотделно.
- Цвят 1: #00faff
- Цвят 2: #00f76f
Вижте и нашата статия на Как да създадете отзивчив плъзгач на акордеон
изследване
Настолна версия
Сега, след като преминахме през всички стъпки, нека да разгледаме окончателно дизайна на модула Divi Contact Form на работния плот.
подвижен
И ето какво можете да очаквате от дизайна на модулния формуляр за контакт на Divi на по-малки размери на екрана:
Изтеглете DIVI сега!!!
Заключение
В тази публикация споделихме 3 страхотни дизайна на модула на Divi Contact Form, които можете лесно да използвате и модифицирате за всеки уебсайт, който създадете.
Les форми Контактите са съществена част от много уебсайтове, така че е важно да се уверите, че вашият дизайн убеждава посетителите ви да се свържат.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...