Каждому веб-сайту нужен раздел контактов, но это не значит, что вам нужно использовать стандартный дизайн. С эффектами прокрутки Divi вы можете создать раздел с плавающими контактами, который будет выделяться. Улучшите взаимодействие с пользователем с помощью макета раздела контактов с вертикальной прокруткой, который будет приглашать посетителей взаимодействовать с вашим Контактная форма. В этой статье мы покажем вам, как создать раздел плавающих контактов во всю ширину, который вы можете добавить на любую страницу. Вы даже можете добавить его в верхнюю часть нижнего колонтитула сайта с помощью конструктора тем Divi.
Ниже вы найдете бесплатно загружаемый файл с макетом JSON для загрузки в вашу собственную библиотеку Divi. Мы также включили шаблон PSD, который поможет вам воссоздать фон карты, а также значок SVG карты, чтобы вы могли настроить его своими собственными цветами.
Создать элементную структуру
В этом дизайне мы собираемся использовать фоновое изображение, которое представляет на карте Google место, которое вы хотите продемонстрировать. Вы можете сделать это с помощью Photoshop или любого другого графического редактора.
Добавить новый раздел
Пришло время приступить к созданию раздела плавающих контактов с помощью Divi Builder! Первое, что мы сделаем, это откроем новую или существующую страницу и добавим новый раздел.
На вкладке содержимого добавьте фон карты, созданной в Photoshop.
- Фоновое изображение: ваша измененная карта
расстояние
Затем настройте параметры расстояния между секциями на вкладке дизайна.
- Верхний и нижний край: 50vh
- Нижняя обивка: 0vw
видимость
Затем установите переполнения на видимое.
- Горизонтальное и вертикальное переполнение: видимый
Позиция
Наконец, установите индекс Z секции равным 10.
- Индекс Z: 10
Добавить новую строку
Структура столбца
Пришло время добавить несколько вещей. Сначала добавьте строку из 2 столбцов.
калибровка
Откройте параметры линии и отрегулируйте размеры следующим образом.
- Ширина
- Офис: 90%
- Планшет и телефон: 80%
- Максимальная ширина: 90%
видимость
Щелкните вкладку «Дополнительно» и затем настройте переполнение.
- Горизонтальное и вертикальное переполнение: видимый
Позиция
Завершите настройки строки, изменив настройки положения.
- Должность: Относительная
- Смещение происхождения: вверху слева
- Вертикальное смещение
- Рабочий стол: -8vw
Настройки столбца 1
проверка данных
Перед добавлением модулей нам нужно стилизовать отдельные столбцы. Добавьте цвет фона в столбец 1.
- Сплошной цвет: # 25274d
Расстояние
Отрегулируйте настройки расстояния дальше.
- Верхняя и нижняя обивка
- Рабочий стол и планшет: 7vw
- Левая и правая обивка
- Рабочий стол: 3vw
- Планшет и телефон: 6vw
Граница
Затем добавьте несколько закругленных углов к настройкам границы.
- Закругленные углы: 10 пикселей по всем четырем углам
Эффекты прокрутки
Последнее, но не менее важное, используйте вертикальное движение в настройках эффектов прокрутки. Это поможет нам создать плавающий эффект.
- Эффекты прокрутки: вертикальное движение
- Вертикальное движение / Настольный набор
- Начальное смещение: 4
- Среднее смещение: 0 (при 50%)
- Смещение окончания: -4
- Вертикальное движение / планшет и телефон
- Начальное смещение: 4
- Среднее смещение: 0 (при 40% и 60%)
- Конечное смещение: -3
- Эффект движения триггера: середина элемента
Настройки столбца 2
Позиция
Теперь перейдем к параметрам второго столбца. Соответственно отрегулируйте параметры положения.
- Должность: Относительная
- Начало смещения: вверху слева
- Вертикальное смещение
- Офис: 25vw
Эффекты прокрутки
Мы также добавляем вертикальное движение в этот столбец.
- Эффекты прокрутки: вертикальное движение
- Определить вертикальное / настольное движение
- Начальное смещение: 2
- Среднее смещение: 0 (при 50%)
- Конечное смещение: -2
- Определить вертикальное движение / планшет и телефон
- Начальное смещение: 0
- Среднее смещение: 0 (при 50%)
- Конечное смещение: -2
- Триггер эффекта движения: верх элемента
Добавить текстовый модуль в столбец 1
Содержание
Пришло время добавить модули, начиная с текстового модуля в столбце 1. Добавьте любое содержимое H2, которое хотите.
Текст заголовка
Перейдите на вкладку дизайна и стилизуйте текст H2 следующим образом.
- Уровень заголовка: H2
- Шрифт: Темный Паланкин
- Вес шрифта: жирный
- Стиль шрифта: TT
- Цвет: желтый # ffd868
- Размер
- Офис: 5vw
- Планшет: 10vw
- Телефон: 12vw
- Интервал между буквами: 4 пикселя
Добавьте модуль контактной формы в столбец 1
Содержание
Под текстовым модулем добавьте Контактная форма. Вот поля, которые мы используем:
- Фaмилия
- Эл. адрес
- материал
- Сообщение
Защита от спама
Прежде чем стилизовать модуль Контактная форма. включите защиту от спама и подключите свою учетную запись ReCaptcha.
- Использовать службу защиты от спама: Да
- Провайдер услуг: ReCaptcha
- Выберите аккаунт
Des Champs
Перейдите на вкладку дизайна и задайте стиль полей следующим образом.
- Цвет фона: темно-синий # 25274d
- Цвет текста: светло-серый # d1d1d1
- Цвет фона фокуса: темно-синий # 25274d
- Цвет текста фокуса: светло-серый # d1d1d1
- Шрифт: Паланкин
- Стиль: ТТ
- Размер текста
- Офис: 0.9vw
- Планшет: 2vw
- Телефон: 3vw
- Интервал между буквами: 1 пикселя
кнопка
Затем стилизуйте кнопку.
- Пользовательские стили: Да
- Размер текста: 20px
- Цвет текста: темно-синий # 25274d
- Цвет фона: желтый # ffd868
- Радиус границы: 7 пикселей
- Цвет значка: темно-синий # 25274d
- Верхнее поле: 5px
калибровка
Затем мы изменим параметры размеров.
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Мы также добавим верхний отступ.
- Верхняя обивка: 4vw
Граница
Заполните параметры модуля, настроив параметры границы.
- Входы с закругленными углами: 6 пикселей на четырех углах
- Стили границ записи: все четыре стороны
- Ширина входной границы: 2 пикселя
- Цвет границ записей: желтый # ffd868
Добавьте модуль отслеживания социальных сетей в столбец 2
Содержание
Перейдите в столбец 2 и добавьте модуль социальных сетей. Используйте все нужные вам социальные сети.
Залог
Перед стилем добавьте ссылки на соответствующие сети.
Контекст статьи
Теперь откройте первую социальную сеть и измените цвет фона.
- Цвет: темно-синий # 25274d
Значок элемента
На вкладке дизайна того же элемента измените настройки значка следующим образом.
- Цвет: желтый # ffd868
- Размер шрифта значка
- Рабочий стол и планшет: 31 px
- Телефон: 26 px
Расстояние между предметами
Затем добавьте небольшое поле, чтобы отделить значки друг от друга.
- Правое поле: 1vw
Копирование и вставка стилей элементов
Чтобы стилизовать остальные социальные сети, вернитесь в главное окно содержимого и скопируйте стили элементов из первого значка. Затем вставьте стили элементов в оставшиеся социальные сети.
Alignement
Перейдите на вкладку основного дизайна и убедитесь, что модуль выровнен по левому краю.
- Выравнивание модуля: слева
калибровка
Затем отрегулируйте размер модуля.
- Ширина: 100%
расстояние
Также очистите все заливки по умолчанию.
- Верхний, нижний, левый и правый отступы: 0vw
Граница
Наконец, добавьте закругленные углы в настройках границы. Это изменит границы всех значков сразу.
- закругленные углы
- Вверху слева и справа: 7 пикселей
- Внизу слева и справа: 0 пикселей
Добавить текстовый модуль в столбец 2
Содержание
Под модулем социальных сетей добавьте еще один текстовый модуль. Добавьте контент по вашему выбору. Мы добавили два адреса, номер телефона и электронную почту. Используйте жирный шрифт в названии каждого элемента заглавными буквами.
- Общая площадь: 1587 Sukhumvit Soi 21, Бангкок, Таиланд.
- Точка продажи : Emporium Mall, 2 этаж
- Телефон: (321) 564 2398
- Email : [электронная почта защищена]
контекст
Измените цвет фона модуля.
- Цвет: темно-синий # 25274d
Текст
Перейдите на вкладку дизайна и задайте стиль текста.
- Шрифт: Паланкин
- Цвет: желтый # ffd868
- Размер: 18 пикселей
расстояние
Также добавьте собственные значения интервала.
- Верхнее поле
- Офис: -60px
- Планшет и телефон: -50 пикселей
- Верхний, нижний, левый и правый отступы
- Офис: 3vw
- Планшет: 6vw
- Телефон: 8vw
Граница
И завершите модуль, добавив закругленные углы в настройках границы. Это оно!
- Закругленные углы: 10 пикселей вверху справа, внизу слева и внизу справа.
обследование
Теперь, когда мы закончили воссоздание раздела с плавающими контактами, взглянем в последний раз на результат на экранах разных размеров.
Дополнительные ресурсы
Это Ressources может быть дополнением к тому, что вы только что прочитали. Они могут использоваться дополнительно или теми, у кого нет Диви тема.
- Как добавить контактную форму на WordPress всплывающее окно
- Как добавить раскрывающуюся форму в глобальный заголовок Divi
- 5 плагинов для создания контактных форм
Закончить
Использование новых эффектов прокрутки Divi превращает любой стандартный макет в красивый дизайн. Создавая свой собственный фон, вы можете лучше контролировать внешний вид готового дизайна. Если у вас есть какие-либо вопросы или предложения, оставьте комментарий в разделе комментариев ниже!