Как создать фиксированное всплывающее окно в углу контактной формы с параметрами размера Divi

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте. Для одного из пакетов макетов мы также расскажем о сценарии использования, который поможет вам вывести свой веб-сайт на новый уровень.

На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы собираемся показать вам, как добавить фиксированное всплывающее окно в углу контактной формы на вашу страницу, используя параметры размера Divi. Такой подход поможет вам настроить контактную форму, которая будет следить за посетителями во время их пребывания на вашем веб-сайте, без необходимости установки дополнительного плагина!

Давайте перейдем к этому.

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

1. Загрузите посадочную страницу пакета макетов мануального терапевта

Добавить новую страницу

Начните с создания новой страницы. После того, как вы назвали страницу и опубликуете ее, переключитесь на Visual Builder.

Загрузите посадочную страницу пакета макетов мануального терапевта

Затем загрузите целевую страницу пакета макетов мануального терапевта. Хотя мы будем использовать этот конкретный макет, вы можете заставить эту технику работать на любой странице, над которой вы работаете.

2. Начнем воссоздавать!

Добавить новый раздел в конец страницы

Мы собираемся посвятить совершенно новый раздел фиксированной контактной форме, всплывающей при нажатии. Добавьте этот раздел внизу своей страницы.

Фоновый цвет

Откройте настройки раздела и используйте полностью прозрачный цвет фона. Позже в этом посте мы исправим весь раздел. Использование прозрачного цвета фона гарантирует, что все, что появляется под контейнером раздела, просматривается.

• Цвет фона: rgba (255,255,255,0)

Размеры

Перейдите на вкладку дизайна и измените ширину раздела для разных размеров экрана.

• Ширина: 37% (рабочий стол), 95% (планшет), 100% (телефон)
• Выравнивание раздела: справа

Интервал

Затем удалите верхнюю прокладку по умолчанию.

• Верхний отступ: 0 пикселей

CSS-класс

Нам также нужно будет предоставить нашему новому разделу собственный класс CSS. Позже мы будем использовать этот класс CSS для добавления кода JQuery и CSS.

• CSS-класс: section-open

Индекс Z по умолчанию

Чтобы раздел отображался поверх всего содержимого страницы, мы увеличим индекс раздела по z в настройках видимости.

• Индекс Z: 99

Индекс наведения Z

Добавьте то же значение индекса z при наведении курсора.

• Индекс Z: 99

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Добавить модуль Blurb

Оставьте поля содержимого пустыми

Первый и единственный модуль, который нам нужен в этой строке, - это модуль Blurb. Не забудьте оставить поля заголовка и содержимого пустыми.

Выбрать значок

Далее выберите значок.

Фоновый цвет

Также измените цвет фона рекламного объявления.

• Цвет фона: #FFFFFF

Настройки значков

Перейдите на вкладку дизайна и примените следующие настройки значка:

• Цвет значка: # ff5f24
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 46 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)

Размеры

Затем измените настройки размера для разных размеров экрана.

• Ширина: 140 пикселей (рабочий стол), 105 пикселей (планшет), 80 пикселей (телефон)
• Выравнивание модуля: справа

Интервал

Мы также добавим несколько настраиваемых значений верхнего и нижнего отступов для разных размеров экрана.

• Верхний отступ: 50 пикселей (рабочий стол), 35 пикселей (планшет), 25 пикселей (телефон)
• Нижний отступ: 20 пикселей (рабочий стол), 10 пикселей (планшет), 0 пикселей (телефон)

Граница

Чтобы создать круглую форму, нам нужно добавить высокое значение к каждому углу в настройках границы. Мы используем 500 пикселей.

Коробка Тень

Мы также добавим тонкую тень блока, чтобы показать круглую форму.

• Сила размытия тени коробки: 80 пикселей

Анимация

Затем откройте настройки анимации и удалите анимацию значка.

• Анимация значков: без анимации

CSS-класс

И последнее, но не менее важное: добавьте класс CSS в модуль Blurb. Позже в этом посте мы будем использовать этот класс CSS, чтобы заставить работать функцию щелчка.

• Класс CSS: открытый контакт

Добавить строку №2

Структура столбца

Во второй ряд! Используйте следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и добавьте белый цвет фона.

• Цвет фона: #FFFFFF

Граница

Добавьте радиус границы 39 пикселей к каждому из следующих углов.

Коробка Тень

И завершите настройки строки, добавив тонкую тень блока.

• Сила размытия тени коробки: 80 пикселей

Добавить контактную форму

Элементы

Единственный модуль, который нам нужен в этой строке, - это модуль контактной формы. После того, как вы добавили модуль, отключите капчу в настройках элементов.

• Показать Captcha: Нет

Поля

Перейдите на вкладку дизайна и измените цвет фона полей в настройках полей.

• Цвет фона полей: rgba (0,126,255,0.13)

Кнопка

Продолжайте стилизовать кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: #FFFFFF
• Цвет фона кнопки: # ff5f24
• Ширина границы кнопки: 2 пикселя
• Цвет границы кнопки: rgba (0,0,0,0)
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Karla
• Толщина шрифта кнопок: полужирный
• Отступ кнопки сверху: 14 пикселей
• Отступ кнопки снизу: 14 пикселей
• Отступ кнопки слева: 20 пикселей
• Отступ справа от кнопки: 20 пикселей

Интервал

И добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 30 пикселей
• Нижний отступ: 30 пикселей
• Отступ слева: 40 пикселей
• Отступ справа: 40 пикселей

Добавить модуль кода

Вставить код JQuery

После того, как вы заполнили модуль контактной формы, пришло время заставить работать функцию щелчка! Добавьте модуль кода во вторую строку раздела и вставьте следующие строки кода JQuery между тегами сценария, как вы можете видеть на экране печати ниже:

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

Изменить настройки раздела

Рост

Продолжите, открыв настройки раздела. Измените высоту для разных размеров экрана.

• Высота: 190 пикселей (рабочий стол), 140 пикселей (планшет), 125 пикселей (телефон)

Основной элемент по умолчанию

Добавьте собственный CSS-код к основному элементу раздела рядом, чтобы зафиксировать его в правом нижнем углу.

bottom: 0;
right: 0;
position: fixed;

Главный элемент при наведении

Убедитесь, что вы добавили фиксированное положение и к основному элементу при наведении курсора.

position: fixed;

Добавить собственный код CSS на страницу

Открыть настройки страницы

Чтобы завершить эффект переключения, нам также нужно добавить на страницу немного кода CSS. Откройте настройки страницы.

Добавить собственный CSS

Перейдите на вкладку «Дополнительно» и добавьте следующие строки кода CSS:

.section-open-active {
height: auto !important;
}

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как добавить фиксированную контактную форму на ваши страницы, используя настройки размера Divi. Вы можете заставить этот подход работать на любом веб-сайте, который вы создаете. Это руководство является частью нашей текущей инициативы по дизайну Divi, в рамках которой мы каждую неделю стараемся добавлять что-то дополнительное в ваш набор инструментов для дизайна. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.