Как создать яркую страницу команды при наведении курсора для вашего следующего проекта Divi

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

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

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

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

Рабочий стол

Мобильный

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

1. Начните с обычного раздела + строку в одну колонку для заголовка.

Откройте новую страницу и установите для ее атрибутов значение «пустая страница». Как только вы это сделаете, войдите в Divi Builder и добавьте раздел со строкой из одного столбца.

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

2. Добавьте контент в текстовый модуль и стилизуйте его.

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

Перейдите на вкладку дизайна и настройте параметры текста H1 соответствующим образом:

• Шрифт заголовка: Poppins
• Толщина шрифта заголовка: светлый
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: Черный # 000000
• Размер текста заголовка:
  • Рабочий стол = 6vw
  • Таблетка = 9vw
  • Телефон = 11vw
• Расстояние между буквами заголовка: -0,4vw

3. Стиль разделителя.

Переходим к следующему модулю, который является модулем делителя. Измените цвет разделителя на черный и измените настройки размера.

• Цвет разделителя: черный #oooooo
• Вес разделителя: 12 пикселей
• Ширина: 14%
• Выравнивание модуля: по центру

4. Создайте командную биографию, используя обычный раздел + трехколоночную строку

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

5. Настройте параметры размера строки.

Позвольте строке занять всю ширину контейнера раздела, изменив настройки размера.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

6. Отрегулируйте настройки расстояния между рядами.

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

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

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

Два основных модуля, которые мы будем использовать для создания окончательного эффекта, - это модуль изображения и рекламного объявления. Сначала добавьте модуль изображения, а затем рекламное объявление.

8. Загрузите изображение и стилизуйте его.

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

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

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

• Выравнивание изображения: по центру

Размеры

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

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

Интервал

И добавьте отрицательное верхнее поле.

• Прибыль:
  • Рабочий стол = -3vw
  • Планшет и телефон = -13vw

Граница

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

• Закругленные углы: 20vw Все четыре угла
• Стили границ: все четыре стороны
• Ширина границы: 12 пикселей
• Цвет границы: белый #ffffff
• Стиль границы: Двойной

Коробка Тень

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

• Box Shadow: первый вариант
• Сила размытия тени коробки: 50 пикселей

Индекс Z

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

• Индекс Z: 3

9. Добавьте контент в Blurb и стилизуйте его.

Добавить собственный CSS в настройки страницы

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

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Дайте Blurb класс CSS

Затем откройте модуль рекламного объявления и добавьте соответствующий класс CSS.

• Класс CSS: blurb-icon

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

Мы будем использовать текст-заполнитель, но вы можете вставить настоящее имя и описание члена команды.

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

Затем выберите значок плюса.

• Значок использования: Да
• Значок: знак плюса внутри круга

Стиль фона

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

• Фон: белый #ffffff
• Фон при наведении: градиент
• Первый цвет градиента: # 00ffa1
• Второй цвет градиента: # 29c4a9
• Тип градиента: линейный
• Направление градиента: 154 градуса
• Стартовая позиция: 0
• Конечная позиция: 46%

Икона стиля

Далее примените следующие настройки значка:

• Цвет значка:
  • По умолчанию: # 29c4a9
  • Hover: Прозрачный rgba (255,255,255,0)
• Использовать размер шрифта значка: Да
• Размер шрифта значка:
  • Рабочий стол = 2vw
  • Таблетка = 4vw
  • Телефон = 6vw

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

Перейдите к настройкам текста и измените выравнивание текста.

• Выравнивание текста: по центру

Стиль текста заголовка

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

• Заголовок: H4
• Шрифт заголовка: Poppins
• Шрифт заголовка: полужирный
• Цвет текста заголовка: белый #ffffff
• Размер текста заголовка:
  • Рабочий стол: 1.5vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3.5vw

Стиль основного текста

Сделайте то же самое с настройками основного текста.

• Цвет основного текста: белый #ffffff
• Размер основного текста:
  • Рабочий стол = 0.8vw
  • Таблетка = 1.9vw
  • Телефон = 2.6vw
• Высота линии тела:
  • Рабочий стол = 2vw
  • Планшет + Телефон = 3vw

Размеры

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

• Ширина содержимого: 100%
• Ширина: 81%
• Выравнивание модуля: по центру

Интервал

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

• Верхнее поле:
  • Рабочий стол = -4vw
  • Планшет + Телефон = -9vw
• Нижняя маржа:
  • Рабочий стол = 3.5vw
  • Планшет + Телефон = 10vw
• Верхняя и нижняя обивка:
  • Рабочий стол = 7.1vw
  • Таблетка = 30vw
  • Телефон = 28vw
• Отступ слева и справа
  • Рабочий стол = 2vw
  • Планшет + Телефон = 8vw

Граница

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

• Закругленные углы: 50vw все четыре угла

Коробка Тень

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

• Тень коробки: пятый стиль
• Положение тени коробки по горизонтали: 0vw
• Вертикальное положение тени блока:
  • Рабочий стол + Hover = -14vw
  • Таблетка = -44vw
  • Телефон = -46vw
• Сила распространения тени коробки:
  • Рабочий стол + Hover = -6vw
  • Планшет + Телефон = -19vw
• Цвет тени коробки:
  • Hover = rgba (0,0,0,0.05)

10. Стиль первой колонки

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

Фон

Откройте настройки фона первого столбца и примените следующий градиентный фон:

• Стиль фона: градиент
• Первый цвет градиента: # 00ffa1
• Второй цвет градиента: # 29c4a9
• Тип градиента: лайнер
• Направление градиента: 282 градуса

Граница

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

• Закругленные углы: 50vw

Переполнение

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

• Горизонтальное и вертикальное переполнение: видимое

11. Удалите пустые столбцы и дважды продублируйте первый столбец.

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

Удалить столбцы два и три

Вернитесь к настройкам основной строки и щелкните значок корзины для второго и третьего столбцов.

Дублировать первый столбец дважды

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

12. Измените содержимое и цвета второго столбца.

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

Столбец второй

Откройте настройки второго столбца и измените градиентный фон.

• Первый цвет градиента фона: # 00eeff
• Второй цвет градиента фона: # 309ce5

Также загрузите другое изображение.

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

• Цвет фона при наведении один: # 00eeff
• Второй цвет фона при наведении: # 309ce5

Также измените цвет значка.

• Цвет значка по умолчанию: # 309ce5

Колонка третья

Откройте настройки третьего столбца и измените градиентный фон.

• Первый цвет градиента фона: # ff91ec
• Второй цвет градиента фона: # a500ff

Затем измените фон градиента рекламного объявления.

• Первый цвет фона при наведении: # ff91ec
• Второй цвет фона при наведении: # a500ff

Вместе с цветом значка.

• Цвет значка по умолчанию: # a500ff

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

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

Рабочий стол

Мобильный

Это обертка!

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