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

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

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

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

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

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

Пример # 1

Пример # 2

Загрузите наложения фигурных изображений

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

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

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

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

СКАЧАТЬ

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

Начнем творить!

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

Фоновый цвет

Stary, создав новую страницу или открыв существующую. Добавьте к нему обычный раздел, откройте настройки раздела и добавьте полностью черный цвет фона.

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

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

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

overflow: hidden;

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

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

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

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

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

Загрузить накладываемое изображение в форме

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

Цвет фона по умолчанию

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

• Цвет фона: # 6a00ff

Цвет фона при наведении

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

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

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

Продолжите, добавив градиентный фон и в модуль изображения.

• Цвет 1: # ff2841
• Цвет 2: rgba (255,255,255,0)
• Направление градиента: 168 градусов
• Конечная позиция: 68%

Размеры

Перейдите на вкладку дизайна и включите опцию Force Fullwidth.

• Принудительная полная ширина: Да

Интервал

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

• Верхняя маржа: -22vw (настольный компьютер и планшет), 0vw (телефон)

Преобразование по умолчанию Поворот

Теперь мы можем приступить к преобразованию модуля! Добавьте следующие настройки поворота преобразования по умолчанию в модуль изображения:

• Центр: 359 градусов

При наведении курсора Преобразовать Повернуть

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

• Слева: 250 градусов
• Центр: 320 градусов

CSS ID

При наведении указателя мыши на модуль изображения наложение фигурного изображения будет перекрывать все остальные модули, расположенные поверх него. Чтобы этого избежать, нам нужно будет изменить z-index модуля при наведении курсора позже в публикации. Для этого вам нужно добавить собственный класс CSS в модуль изображения.

Переходы

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

• Продолжительность перехода: 950 мс

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

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

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

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

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

• Шрифт заголовка 2: Didact Gothic
• Толщина шрифта заголовка 2: полужирный
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2: 7vw
• Высота строки заголовка 2: 0.9em

Интервал

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

• Верхняя маржа: -68vw
• Нижняя маржа: 8vw
• Левое поле: 29vw
• Правое поле: 29vw

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

Добавить содержимое

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

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

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

• Шрифт текста: Open Sans
• Цвет текста: #ffffff
• Размер текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Высота текстовой строки: 1,8 м
• Ориентация текста: по центру

Интервал

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

• Нижнее поле: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
• Левое поле: 30vw (рабочий стол), 10vw (планшет и телефон)
• Правое поле: 30vw (рабочий стол), 10vw (планшет и телефон)

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

Видимость

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

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

Цвет

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

• Цвет: #ffffff

Размеры

Также измените значения размеров.

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

Интервал

И добавьте немного настраиваемого нижнего отступа.

• Нижняя маржа: 5vw

Клонировать весь раздел

Переходим ко второму примеру! Клонируйте только что завершенный раздел.

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

Загрузить новое наложение изображения

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

Изменить цвет фона по умолчанию

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

• Цвет фона: # 2d007c

Изменить цвет фона при наведении

Также измените цвет фона при наведении.

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

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

Вместе с градиентным фоном.

• Цвет 1: # 0c0c0c
• Цвет 2: rgba (255,255,255,0)
• Направление градиента: 168 градусов
• Конечная позиция: 68%

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

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

• Слева: 270 градусов
• Центр: 359 градусов

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

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

• Слева: 192 град.
• Центр: 280 градусов
• Справа: 15 градусов

Добавить собственный код на страницу

Открыть настройки страницы

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

Добавить код CSS

Затем перейдите на вкладку «Дополнительно» и добавьте следующий код CSS.

.hover-state:hover {
z-index: -99; }

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

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

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

Пример # 1

Пример # 2

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

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