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

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

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

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

Давайте!

обследование

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

офис

Мобильный телефон

Давайте начнем воссоздание

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

расстояние

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

• Лучший отступ: 100px
• Нижняя обивка: 100px

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

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

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

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

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

Добавьте заголовок текстового модуля в столбец с выбранным размером H2.

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

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

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

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

видимость

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

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

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

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

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

калибровка

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

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

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

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

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

калибровка

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

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

расстояние

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

• Верхнее поле: 50px
• Нижнее поле: 50px
• Верхняя обивка: 10px
• Нижняя обивка: 10px
• Левая обивка: 5px
• Обивка справа: 5px
• Столбец 1, 2 и 3 Заполнение слева: 5px
• Столбец 1, 2 и 3 Заполнение справа: 5px

Shadow box

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

• Box Shadow Blur Force: 80px
• Сила распространения тени коробки: -14 пикселей
• Цвет тени: rgba (0,0,0,0,3)

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

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

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

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

фильтры

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

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

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

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

Продолжите, добавив новый модуль рекламного объявления чуть ниже модуля изображения в столбце 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)

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

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

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

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

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

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

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

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

• Тело полиции: открытые без
• Основной текст: # 000000
• Размер основного текста: 0px
• Рост тела: 1.8em

Параметр тела на пролете

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

• Размер основного текста: 14px

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

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

• Верхнее поле: -3.7vw (рабочий стол), -9vw (планшет и телефон)
• Нижнее поле: 1.5vw (планшет), 2vw (телефон)

Стационарное расстояние

Измените пользовательское поле и заполните значения в режиме переноса

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

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

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

Отредактируйте изображение и содержимое модуля Blurb

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

обследование

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

офис

Мобильный телефон

Заключительные мысли

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

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