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

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

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

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

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Пример # 3

Рабочий стол

Мобильный

Загрузите макеты тонких движущихся фигур БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Общие шаги

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

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

Добавить новую строку в конец секции №1

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

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

Размеры

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

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

Интервал

Измените также значения полей и отступов.

• Верхняя маржа: 10vw
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Удалите нижнюю прокладку секции №1.

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

• Нижняя обивка: 0vw

Воссоздать пример №1

Добавить модуль делителя # 1

Видимость

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

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

Линия

Перейдите на вкладку дизайна модуля и измените цвет линии.

• Цвет линии: # ffa100

Размеры

Измените также настройки размера модуля.

• Вес разделителя: 50 пикселей
• Высота: 50 пикселей

Интервал

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

• Левое поле: -200 пикселей (только для планшетов и телефонов)
• Правое поле: -200 пикселей (только для планшетов и телефонов)
• Левое заполнение: 15vw
• Правое заполнение: 15vw

Преобразовать перекос

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

• Внизу: 60 градусов

Эффект горизонтальной прокрутки движения

Пришло время добавить в наш модуль различные эффекты прокрутки! Сначала мы добавим горизонтальное движение.

• Включить горизонтальное движение: Да
• Начальное смещение: 0
• Среднее смещение: 0 (при 80%)
• Конечное смещение:
  • Рабочий стол: 20 (при 85%)
  • Планшет и телефон: 5 (при 85%)

Эффект постепенного появления и исчезновения прокрутки

Мы также добавим эффект плавного появления и исчезновения.

• Включить постепенное появление и исчезновение: Да
• Начальная непрозрачность: 0%
• Средняя непрозрачность: 0% (при 36%)
• Конечная непрозрачность: 100% (при 40%)

Масштабирование эффекта прокрутки вверх и вниз

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

• Включить масштабирование вверх и вниз: Да
• Начальный масштаб: 20%
• Средний масштаб: 50% (при 69%)
• Конечный масштаб: 100% (при 73%)

Модуль разделения клонов №1

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

Изменить цвет линии

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

• Цвет линии: # 24252d

Изменить интервал

Измените также значения интервалов модуля.

• Левое поле: -200 пикселей (только для планшетов и телефонов)
• Правое поле: -200 пикселей (только для планшетов и телефонов)
• Левое заполнение: 25vw
• Правое заполнение: 25vw

Изменить эффект горизонтальной прокрутки движения

Затем перейдите к эффектам прокрутки на вкладке «Дополнительно» и измените конечное смещение эффекта прокрутки горизонтального движения.

• Конечное смещение:
  • Рабочий стол: -20
  • Планшет и телефон: -5

Воссоздать пример №2

Добавить модуль делителя # 1

Видимость

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

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

Линия

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

• Цвет линии: # ffa100

Размеры

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

• Вес разделителя: 200 пикселей
• Ширина: 200 пикселей
• Выравнивание модуля: по центру
• Высота: 200 пикселей

Граница

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

• Все углы: 200 пикселей

Эффект горизонтальной прокрутки движения

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

• Включить горизонтальное движение: Да
• Начальное смещение: -2
• Среднее смещение: 0
• Конечное смещение:
  • Рабочий стол: 20
  • Планшет и телефон: 5

Масштабирование эффекта прокрутки вверх и вниз

Затем мы также включим эффект увеличения и уменьшения масштаба.

• Включить масштабирование вверх и вниз: Да
• Начальный масштаб: 20%
• Средний масштаб: 100%
• Конечный масштаб: 100%

Модуль разделения клонов

Идите вперед и клонируйте весь модуль разделителя.

Изменить цвет линии

Откройте дубликат и измените цвет линии.

• Цвет линии: # 24252d

Изменить интервал

Также добавьте немного верхнего поля.

• Верхнее поле: -200 пикселей

Изменить эффект горизонтальной прокрутки движения

Затем перейдите к настройкам эффекта горизонтальной прокрутки и измените конечное смещение.

• Конечное смещение:
  • Рабочий стол: -20
  • Планшет и телефон: -5

Воссоздать пример №3

Добавить отступы строки

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

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

Добавить модуль делителя # 1

Видимость

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

• Показать разделитель: Нет

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

Затем добавьте градиентный фон.

• Цвет 1: # ffa100
• Цвет 2: # f77f00
• Тип градиента: линейный
• Направление градиента: 121 град.

Размеры

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

• Ширина: 200 пикселей
• Выравнивание модуля: по центру
• Высота: 0 пикселей

Интервал

Далее мы добавляем пользовательские отступы сверху и снизу.

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

Эффект горизонтальной прокрутки движения

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

• Включить горизонтальное движение: Да
• Начальное смещение: -1 (при 30%)
• Среднее смещение: 0
• Конечное смещение:
  • Рабочий стол: 20
  • Планшет и телефон: 5

Эффект вращающейся прокрутки

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

• Включить вращение: Да
• Начальное вращение: 0 ° (при 46%)
• Среднее вращение: 50 ° (при 75%)
• Конечное вращение: 90 °

Модуль разделения клонов

Идите вперед и клонируйте весь модуль.

Изменить градиентный фон

Откройте настройки дубликата и измените цвета фона градиента.

• Цвет 1: # 24252d
• Цвет 2: # 16161c

Изменить интервал

Добавьте отрицательное верхнее поле.

• Верхнее поле: -100 пикселей

Изменить эффект горизонтальной прокрутки

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

• Конечное смещение:
  • Рабочий стол: -20
  • Планшет и телефон: -5

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

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Пример # 3

Рабочий стол

Мобильный

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

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

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