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

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

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

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

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

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

Рабочий стол

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

Мобильный

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

Начнем воссоздавать!

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

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

Интервал

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

• Верхняя обивка: 10vw
• Нижняя обивка: 15vw

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

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

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

Размеры

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

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

Интервал

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

• Левое заполнение: 8vw
• Правое заполнение: 8vw
• Правый отступ столбца 1: 2vw
• Колонка 2, отступ слева: 1vw
• Правый отступ столбца 2: 1vw
• Колонка 3, отступ слева: 2vw

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

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

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

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

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

• Шрифт заголовка 3: Didact Gothic
• Толщина шрифта заголовка 3: полужирный
• Выравнивание текста заголовка 3: по центру
• Цвет текста заголовка 3: # 3567ff
• Размер текста заголовка 3: 1.2vw (рабочий стол), 20px (планшет и телефон)

Интервал

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

• Нижняя маржа: 4vw
• Верхняя обивка: 4vw
• Нижняя обивка: 4vw

Коробка Тень

И дайте модулю тонкую тень коробки.

• Положение прямоугольной тени по вертикали: 36 пикселей
• Сила размытия тени коробки: 60 пикселей
• Цвет тени: rgba (0,0,0,0.06)

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

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

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

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.8vw (рабочий стол), 14px (планшет и телефон)
• Расстояние между буквами в тексте: -0.05vw
• Высота текстовой строки: 2.2em
• Ориентация текста: по ширине
• Цвет текста: темный

Интервал

Поэкспериментируйте с пользовательскими значениями полей и отступов в настройках интервалов.

• Нижняя маржа: 3vw
• Верхняя обивка: 2vw
• Нижняя обивка: 2vw
• Левый отступ: 4vw
• Правое заполнение: 4vw

Граница

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

• Ширина правой границы: 1 пикс.
• Цвет правой границы: # e5e5e5

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

Добавить копию

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

Выравнивание

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

• Расположение кнопок: по центру

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 15px (планшет и телефон)
• Цвет текста кнопки: # 000000
• Ширина границы кнопки: 1 пиксель
• Цвет границы кнопки: #dddddd
• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопок: -0.05vw
• Толщина шрифта: полужирный
• Стиль шрифта: прописные

Интервал

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

• Нижнее поле: 100 пикселей (планшет и телефон)
• Верхнее заполнение: 0,8vw (рабочий стол), 10px (планшет и телефон)
• Нижняя прокладка: 0,8vw (рабочий стол), 10px (планшет и телефон)
• Отступ слева: 3.5vw (рабочий стол), 50px (планшет и телефон)
• Правое поле: 3.5vw (рабочий стол), 50px (планшет и телефон)

Клонировать модули в столбце 1 дважды и разместить дубликаты в оставшихся столбцах

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

Изменить цвет текста текстового модуля №1 в столбце 2

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

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

Изменить цвет текста текстового модуля №1 в столбце 3

Сделайте то же самое для первого текстового модуля в третьем столбце.

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

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

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

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

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

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

• Цвет 1: # 6a30ff
• Цвет 2: # 3567ff
• Направление градиента: 124 град.

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

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

• Шрифт текста: Didact Gothic
• Цвет текста: #ffffff
• Размер текста: 2vw
• Ориентация текста: по центру

Интервал

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

• Верхняя маржа: -38vw
• Верхняя обивка: 15vw
• Нижняя обивка: 15vw

Граница

Затем добавьте закругленные углы к текстовому модулю.

Коробка Тень

Наряду с тонкой тенью коробки.

• Сила размытия тени коробки: 40 пикселей
• Цвет тени: rgba (0,0,0,0.16)

Фильтры по умолчанию

Затем перейдите к настройкам фильтров и убедитесь, что непрозрачность по умолчанию равна «100%».

• Непрозрачность: 100%

Фильтры при наведении

Измените непрозрачность при наведении на «0%». Это приведет к исчезновению модуля и позволит отображать вместо него все содержимое столбца.

• Непрозрачность: 0%

Пользовательские CSS

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

z-index: 99;
position: relative

Видимость

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

Клонировать модуль наложения текста дважды и размещать дубликаты в оставшихся столбцах

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

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

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

• Цвет 1: # d530ff
• Цвет 2: # 6d28c1

Изменить градиентный фон модуля наложения текста в столбце 3

И проделайте то же самое со вторым дубликатом.

• Цвет 1: # 41ff30
• Цвет 2: # 15668e

Скачать Раздел БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Рабочий стол

Мобильный

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

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