Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Ниже вы найдете бесплатно загружаемый файл с макетом JSON для загрузки в вашу собственную библиотеку Divi. Мы также включили шаблон PSD, который поможет вам воссоздать фон карты, а также значок SVG карты, чтобы вы могли настроить его своими собственными цветами.

Создать элементную структуру

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

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

Пришло время приступить к созданию раздела плавающих контактов с помощью Divi Builder! Первое, что мы сделаем, это откроем новую или существующую страницу и добавим новый раздел.

На вкладке содержимого добавьте фон карты, созданной в Photoshop.

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

расстояние

Затем настройте параметры расстояния между секциями на вкладке дизайна.

  • Верхний и нижний край: 50vh
  • Нижняя обивка: 0vw
Конфигурация расстояния между секциями Divi 1

видимость

Затем установите переполнения на видимое.

  • Горизонтальное и вертикальное переполнение: видимый
секция плавающего контакта

Позиция

Наконец, установите индекс Z секции равным 10.

  • Индекс Z: 10
Положение раздела Divi

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

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

Пришло время добавить несколько вещей. Сначала добавьте строку из 2 столбцов.

В строке два столбца divi

калибровка

Откройте параметры линии и отрегулируйте размеры следующим образом.

  • Ширина
    • Офис: 90%
    • Планшет и телефон: 80%
  • Максимальная ширина: 90%
Параметр линии Divi

видимость

Щелкните вкладку «Дополнительно» и затем настройте переполнение.

  • Горизонтальное и вертикальное переполнение: видимый
Конфигурация переполнения линии Divi

Позиция

Завершите настройки строки, изменив настройки положения.

  • Должность: Относительная
  • Смещение происхождения: вверху слева
  • Вертикальное смещение
    • Рабочий стол: -8vw
Настроить позицию строки divi

Настройки столбца 1

проверка данных

Перед добавлением модулей нам нужно стилизовать отдельные столбцы. Добавьте цвет фона в столбец 1.

  • Сплошной цвет: # 25274d
Цвет столбца 1 дел.

Расстояние

Отрегулируйте настройки расстояния дальше.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

  • Верхняя и нижняя обивка
    • Рабочий стол и планшет: 7vw
  • Левая и правая обивка
    • Рабочий стол: 3vw
    • Планшет и телефон: 6vw
Конфигурация расстояния между секциями двух столбцов

Граница

Затем добавьте несколько закругленных углов к настройкам границы.

  • Закругленные углы: 10 пикселей по всем четырем углам
Разделение с закругленными краями

Эффекты прокрутки

Последнее, но не менее важное, используйте вертикальное движение в настройках эффектов прокрутки. Это поможет нам создать плавающий эффект.

  • Эффекты прокрутки: вертикальное движение
  • Вертикальное движение / Настольный набор
    • Начальное смещение: 4
    • Среднее смещение: 0 (при 50%)
    • Смещение окончания: -4
  • Вертикальное движение / планшет и телефон
    • Начальное смещение: 4
    • Среднее смещение: 0 (при 40% и 60%)
    • Конечное смещение: -3
  • Эффект движения триггера: середина элемента
Настроить эффект прокрутки раздела divi

Настройки столбца 2

Позиция

Теперь перейдем к параметрам второго столбца. Соответственно отрегулируйте параметры положения.

  • Должность: Относительная
  • Начало смещения: вверху слева
  • Вертикальное смещение
    • Офис: 25vw
Настройка столбца Divi

Эффекты прокрутки

Мы также добавляем вертикальное движение в этот столбец.

  • Эффекты прокрутки: вертикальное движение
  • Определить вертикальное / настольное движение
    • Начальное смещение: 2
    • Среднее смещение: 0 (при 50%)
    • Конечное смещение: -2
  • Определить вертикальное движение / планшет и телефон
    • Начальное смещение: 0
    • Среднее смещение: 0 (при 50%)
    • Конечное смещение: -2
  • Триггер эффекта движения: верх элемента
Эффект прокрутки Divi

Добавить текстовый модуль в столбец 1

Содержание

Пришло время добавить модули, начиная с текстового модуля в столбце 1. Добавьте любое содержимое H2, которое хотите.

Модуль содержимого столбца 1

Текст заголовка

Перейдите на вкладку дизайна и стилизуйте текст H2 следующим образом.

  • Уровень заголовка: H2
  • Шрифт: Темный Паланкин
  • Вес шрифта: жирный
  • Стиль шрифта: TT
  • Цвет: желтый # ffd868
  • размер
    • Офис: 5vw
    • Планшет: 10vw
    • Телефон: 12vw
  • Интервал между буквами: 4 пикселя
Настройка шрифта Divi вверху

Добавьте модуль контактной формы в столбец 1

Содержание

Под текстовым модулем добавьте контактную форму. Вот поля, которые мы используем:

  • Фaмилия
  • Эл. адрес
  • материал
  • Сообщение
Добавить контактную форму divi

Защита от спама

Перед стилизацией модуля контактной формы. активируйте защиту от спама и подключите свой аккаунт ReCaptcha.

  • Использовать службу защиты от спама: Да
  • Провайдер услуг: ReCaptcha
  • Выберите аккаунт
Контактная форма Divi защита от спама

Des Champs

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

  • Цвет фона: темно-синий # 25274d
  • Цвет текста: светло-серый # d1d1d1
  • Цвет фона фокуса: темно-синий # 25274d
  • Цвет текста фокуса: светло-серый # d1d1d1
  • Шрифт: Паланкин
  • Стиль: ТТ
  • Размер текста
    • Офис: 0.9vw
    • Планшет: 2vw
    • Телефон: 3vw
  • Интервал между буквами: 1 пикселя
Настроить поля цветов 1

кнопка

Затем стилизуйте кнопку.

  • Пользовательские стили: Да
  • Размер текста: 20px
  • Цвет текста: темно-синий # 25274d
  • Цвет фона: желтый # ffd868
  • Радиус границы: 7 пикселей
  • Цвет значка: темно-синий # 25274d
  • Верхнее поле: 5px
Настроить стиль кнопки divi 1
Конфигурация цвета кнопки Divi

калибровка

Затем мы изменим параметры размеров.

  • Ширина: 100%
  • Максимальная ширина: 100%
Конфигурация размеров Divi

расстояние

Мы также добавим верхний отступ.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

  • Верхняя обивка: 4vw
Divi интервал

Граница

Заполните параметры модуля, настроив параметры границы.

  • Входы с закругленными углами: 6 пикселей на четырех углах
  • Стили границ записи: все четыре стороны
  • Ширина входной границы: 2 пикселя
  • Цвет границ записей: желтый # ffd868
Конфигурация границы Divi

Добавьте модуль отслеживания социальных сетей в столбец 2

Содержание

Перейдите в столбец 2 и добавьте модуль социальных сетей. Используйте все нужные вам социальные сети.

  • Facebook
  • Twitter
  • LinkedIn
Модуль следите за нами в социальных сетях

Залог

Перед стилем добавьте ссылки на соответствующие сети.

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

Теперь откройте первую социальную сеть и измените цвет фона.

  • Цвет: темно-синий # 25274d
Изменить фон divi 1

Значок элемента

На вкладке дизайна того же элемента измените настройки значка следующим образом.

  • Цвет: желтый # ffd868
  • Размер шрифта значка
    • Рабочий стол и планшет: 31 px
    • Телефон: 26 px
Настроить цвет divi

Расстояние между предметами

Затем добавьте небольшое поле, чтобы отделить значки друг от друга.

  • Правое поле: 1vw
Конфигурация интервала публикации в социальных сетях

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

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

Копировать элемент стиля
Вставить элемент стиля divi

Alignement

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

  • Выравнивание модуля: слева
Выберите выравнивание

калибровка

Затем отрегулируйте размер модуля.

  • Ширина: 100%
Настроить размер divi

расстояние

Также очистите все заливки по умолчанию.

  • Верхний, нижний, левый и правый отступы: 0vw
Настроить интервал divi

Граница

Наконец, добавьте закругленные углы в настройках границы. Это изменит границы всех значков сразу.

  • закругленные углы
    • Вверху слева и справа: 7 пикселей
    • Внизу слева и справа: 0 пикселей
Конфигурация границы модуля Divi

Добавить текстовый модуль в столбец 2

Содержание

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

Конфигурация адреса текстового модуля Divi

контекст

Измените цвет фона модуля.

  • Цвет: темно-синий # 25274d
Конфигурация фона текстового модуля

Текст

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

  • Шрифт: Паланкин
  • Цвет: желтый # ffd868
  • Размер: 18 пикселей
Шрифт текста модуля Divi

расстояние

Также добавьте собственные значения интервала.

  • Верхнее поле
    • Офис: -60px
    • Планшет и телефон: -50 пикселей
  • Верхний, нижний, левый и правый отступы
    • Офис: 3vw
    • Планшет: 6vw
    • Телефон: 8vw
Поле для интервала Divi

Граница

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

  • Закругленные углы: 10 пикселей вверху справа, внизу слева и внизу справа.
Текстовый модуль divi с закругленными краями

обследование

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

секция плавающего контакта

Дополнительные ресурсы

Эти ресурсы могут дополнять то, что вы только что прочитали. Их могут использовать дополнительно или те, у кого нет темы Divi.

Закончить

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация