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

Ищете уникальный способ привлечь внимание к определенной части вашей страницы? Продолжайте читать! Сегодня мы собираемся показать вам, как создавать анимированные перекрытия границ, чтобы выделить контент на вашей странице. Мы создадим три разных анимированных перекрытия границ на целевой странице App Developer Layout Pack, но вы можете использовать этот метод для любого типа веб-сайта, который вы создаете. Это определенно поможет вам добавить дополнительное измерение к вашей странице. Мы надеемся, что этот урок вдохновит вас на создание собственных альтернативных анимированных перекрытий границ.

Давайте приступим к делу!

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

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

Пример # 1

Пример # 2

Пример # 3

Подпишитесь на наш канал Youtube

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

Первое, что вам нужно сделать, это создать новую страницу, используя целевую страницу App Developer Layout Pack.

Раздел клонов-героев

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

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

Добавить новую строку в раздел героя

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

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

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

Оставьте поле содержимого пустым

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

Интервал

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

• Верхнее поле: -480 пикселей
• Верхний отступ: 223 пикс.
• Нижний отступ: 223 пикселя

Граница

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

• Ширина границы: 9 пикселей
• Цвет границы: # 0ae2ff
• Стиль границы: Начало

Коробка Тень

Также добавьте тень от коробки.

• Сила размытия тени коробки: 1 пикс.
• Сила распространения тени коробки: 15 пикселей
• Цвет тени: rgba (10,226,255,0.59)

Анимация

И поиграйте с настройками анимации, чтобы контент стал ярким.

• Стиль анимации: флип
• Повтор анимации: один раз
• Направление анимации: вправо
• Продолжительность анимации: 1500 мс
• Задержка анимации: 1500 мс
• Интенсивность анимации: 500%

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

Добавить новую строку в раздел дубликата героя

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

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

Оставьте поле содержимого пустым

Мы снова используем пустой текстовый модуль.

Интервал

Перейдите к настройкам интервалов и придайте модулю форму с помощью настраиваемого верхнего и нижнего отступов. Сделайте его перекрывающим с предыдущими модулями, добавив также отрицательное верхнее поле.

• Верхнее поле: -480 пикселей
• Верхний отступ: 223 пикс.
• Нижний отступ: 223 пикселя

Граница

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

• Ширина границы: 9 пикселей
• Цвет границы: # 0ae2ff
• Стиль границы: Двойной

Анимация

И поиграйте с настройками анимации, чтобы создать эффект качения.

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

Клонировать текстовый модуль

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

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

Откройте настройки дубликата и измените значение верхнего поля в настройках интервала.

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

Изменить границу

Также измените цвет границы.

• Цвет границы: #ededed

Изменить анимацию

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

• Повтор анимации: цикл
• Продолжительность анимации: 5000 мс
• Задержка анимации: 2000 мс

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

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

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

• Верхнее поле: 70 пикселей (рабочий стол), 0 пикселей (планшет и телефон)

Добавить цвет фона в существующие текстовые модули

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

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

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

Оставьте поле содержимого пустым

Теперь мы можем начать добавлять первое перекрытие анимированных границ! Добавьте новый текстовый модуль в первый столбец (см. Экран печати) и убедитесь, что вы оставили поле содержимого пустым.

Интервал

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

• Верхнее поле: -230 пикселей
• Левое поле: 80 пикселей
• Правое поле: 100 пикселей
• Верхний отступ: 120 пикселей
• Нижний отступ: 120 пикселей

Граница

Далее добавьте границу.

• Ширина границы: 13 пикселей
• Цвет границы: # bcf5f3
• Стиль границы: Двойной

Анимация

Продолжите, добавив анимацию по вашему выбору, которая поможет вам выделить контент, которым вы делитесь.

• Стиль анимации: сложить
• Повтор анимации: один раз
• Направление анимации: вправо
• Интенсивность анимации: 100%

Индекс Z

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

• Индекс Z: -1

Клонировать текстовый модуль и поместить в конец столбца 1

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

Изменить границу

Измените цвет границы.

• Цвет границы: # ffc0ec

Изменить анимацию

И также добавьте задержку анимации.

• Задержка анимации: 1000 мс

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

Оставьте поле содержимого пустым

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

Интервал

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

• Верхнее поле: -230 пикселей
• Левое поле: 100 пикселей
• Правое поле: -80 пикселей
• Верхний отступ: 120 пикселей
• Нижний отступ: 120 пикселей

Граница

Затем добавьте границу по вашему выбору.

• Ширина границы: 13 пикселей
• Цвет границы: # 7479ff
• Стиль границы: Двойной

Анимация

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

• Стиль анимации: сложить
• Повтор анимации: один раз
• Направление анимации: влево
• Задержка анимации: 2000 мс
• Интенсивность анимации: 100%

Индекс Z

Убедитесь, что модуль отображается под содержимым, используя отрицательный индекс Z.

• Индекс Z: -1

Клонировать текстовый модуль и поместить в конец столбца 3

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

Изменить границу

Измените цвет границы дубликата.

• Цвет границы: # b3d1ff

Изменить анимацию

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

• Задержка анимации: 3000 мс

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

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

Пример # 1

Пример # 2

Пример # 3

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

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