Как добавить эффект наведения в биографии членов команды в Divi

Ни для кого не секрет, что страницы с информацией о страницах отлично подходят для создания переходов по ссылкам на вашем сайте. Это также та страница, которая подчеркнет человеческую составляющую компании, стоящую за сайтом. Зная это, мы осознаем важность того, чтобы мы обращали внимание на то, как мы структурируем страницы, какую информацию мы разделяем и как мы создаем взаимодействия. Одна из вещей, которые вы можете сделать, чтобы повысить удобство работы со страницей «О странице», - это создать раздел «Члены команды», в котором ваши сотрудники будут в центре внимания. Вдобавок к этому вы можете добавить эффект наведения био к фотографиям членов команды, используя только встроенные параметры Divi. Это позволит вам сэкономить место на странице, над которой вы работаете, и создать взаимодействие между вами и вашими посетителями при наведении курсора.

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

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

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

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

Рабочий стол

Мобильный

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

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

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

Интервал

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

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

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

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

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

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

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

Добавьте заголовок «Текстовый модуль» в столбец с выбранной копией H2.

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

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

• Шрифт заголовка 2: Cinzel
• Стиль шрифта заголовка 2: маленькие заглавные буквы
• Выравнивание текста заголовка 2: по центру
• Размер текста заголовка 2: 70 пикселей

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

Видимость

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

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

Цвет разделителя

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

• Цвет разделителя: # 333333

Размеры

Затем мы уменьшим размер разделителя и отцентрируем его.

• Ширина: 26%
• Выравнивание модуля: по центру

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

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

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

Размеры

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

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 2000 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 50 пикселей
• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 5 пикселей
• Отступ справа: 5 пикселей
• Столбцы 1, 2 и 3, отступ слева: 5 пикселей.
• Столбцы 1, 2 и 3, отступ справа: 5 пикселей

Коробка Тень

Мы также придаем нашей строке немного глубины, добавив к ней тень блока со следующими настройками:

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

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

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

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

Фильтры

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

• Насыщенность: 0%

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

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

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

Выберите значок

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

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

Затем мы выберем весь прозрачный цвет фона.

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

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

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

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

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

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

• Цвет значка: #ffffff
• Значок Круга: Да
• Цвет круга: # 000000
• Расположение значков: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 50 пикселей

Настройки значка наведения

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

• Цвет значка: rgba (255,255,255,0)
• Цвет круга: rgba (255,255,255,0)

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

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

• Шрифт заголовка: Cinzel
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: маленькие заглавные буквы
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 0 пикселей

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

Измените размер текста при наведении.

• Размер текста заголовка: 30 пикселей

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

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

• Шрифт основного текста: Open Sans
• Цвет основного текста: # 000000
• Размер основного текста: 0 пикселей
• Высота линии корпуса: 1,8 м

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

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

• Размер основного текста: 14 пикселей

Интервал по умолчанию

И последнее, но не менее важное: нам нужно создать перекрытие между модулем Blurb и Image с использованием отрицательного верхнего поля.

• Верхняя маржа: -3,7vw (настольный компьютер), -9vw (планшет и телефон)
• Нижнее поле: 1.5vw (планшет), 2vw (телефон)

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

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

• Верхняя маржа: -11,38vw
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ справа: 50 пикселей

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

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

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

Не забудьте изменить изображение в модуле изображения и копию в модуле Blurb, чтобы закончить раздел о членах команды!

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

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

Рабочий стол

Мобильный

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

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