Пропустить

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

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

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

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

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

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

Пойдем.

Возможный результат

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

Переход между разделом divi

1, воссоздать структуру элементов

Добавить раздел № 1

расстояние

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

  • Верхний отступ: 80px (рабочий стол и планшет), 0px (телефон)
  • Нижняя обивка: 80px
Раздел параметров Divi

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

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

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

калибровка

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

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 1
  • Ширина: 90%
  • Максимальная ширина: 1580 пикселей
Конфигурация Divi Spacing

расстояние

Затем добавьте пользовательский верхний и нижний поля.

  • Верхнее поле: 200px
  • Нижнее поле: 200px
Конфигурация межстрочного интервала Divi

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

Добавить контент H2

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

Наши услуги, предлагаемые экспертами на данный момент

Настройки текста H2

Перейдите на вкладку «Дизайн модуля» и измените параметры текста H2 следующим образом:

  • Название 2 Полиция: ежеквартально
  • Заголовок 2 Размер текста: 80px (рабочий стол), 50px (планшет), 40px (телефон)
  • Высота линии 2 головы: 1.2em
Главный дивизион полиции

расстояние

Затем добавьте нижнее поле для планшета и телефона.

  • Нижнее поле: 50 пикселей (только для планшета и телефона)
Конфигурация интервалов текста Divi

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

Добавить контент

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

Текстовое поле divi содержимого

Настройки текста

Перейдите на вкладку «Дизайн модуля» и измените настройки текста соответствующим образом:

  • Шрифт текста: кабина
  • Стиль шрифта текста: заглавные
  • Цвет текста: # 000000
  • Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
  • Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
  • Высота строки текста: 3em
Текстовый параметр Divi

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

видимость

Следующий и последний модуль, который нам нужен в этом столбце, - это модуль разделения. Убедитесь, что опция «Показать разделитель» активирована.

  • Показать разделитель: Да
Видимый разделитель

Линия

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

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

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

  • Цвет линии: # 000000
Цвет фона разделителя

калибровка

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

  • Вес делителя: 3px
  • Ширина: 28%
Размер разделителя Divi

расстояние

Мы также добавляем верхнее поле.

  • Верхнее поле: 10px
Расстояние между разделительными модулями Divi

Добавить раздел № 2

расстояние

Давайте перейдем к следующему регулярному разделу. Удалите верхний отступ по умолчанию из раздела.

  • Верхняя обивка: 0px
Раздел 2 divi spacing

переполнение

Также скрыть переполнения.

  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый
Скрыть переполнение модуля divi

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

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

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

Выберите макет divi

калибровка

Не добавляя больше модулей, откройте параметры линии, получите доступ к параметрам определения размера и внесите следующие изменения:

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 1
  • Выровнять высоту столбца: Да
  • Ширина: 90%
  • Максимальная ширина: 1580 пикселей
Раздел divi конфигурации желоба

расстояние

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

  • Верхняя обивка: 0px
  • Нижняя обивка: 0px
Настройки интервала линейного модуля Divi 1

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

Цвет фона

Затем откройте настройки в столбце 1 и измените цвет фона.

  • Цвет фона: # f7f7f7
Фоновая конфигурация модуля линии Divi

расстояние

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

  • Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
  • Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
  • Левый отступ: 8%
  • Правый отступ: 8%
Настройки столбца модуля строки

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

расстояние

Для продолжения откройте настройки в столбце 2. Перейдите на вкладку «Дополнительно» и добавьте настраиваемые значения заливки на экранах разных размеров.

  • Верхнее заполнение: 100px (рабочий стол), 50px (планшет и телефон)
  • Нижняя обивка: 200px
  • Отступ слева: 150 пикселей (стол), 0 пикселей (планшет и телефон)
Настройки расстояния между модулями Divi

Добавьте модуль разделения в столбец 1

видимость

В первом столбце первый модуль, который нам нужен, это модуль разделения. Убедитесь, что опция «Показать разделитель» активирована.

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

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

  • Показать разделитель: Да
Показать разделитель divi 1

Линия

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

  • Цвет линии: # 000000
Настройки разделителя Divi

калибровка

Также внесите изменения в параметры размеров.

  • Вес делителя: 3px
  • Ширина: 50%
Размер разделителя Divi

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

Добавить контент H3

Следующий модуль, который нам нужен в столбце 1, - это текстовый модуль с содержимым H3.

Настройка раздела содержимого Divi

Настройки текста H3

Перейдите на вкладку «Дизайн модуля» и измените параметры текста H3:

  • Название 3 Полиция: ежеквартально
  • Цвет текста элемента 3: # 000000
  • Элемент 3 Размер текста: 50px (рабочий стол), 40px (планшет), 35px (телефон)
  • Высота линии 3 головы: 1.1em

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

Добавить контент

Во втором столбце первый модуль, который нам нужен, это текстовый модуль с некоторым содержанием описания.

Настройка текстового модуля Divi

Настройки текста

Измените настройки текста модуля следующим образом:

  • Шрифт текста: кабина
  • Стиль шрифта текста: заглавные
  • Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
  • Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
  • Высота строки текста: 3em
Настройка шрифта формы текста Divi

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

Добавить копию

Следующий и последний модуль, который нам нужен, - это кнопочный модуль. Введите копию на ваш выбор.

Настройка содержимого текстового модуля

Настройки кнопок

Затем стиль кнопки.

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 20 пикселей
  • Цвет текста кнопки: #ffffff
  • Цвет фона кнопки: # 000000
  • Ширина границы кнопки: 0 пикселей
Настройка стиля кнопки Divi
  • Шрифт кнопки: ежеквартально
  • Вес шрифта кнопки: жирный
Настройки цвета кнопки Divi

расстояние

Также добавьте пользовательские отступы.

  • Верхняя обивка: 50px
  • Нижняя обивка: 50px
  • Левый отступ: 100px
  • Правый отступ: 100 пикселей
Настройки расстояния между кнопками модуля Divi

Позиция

И переместите кнопку соответственно:

  • Позиция: Абсолют
  • Расположение: внизу слева
Регулировка положения модуля кнопок Divi

Клонируйте линию столько раз, сколько необходимо

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

Клонировать модуль divi

Изменить весь контент

Не забудьте отредактировать все содержимое в двух строках.

Редактировать содержимое раздела divi

2. Применить эффекты прокрутки

Эффекты прокрутки первого ряда

Горизонтальное движение

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

  • Активировать горизонтальное движение: Да
  • Начальное смещение: -5
  • Среднее смещение: 0 (при 26%)
  • Конечное смещение: 0
  • Триггер эффекта движения: середина элемента
Применить эффекты прокрутки divi

Исчезать и исчезать

Также используйте входящий и исходящий эффект затухания.

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 100%
  • Средняя непрозрачность: 100% (при 50%)
  • Конечная непрозрачность: 0% (до 53%)
  • Триггер эффекта движения: середина элемента
Настроить раздел divi с затухающей анимацией

Эффекты прокрутки среднего ряда

Вертикальное движение

Затем мы добавим эффекты прокрутки ко всем строкам между первой и последней строками раздела. Сначала используйте вертикальное движение:

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

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

  • Активировать вертикальное движение: Да
  • Начальное смещение: -4
  • Среднее смещение: 0 (при 26%)
  • Конечное смещение: 0
  • Эффект запуска движения: середина элемента
Конфигурация анимации прокрутки Divi

Исчезать и исчезать

Также активируйте эффект затухания.

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 0%
  • Средняя непрозрачность: 100% (от 27% до 50%)
  • Конечное смещение: 0 (при 53%)
  • Триггер эффекта движения: середина элемента
Анимация затухания линии Divi

Эффекты прокрутки последней строки

Вертикальное движение

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

  • Активировать вертикальное движение: Да
  • Начальное смещение: -4
  • Среднее смещение: 0 (при 26%)
  • Конечное смещение: 0
  • Триггер эффекта движения: середина элемента
Модуль анимации прокрутки divi line

Исчезать и исчезать

С входящим и исходящим эффектом исчезновения, и все готово!

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 0%
  • Средняя непрозрачность: 100% (от 27% до 50%)
  • Конечная непрозрачность: 100% (до 53%)
  • Триггер эффекта движения: середина элемента
Настройки анимации внешнего вида модуля Divi Line

Конечный результат

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

Финальная демонстрация

Заключительные мысли

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

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

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

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

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

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