Как создать анимированные переходы между страницами с помощью конструктора тем Divi

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

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

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

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

Анимированный переход страницы №1

Рабочий стол

Мобильный

Анимированный переход на страницу №2

Рабочий стол

Мобильный

Анимированный переход на страницу №3

Рабочий стол

Мобильный

Загрузите шаблоны страниц БЕСПЛАТНО

Чтобы получить доступ к бесплатным шаблонам страниц, вам сначала нужно загрузить их, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Перейдите в Divi Theme Builder и добавьте новый шаблон страницы.

Перейдите в конструктор тем Divi и добавьте новый шаблон

Первое, что вам нужно сделать, это зайти в конструктор тем Divi и нажать «Добавить новый шаблон».

Использовать шаблон на всех страницах

Используйте новый шаблон на всех страницах (или страницах, к которым нужно применить переход).

• Использовать на: Все страницы

Начать создание тела шаблона

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

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

Настройки раздела

Интервал

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

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

Видимость

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину контейнера раздела.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Мы также удаляем верхнее и нижнее заполнение строки по умолчанию. На этом этапе контейнеры раздела, строки и столбца имеют точно такой же размер. Между контейнерами вообще нет пробелов. Это важно для того, что будет на следующем этапе; добавление динамического содержимого страницы.

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

Добавить модуль содержимого публикации в столбец

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

3. Примените анимированный переход между страницами по вашему выбору.

Воссоздать анимированный переход страницы №1

Настройки раздела

Фоновый цвет

Пришло время применить анимированные переходы страниц! Мы делимся тремя разными примерами, но со встроенными опциями Divi возможности анимации безграничны. Чтобы применить первый анимированный переход страницы, откройте контейнер раздела и добавьте цвет фона.

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

Анимация

Мы также применяем к разделу следующие настройки анимации:

• Стиль анимации: слайд
• Направление анимации: вправо
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

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

Фоновый цвет

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

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

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вправо
• Задержка анимации: 500 мс
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

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

Фоновый цвет

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

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

Анимация

Также добавьте в столбец настраиваемую анимацию.

• Стиль анимации: слайд
• Направление анимации: влево
• Задержка анимации: 1200 мс
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

Настройки модуля публикации сообщений

Анимация

И последнее, но не менее важное: мы анимируем модуль содержимого публикации (содержащий все динамическое содержимое страницы).

• Стиль анимации: Затухание
• Задержка анимации: 2500 мс
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

Воссоздать анимированный переход страницы №2

Настройки раздела

Фоновый цвет

Хотите вместо этого создать вторую анимацию? Откройте настройки раздела и используйте следующий цвет фона:

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

Анимация

Затем примените к разделу настраиваемую анимацию.

• Стиль анимации: слайд
• Направление анимации: влево
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

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

Градиентный фон

Затем откройте настройки строки и используйте для нее следующий градиентный фон:

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Анимация

Также добавьте в строку настраиваемую анимацию.

• Стиль анимации: слайд
• Направление анимации: вверх
• Задержка анимации: 800 мс
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость в освоении
• Повтор анимации: один раз

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

Фоновый цвет

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

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

Анимация

Продолжите, добавив анимацию в столбец.

• Стиль анимации: слайд
• Направление анимации: вправо
• Задержка анимации: 2000 мс
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

Настройки модуля публикации сообщений

Анимация

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

• Стиль анимации: Затухание
• Задержка анимации: 3000 мс
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

Воссоздать анимированный переход страницы №3

Настройки раздела

Градиентный фон

Переход к следующей и последней анимационной странице! Откройте настройки раздела и используйте следующий градиентный фон:

• Цвет 1: # d8cdbe
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 20%
• Конечная позиция: 20%

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вниз
• Интенсивность анимации: 10%
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

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

Градиентный фон

Затем откройте настройки строки и примените градиентный фон:

• Цвет 1: #ffffff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 50%
• Конечная позиция: 50%

Анимация

Измените также настройки анимации строки.

• Стиль анимации: слайд
• Направление анимации: вниз
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость в освоении
• Повтор анимации: один раз

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

Фоновый цвет

Продолжите, открыв настройки столбца. Измените цвет фона.

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

Анимация

Примените к столбцу следующие настройки анимации:

• Стиль анимации: слайд
• Направление анимации: вниз
• Задержка анимации: 1500 мс
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

Настройки модуля публикации сообщений

Анимация

Завершите переход к третьей анимированной странице, применив следующие настройки анимации к модулю содержимого публикации:

• Стиль анимации: Затухание
• Задержка анимации: 3000 мс
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

6. Сохраните все изменения в построителе тем и результаты предварительного просмотра.

После того, как вы создали тело шаблона страницы и добавили анимированный переход между страницами по вашему выбору, вы можете сохранить все изменения в Конструкторе тем и просмотреть результат на своем веб-сайте!

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

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

Анимированный переход страницы №1

Рабочий стол

Мобильный

Анимированный переход на страницу №2

Рабочий стол

Мобильный

Анимированный переход на страницу №3

Рабочий стол

Мобильный

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

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

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