Как сделать так, чтобы контент скрытой строки появлялся при наведении курсора с помощью Divi (Скачать бесплатно!)

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

В этом уроке мы покажем вам, как создать определенный дизайн от А до Я, но как только вы освоите подход, вы сможете заставить его работать на любом веб-сайте, над которым вы работаете. В конце этого сообщения в блоге мы также поделимся файлом JSON с этим дизайном, который вы можете скачать БЕСПЛАТНО и использовать без каких-либо ограничений.

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

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

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

Рабочий стол

Мобильный

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

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

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

Начните с добавления нового раздела на новую или существующую страницу и измените цвет фона раздела.

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

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

Измените этот цвет фона при наведении курсора.

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

Интервал

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

• Верхняя маржа: 5vw
• Нижняя маржа: 5vw
• Левое поле: 3vw
• Правое поле: 3vw
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить строку №1

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

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

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

Еще не добавляя никаких модулей, откройте настройки строки и добавьте градиентный фон.

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

Размеры

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

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

Интервал

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

• Верхняя обивка: 9vw
• Нижняя обивка: 9vw
• Колонка 1, отступ слева: 5vw
• Правый отступ столбца 1: 5vw
• Колонка 2, отступ слева: 5vw
• Правый отступ столбца 2: 5vw

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

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

Пора начинать добавлять модули! Первый модуль, который нам понадобится, - это текстовый модуль в столбце 1. Добавьте контент H3 и ссылку.

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

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

• Шрифт ссылки: Didact Gothic
• Стиль шрифта ссылки: подчеркивание
• Стиль подчеркивания ссылки: сплошной
• Цвет текста ссылки: #ffffff
• Размер текста ссылки: 20 пикселей

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

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

• Шрифт заголовка 3: Didact Gothic
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 50 пикселей

Видимость

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

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

Видимость

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

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

Цвет

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

• Цвет: #ffffff

Интервал

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

• Верхнее поле: 11vw (Desktop), 80px (Tablet),
• Нижнее поле: 50 пикселей (планшет и телефон)

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

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

Переходим ко второй колонке! Добавьте текстовый модуль с некоторым содержанием H4 по выбору.

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

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

• Шрифт заголовка 4: Didact Gothic
• Толщина шрифта заголовка 4: полужирный
• Цвет текста заголовка 4: #ffffff
• Размер текста заголовка 4: 2vw (рабочий стол), 40 пикселей (планшет), 30 пикселей (телефон)

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

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

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

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

Далее перейдите к настройкам текста и внесите некоторые изменения.

• Шрифт текста: Didact Gothic
• Цвет текста: #ffffff
• Размер текста: 0.9vw (рабочий стол), 18px (планшет и телефон)
• Высота текстовой строки: 2em

Интервал

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

• Верхняя маржа: 2vw
• Правое поле: 15vw

Добавить строку №2

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

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

Размеры

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

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

Интервал

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

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

Видимость

И последнее, но не менее важное: скройте эту строку на планшете и телефоне.

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

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

Единственный модуль, который нам нужен в этой строке, - это текстовый модуль. Добавьте контент H3 и ссылку.

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

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

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

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

Измените этот цвет фона при наведении курсора.

• Цвет фона: rgba (255,255,255,0)

Настройки текста по умолчанию

Далее перейдите к настройкам текста и внесите некоторые изменения.

• Шрифт ссылки: Didact Gothic
• Стиль шрифта ссылки: подчеркивание
• Стиль подчеркивания ссылки: сплошной
• Цвет текста ссылки: #ffffff
• Размер текста ссылки: 0 пикселей
• Расстояние между буквами ссылки: -1px

Настройки текста ссылки при наведении

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

• Размер текста ссылки: 1.7vw

Настройки текста заголовка по умолчанию

Продолжите, внося некоторые изменения в настройки текста H3.

• Шрифт заголовка 3: Didact Gothic
• Толщина шрифта заголовка 3: полужирный
• Цвет текста заголовка 3: # 000000
• Размер текста заголовка 3: 12vw
• Интервал между буквами заголовка 3: -0,8vw

Настройки текста заголовка при наведении

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

• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 4vw
• Интервал между буквами заголовка 3: -0,2vw

Интервал

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

• Верхняя маржа: -34,3vw
• Нижняя маржа: -5vw
• Верхняя обивка: 10vw
• Нижняя обивка: 10vw
• Левое заполнение: 26,5 МВт

Расстояние при наведении

Измените значения интервала при наведении.

• Верхняя маржа: -34,1vw
• Нижняя маржа: -5vw
• Верхняя обивка: 12vw
• Нижняя обивка: 12vw
• Левое заполнение: 11,5 МВт

Переходы

Увеличьте также продолжительность перехода текстового модуля.

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

Раздел клонирования

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

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

Первое, что вам нужно изменить, - это цвет фона при наведении курсора.

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

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

Также измените градиентный фон строки №1.

• Цвет 1: # 000000

Изменить цвет текста и скопировать

Вместе с цветом текста и всей копией.

• Цвет текста заголовка 3: # ff5b79

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

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

• Левый отступ: 21vw

Скачать макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

Рабочий стол

Мобильный

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

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