Хотели бы вы создать биографию с DIVI членов вашей команды с эффектом наведения?
Не секрет, что страницы о идеально подходят для создания взаимодействий на вашем Веб-сайт. Также этот тип страницы подчеркнет человеческую часть компании, стоящую за Веб-сайт.
Одна из вещей, которую вы можете сделать, чтобы улучшить опыт страницы О заключается в предоставлении раздела членов команды, который ставит ваших сотрудников в центр внимания.
Читайте также: Divi: как создать прозрачный и липкий глобальный заголовок
В этом уроке мы покажем вам шаг за шагом, как это сделать. Как только вы поймете подход, вы сможете настроить его в соответствии со своими потребностями.
Давайте!
обследование
Прежде чем мы углубимся в руководство, давайте посмотрим на результат на разных размерах экрана.
Настольный компьютер
Мобильный телефон
Добавить новый раздел
расстояние
Создайте новую страницу или откройте существующую и добавьте новый раздел, используя следующие настраиваемые значения заполнения:
- Внутреннее поле (сверху и снизу): 100 пикселей
Добавьте строку №1
Структура колонны
После того, как вы закончите добавлять пользовательские отступы в свой раздел, вы можете закрыть настройки раздела и добавить новую строку, используя один столбец.
Добавьте текстовый модуль
Добавьте текстовый модуль в столбец с заголовком размера H2 по вашему выбору.
Настройки текста H2
Затем перейдите к настройкам текста H2 и внесите некоторые изменения.
- Шрифт заголовка: Cinzel
- Стиль копирования заголовка: Tt (см. Захват)
- Выравнивание текста: по центру
- Размер текста заголовка: 70px
Добавьте разделительный модуль
видимость
Продолжите, добавив новый модуль Separator сразу под текстовым модулем.
- Разделитель шоу: Да
Цвет разделителя
Перейдите на вкладку «Стиль», откройте настройки цвета и соответствующим образом измените цвет разделителя:
- Цвет этикетки: #333333
калибровка
Затем мы уменьшим размер делителя и отцентрируем его.
- Максимальная ширина: 26%
- Выравнивание текста: по центру
Добавить строку 2
Структура колонны
Прямо под предыдущей добавленной строкой продолжите и добавьте новую строку, используя три столбца одинакового размера.
калибровка
Не добавляя никаких модулей, откройте настройки линии и внесите некоторые изменения в настройки размеров.
- Использовать пользовательскую ширину желоба: Да
- Расстояние между столбцами: 1
- Максимальная ширина: 2 пикселей
- гармонизировать высоту столбцов: Да
расстояние
Затем перейдите к настройкам интервалов и добавьте пользовательские значения полей.
- Поле (сверху и снизу): 50 пикселей
- Внутреннее поле: (сверху и снизу: 10 пикселей), (слева и справа: 5 пикселей)
Введите параметры каждого из столбцов, а также измените значения внутренних полей следующим образом:
- Внутреннее поле (слева и справа): 5 пикселей
Shadow box
Мы также придаем нашей линии некоторую глубину, добавляя к ней тень блока со следующими настройками:
- Сила размытия тени коробки: 80 пикселей
- Сила распространения тени коробки: -14px
- Цвет шрифта субтитров: rgba(0,0,0,0.3)
Добавьте модуль изображения в столбец 1.
Загрузите изображение в модуль изображения
Пришло время начать добавлять модули!
Всего для достижения эффекта биоховер нам понадобится два модуля; модуль изображения и модуль сводки.
Смотрите также: Divi: как создать адаптивную сетку изображений со ссылками и эффектами наведения
Модуль Image будет содержать изображение члена команды, которого вы хотите показать. С другой стороны, модуль «Сводка» будет использоваться для добавления значка в нижний левый угол и биографии при наведении курсора.
Добавьте модуль изображения в первый столбец, используя изображение квадратного размера.
Фильтры
Дизайн, который мы создаем, полностью в оттенках серого. Чтобы добавить эти оттенки серого к нашему изображению, перейдите в настройки фильтров и удалите всю насыщенность.
- Насыщенность: 0%
Добавьте модуль «Сводка» в столбец 1.
Продолжите, добавив новый модуль «Сводка» чуть ниже модуля «Изображение» в столбце 1. Добавьте имя члена команды в поле заголовка и введите дополнительную информацию о члене команды в поле. содержание.
Выберите значок
Следующее, что мы сделаем, это выберем значок выбора, который будет показывать посетителей что есть нечто большее, чем просто изображение.
Цвет фона по умолчанию
Далее мы выберем полностью прозрачный цвет фона.
- Фон: rgba (255,255,255,0 XNUMX XNUMX)
Цвет фона при наведении
И мы собираемся изменить этот цвет при наведении.
- Цвет фона: rgba (255,255,255,0.88)
Настройки значка по умолчанию
Нам нужна видимая иконка, которая поможет посетителей чтобы понять, что они могут пролететь над ним. Измените настройки значка, чтобы получить такой значок.
- Цвет значка: #ffffff
- Цвет фона изображения/значка: #000000
- Расположение изображения/значка: слева
- Ширина изображения/значка: 50 пикселей
- Изображение/значок Прямоугольник со скругленными углами: 100 пикселей
Настройки значка при наведении
Однако мы не хотим, чтобы значок появлялся при наведении. Вот почему вместо этого мы будем использовать полностью прозрачный цвет.
- Цвет значка: rgba (255,255,255,0)
- Цвет фона изображения/значка: rgba(255,255,255,0)
Настройки текста заголовка по умолчанию
Затем перейдите к настройкам текста заголовка и внесите некоторые изменения.
- Название шрифта: Cinzel
- Мягкий светлый текст: Жирный текст
- Стиль копирования заголовка: Tt
- Цвет текста заголовка: #000000
- Размер текста заголовка: 0 пикселей
Настройки заголовка при наведении
Изменение размера текста при наведении.
- Размер текста заголовка: 30px
Текст презентации по умолчанию
Также измените настройки рекламного объявления.
- Тело шрифта: Open Sans
- Цвет основного текста: #000000
- Размер основного текста: 0px
Настройки наведения основного текста
И, опять же, измените размер основного текста при наведении.
- Размер основного текста: 14 пикселей
Интервал по умолчанию
Наконец, нам нужно создать перекрытие между модулем «Сводка» и модулем «Изображение», используя отрицательное верхнее поле.
- Верхнее поле: -3,7 vw (настольный компьютер), -9 vw (планшет и телефон)
- Нижнее поле: 1,5 vw (планшет), 2 vw (телефон)
Расстояние при наведении
Изменение значений маржи при наведении.
- Маржа (сверху): -11,38 vw
- Внутреннее поле: (сверху и снизу: 20 пикселей), (справа: 50 пикселей)
Клонировать столбец 1 дважды
Мы закончили создание нашего первого биоэффекта при наведении курсора. Чтобы сэкономить время, мы можем просто дважды клонировать столбец 1 из параметров строки. Сначала удалите два других столбца, затем дважды щелкните, чтобы клонировать столбец 1.
Изменить изображение и содержимое модуля «Сводка» в клонированных столбцах
Не забудьте изменить изображение в модуле «Изображение» и описание в модуле «Сводка», чтобы закончить!
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Настольный компьютер
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как создать эффект наведения на фотографии членов команды, используя только встроенные параметры Divi. Мы упоминали, как важно создавать хорошие страницы «О нас», поскольку это одна из самых посещаемых веб-страниц.
Использование эффектов наведения для фотографий членов команды не только поднимет вашу страницу «О нас» на новый уровень, но и повысит вовлеченность ваших пользователей. посетителей. Если у вас есть какие-либо вопросы или предложения, давайте найдем нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
