Всеки уебсайт се нуждае от раздел за контакти, но това не означава, че трябва да изберете стандартен дизайн. С ефектите на превъртане на Divi можете да създадете плаваща контактна секция, която ще се откроява. Подобрете взаимодействието си с потребителя с вертикално превъртащо се оформление на секцията с контакти, което ще покани посетителите да взаимодействат с вашия Формуляр за връзка. В тази статия ще ви покажем как да създадете плаващ контактен раздел с пълна ширина, който можете да добавите към всяка страница. Можете дори да го добавите в горната част на долен колонтитул за целия сайт с Divi Theme Builder.

По-долу ще намерите безплатен файл за изтегляне с оформление JSON, който да бъде изтеглен във вашата собствена библиотека Divi. Включихме и шаблон PSD, за да ви помогнем да пресъздадете фона на картата, както и щифт SVG на картата, за да можете да го персонализирате със собствените си цветове.

Създайте структура на елемент

В този дизайн ще използваме фоново изображение, което е представяне на Google Map на местоположението, което искате да покажете. Можете да направите това с Photoshop или друг редактор на изображения.

Добавете нов раздел

Сега е моментът да започнете да създавате раздела за плаващ контакт с Divi Builder! Първото нещо, което ще направим, е да отворим нова или съществуваща страница и да добавим нова секция.

В раздела за съдържание добавете фона на картата, която сте създали в Photoshop.

• Фоново изображение: вашата модифицирана карта

разстояние

След това персонализирайте настройките за разстоянието на раздели в раздела за проектиране.

• Горна и долна граница: 50vh
• Подложка отдолу: 0vw

видимост

След това задайте видимите преливания.

• Хоризонтално и вертикално преливане: видимо

Позиция

И накрая, задайте Z индекса на раздела на 10.

• Z индекс: 10

Добавете нов ред

Структура на колоната

Сега е моментът да добавите няколко неща. Първо добавете ред с 2 колони.

оразмеряване

Отворете параметрите на линията и коригирайте оразмеряването по следния начин.

• Широчина
  • Офис: 90%
  • Таблет и телефон: 80%
• Максимална ширина: 90%

видимост

Кликнете върху раздела за напреднали и след това коригирайте преливанията.

• Хоризонтално и вертикално преливане: видимо

Позиция

Завършете настройките на реда, като промените настройките на позицията.

• Позиция: Относителна
• Офсетов произход: горе вляво
• Вертикално изместване
  • Работен плот: -8vw

Настройка на колона 1

История

Преди да добавим модули, ще трябва да стилизираме отделните колони. Добавете цвят на фона към колона 1.

• Плътен цвят: # 25274d

Отстояние

След това коригирайте настройките за разстояние.

• Горна и долна подложка
  • Настолен компютър и таблет: 7vw
• Ляв и десен накладки
  • Работен плот: 3vw
  • Таблет и телефон: 6vw

Граница

След това добавете няколко заоблени ъгли към настройките на границата.

• Заоблени ъгли: 10px всички четири ъгъла

Ефекти на превъртане

Не на последно място, използвайте вертикално движение в настройките на ефектите на превъртане. Това ще ни помогне да създадем плаващ ефект.

• Ефекти на превъртане на трансформация: вертикално движение
• Вертикално движение / Комплект за работен плот
  • Стартово изместване: 4
  • Средно компенсиране: 0 (при 50%)
  • Окончателно отместване: -4
• Вертикално движение / таблет и телефон
  • Стартово изместване: 4
  • Средно компенсиране: 0 (при 40% и 60%)
  • Крайна компенсация: -3
• Задействане на ефекта на движението: Средата на елемента

Настройки на колона 2

Позиция

Сега да преминем към параметрите на втората колона. Регулирайте съответно настройките на позицията.

• Позиция: Относителна
• Произход на отместването: горе вляво
• Вертикално изместване
  • Офис: 25vw

Ефекти на превъртане

Към тази колона добавяме и вертикално движение.

• Ефекти на превъртане на превъртане: вертикално движение
• Определете вертикално / настолно движение
  • Старт компенсира: 2
  • Средно компенсиране: 0 (при 50%)
  • Крайна компенсация: -2
• Определете вертикално движение / таблет и телефон
  • Старт компенсира: 0
  • Средно компенсиране: 0 (при 50%)
  • Крайна компенсация: -2
• Задействане на ефекта на движението: Елемент отгоре

Добавете текстов модул в колоната 1

Съдържание

Време е да добавите модули, като започнете с текстов модул в колона 1. Добавете всяко H2 съдържание, което искате.

Заглавен текст

Отидете в раздела за дизайн и оформете текста H2, както следва.

• Ниво на заглавието: H2
• Шрифт: Palanquin Dark
• Тегло на шрифта: удебелен
• Стил на шрифта: TT
• Цвят: жълт # ffd868
• размер
  • Офис: 5vw
  • Таблет: 10vw
  • Телефон: 12vw
• Разстояние между буквите: 4px

Добавете модул за контактна форма в колона 1

Съдържание

Под текстовия модул добавете a Формуляр за връзка. Това са полетата, които използваме:

• Име
• Имейл
• материал
• Съобщения

Защита спам

Преди да оформите модула на Формуляр за връзка. активирайте защитата от спам и свържете своя ReCaptcha акаунт.

• Използвайте услуга за защита от спам: Да
• Доставчик на услуги: ReCaptcha
• Изберете акаунт

полета

Преминете към раздела за проектиране и стилизирайте полетата, както следва.

• Цвят на фона: Тъмно син # 25274d
• Цвят на текста: светло сив # d1d1d1
• Цвят на фона на фокуса: Тъмно син # 25274d
• Цвят на фокуса на текста: светло сив # d1d1d1
• Шрифт: Palanquin
• Стил: TT
• Размер на текста
  • Офис: 0.9vw
  • Таблет: 2vw
  • Телефон: 3vw
• Разстояние между буквите: 1px

бутон

След това стилизирайте бутона.

• Персонализирани стилове: Да
• Размер на текста: 20px
• Цвят на текста: тъмно син # 25274d
• Цвят на фона: жълт # ffd868
• Граничен радиус: 7px
• Цвят на иконата: Тъмно син # 25274d
• Горна граница: 5px

оразмеряване

След това променяме параметрите на оразмеряване.

• Ширина: 100%
• Максимална ширина: 100%

разстояние

Ще добавим и горни подплънки.

• Горна подложка: 4vw

граница

Завършете параметрите на модула, като персонализирате параметрите на границата.

• Входове със заоблени ъгли: 6 пиксела в четирите ъгъла
• Вписвания Стилове на границата: и четирите страни
• Ширина на входната граница: 2px
• Записи Цвят на границата: жълт # ffd868

Добавете модула за проследяване на социалните медии в колона 2

Съдържание

Отидете на колона 2 и добавете модул за социални медии. Използвайте всички социални мрежи, от които се нуждаете.

• Facebook
• Twitter
• Linkedin

Право на задържане

Преди стилизиране, добавете връзки към съответните мрежи.

Контекст на статията

Сега отворете първата социална мрежа и променете цвета на фона.

• Цвят: Тъмно син # 25274d

Икона на елемент

В раздела за дизайн на същия елемент променете настройките на иконата, както следва.

• Цвят: жълт # ffd868
• Размер на шрифта на иконата
  • Бюро и таблет: 31 px
  • Телефон: 26 px

Разстояние между артикулите

След това добавете малък марж, за да отделите иконите един от друг.

• Дясно поле: 1vw

Копирайте и поставете стилове на елементи

За да оформите останалите социални мрежи, върнете се в основния прозорец на съдържанието и копирайте стиловете на елементите от първата икона. След това поставете стиловете на елементите в останалите социални мрежи.

подравняване

Преминете към основния раздел за проектиране и се уверете, че модулът е подравнен вляво.

• Подравняване на модула: ляво

оразмеряване

След това регулирайте оразмеряването на модула.

• Ширина: 100%

разстояние

Изчистете и всички попълнения по подразбиране.

• Горна, долна, лява и дясна подплънка: 0vw

граница

И накрая, добавете заоблени ъгли в настройките на границата. Това ще коригира границите на всички икони наведнъж.

• заоблени ъгли
  • Горе вляво и вдясно: 7 пиксела
  • Долу отляво и отдясно: 0px

Добавете текстов модул в колоната 2

Съдържание

Под модула за социални медии добавете друг текстов модул. Добавете съдържание по ваш избор. Добавихме два адреса, телефонен номер и имейл. Използвайте удебелен шрифт в заглавието на всеки елемент от всички главни букви.

• Обща площ: 1587 Sukhumvit Soi 21, Банкок, Тайланд.
• Точка за продажба : Мол Emporium, 2-ри етаж
• Телефон: (321) 564 2398
• E-mail: [имейл защитен]

Contexte

Променете цвета на фона на модула.

• Цвят: Тъмно син # 25274d

Texte

Преминете към раздела за дизайн и оформете текста.

• Шрифт: Palanquin
• Цвят: жълт # ffd868
• Размер: 18px

разстояние

Също така добавете персонализирани стойности на разстоянието.

• Горен марж
  • Офис: -60px
  • Таблет и телефон: -50 пиксела
• Горна, долна, лява и дясна подплънка
  • Офис: 3vw
  • Таблет: 6vw
  • Телефон: 8vw

граница

И завършете модула, като добавите заоблени ъгли в настройките на границата. Това е!

• Заоблени ъгли: 10 пиксела в горния десен ъгъл, долу вляво и вдясно отдясно.

изследване

След като приключихме с пресъздаването на раздела с плаващи контакти, разгледайте окончателно резултата на различни размери на екрана.

Допълнителни ресурси

Тези ресурси могат да допълнят току-що прочетеното. Те могат да се използват в допълнение или от тези, които нямат Тема на Divi.

• Как да добавите форма изскачащ контакт на WordPress
• Как да добавите падащ формуляр в глобалната заглавка на Divi
• 5 приставки за създаване на формуляри за контакт

Завърши

Използването на новите ефекти за превъртане на Divi превръща всяко стандартно оформление в приятен дизайн. Създавайки свой собствен фон, вие имате повече контрол върху външния вид на готовия дизайн. Ако имате някакви въпроси или предложения, оставете коментар в раздела за коментари по-долу!