5 способов проявить творческий подход с модулем Divi Person

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

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

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

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

Рабочий стол

Мобильный

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

Воссоздать пример №1

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

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

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

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

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

Размеры

Откройте настройки строки и внесите некоторые изменения в настройки размера.

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

Интервал

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

• Верхний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Нижний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Отступ слева: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)
• Отступ справа: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)

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

Загрузить изображение

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

Коробка Тень

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

Фильтры

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

• Насыщенность: 40%
• Контрастность: 130%

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

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

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

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

Добавьте к этому модулю градиентный фон.

• Цвет 1: rgba (11,15,229,0,41)
• Цвет 2: rgba (45,237,255,0,87)
• Направление градиента: 150 градусов

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

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

• Шрифт заголовка: Baloo
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 20 пикселей

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

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

• Толщина основного шрифта: Light
• Цвет основного текста: #ffffff

Интервал

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

• Левое поле: -4vw (настольный компьютер и планшет), 0vw (телефон)
• Правое поле: 8vw (настольный компьютер и планшет), 0vw (телефон)
• Верхний отступ: 25 пикселей
• Нижний отступ: 25 пикселей
• Отступ слева: 20 пикселей

Граница

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

• Ширина левой границы: 3 пикселя
• Цвет левой границы: #ffffff

Коробка Тень

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

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

Добавить персональный модуль № 2 в столбец 2

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

Добавьте еще один модуль Person прямо под предыдущим. Мы используем этот модуль для отображения профилей в социальных сетях и описания.

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

Перейдите на вкладку дизайна и измените цвет значка в настройках значка.

• Цвет значка: # 50e8fe

Интервал

И последнее, но не менее важное: откройте настройки интервала и добавьте несколько пользовательских значений отступов.

• Верхний отступ: 30 пикселей
• Отступ слева: 30 пикселей (компьютер и планшет), 0 пикселей (телефон)

Воссоздать пример №2

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

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

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

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

Добавьте новую строку в этот раздел, используя следующую структуру столбцов.

Цвет фона столбца 2

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона столбца 2.

• Цвет фона столбца 2: # f4f4f4

Размеры

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

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

Интервал

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

• Верхний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Нижний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Отступ слева: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)
• Отступ справа: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)

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

Загрузить изображение

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

Коробка Тень

Затем добавьте к изображению тень блока.

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

Фильтры

Вы также можете поэкспериментировать с настройками фильтров.

• Насыщенность: 40%
• Контрастность: 130%

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

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

Во втором столбце нам понадобится первый модуль - это модуль Person. Заполните поля имени и должности.

Фоновый цвет

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

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

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

Затем измените ориентацию текста в настройках текста.

• Ориентация текста: по центру

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

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

• Шрифт заголовка: Abril Fatface
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 40 пикселей

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

Наряду с настройками основного текста.

• Толщина основного шрифта: Light
• Цвет основного текста: # 000000
• Размер основного текста: 15 пикселей

Интервал

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

• Левое поле: -21.64vw (рабочий стол), -46.1vw (планшет), 0vw (телефон)
• Верхний отступ: 30 пикселей
• Нижний отступ: 30 пикселей

Коробка Тень

И мы также применяем тонкую тень блока.

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

Добавить персональный модуль № 2 в столбец 2

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

Второй модуль, который нам нужен в столбце 2, - это еще один модуль Person. Здесь мы добавляем ссылки и описание в социальных сетях.

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

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

• Цвет значка: # 000000

Интервал

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

• Верхняя маржа: 3vw
• Верхний отступ: 30 пикселей
• Нижний отступ: 30 пикселей
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Воссоздать пример №3

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

К третьему примеру! Добавьте на свою страницу новый раздел.

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

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

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

Размеры

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

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

Интервал

Также добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Нижний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Отступ слева: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)
• Отступ справа: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)

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

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

Пора начинать добавлять модули! Добавьте первый модуль Person в столбец 1 и заполните поля имени и должности.

Фоновый цвет

Затем добавьте в модуль цвет фона.

• Цвет фона: #ffffff

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

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

• Плотность шрифта заголовка: Ультра полужирный
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 40 пикселей
• Интервал между заглавными буквами: -4 пикселя

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

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

• Толщина основного шрифта: Light
• Цвет основного текста: # 000000
• Размер основного текста: 15 пикселей

Интервал

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

• Верхнее поле: 40 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Верхний отступ: 30 пикселей
• Нижний отступ: 30 пикселей
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Граница

Также добавьте «20 пикселей» в верхний левый угол в настройках границы.

Коробка Тень

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

• Сила размытия тени коробки: 140 пикселей
• Цвет тени: rgba (31,15,255,0.66)

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

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

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

Фоновый цвет

Затем перейдите к настройкам фона и добавьте белый цвет фона.

• Цвет фона: #ffffff

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

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

• Цвет значка: # 000000

Интервал

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

Граница

И добавьте 20 пикселей в нижний левый угол.

Коробка Тень

И последнее, но не менее важное: добавьте тень блока.

• Положение прямоугольной тени по вертикали: 50 пикселей
• Сила размытия тени коробки: 140 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (2,219,219,0.26)

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

Загрузить изображение

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

Граница

Задайте этому модулю 20 пикселей закругленных углов в настройках границы.

Коробка Тень

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

Фильтры

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

Воссоздать пример # 4

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

Переходим к четвертому примеру! Добавьте на свою страницу новый раздел.

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

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

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

Размеры

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

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

Интервал

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

• Верхний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Нижний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Отступ слева: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)
• Отступ справа: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)

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

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

Пора начинать добавлять модули! Добавьте модуль Person в столбец 1 и заполните все поля.

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

Затем перейдите в настройки значка и измените цвет значка.

• Цвет значка: # 000000

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

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

• Ориентация текста: по центру

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

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

• Плотность шрифта заголовка: Ультра полужирный
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 40 пикселей
• Интервал между заглавными буквами: -4 пикселя

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

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

• Толщина основного шрифта: Light
• Цвет основного текста: # 000000
• Размер основного текста: 15 пикселей
• Высота линии тела: 2em

Интервал

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

• Верхний отступ: 280 пикселей (рабочий стол), 200 пикселей (планшет), 50 пикселей (телефон)
• Нижний отступ: 280 пикселей (рабочий стол), 200 пикселей (планшет), 50 пикселей (телефон)
• Отступ слева: 200 пикселей (рабочий стол), 150 пикселей (планшет), 20 пикселей (телефон)
• Отступ справа: 200 пикселей (рабочий стол), 150 пикселей (планшет), 20 пикселей (телефон)

Граница

Создайте круг, добавив «700 пикселей» к каждому из углов в настройках границы, а также добавьте тонкую границу.

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

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

Загрузить изображение

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

Интервал

Измените настройки интервала этого модуля.

• Верхнее поле: 7vw (рабочий стол), -15vw (планшет), -5vw (телефон)
• Левое поле: -5vw (рабочий стол), 0vw (планшет и телефон)

Граница

Создайте круг из этого изображения, добавив «1000 пикселей» к каждому из углов модуля.

Коробка Тень

Также добавьте легкую тень коробки.

• Сила размытия тени коробки: 160 пикселей
• Сила распространения тени коробки: -10 пикселей

Фильтры

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

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

Воссоздать пример # 5

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

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

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

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

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

Столбец 1 градиентный фон

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

• Цвет 1: #dddddd
• Цвет 2: #ffffff
• Столбец 1 Направление градиента: 90 градусов
• Столбец 1 Начальная позиция: 40%
• Конечное положение в столбце 1: 40%

Размеры

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

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

Интервал

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

• Верхний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Нижний отступ: 100 пикселей (рабочий стол), 80 пикселей (планшет и телефон)
• Отступ слева: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)
• Отступ справа: 100 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)

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

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

Пора начинать добавлять модули! Добавьте модуль Person в столбец 1 и заполните все поля.

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

Затем измените цвет значка в настройках значка.

• Цвет значка: # 000000

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

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

• Ориентация текста: вправо

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

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

• Шрифт заголовка: Chenla
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 50 пикселей
• Интервал между заголовками: -1px

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

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

• Толщина основного шрифта: Light
• Цвет основного текста: # 000000
• Размер основного текста: 15 пикселей
• Высота линии тела: 2em

Интервал

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

• Верхний отступ: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
• Нижний отступ: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
• Отступ слева: 500 пикселей (рабочий стол), 250 пикселей (планшет), 50 пикселей (телефон)
• Отступ справа: 200 пикселей (рабочий стол), 100 пикселей (планшет), 50 пикселей (телефон)

Граница

Наконец, добавьте рамку к модулю.

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

Загрузить изображение

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

Интервал

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

• Верхняя маржа: 7vw (ПК), -2vw (планшет и телефон)
• Левое поле: -10vw (рабочий стол), 0vw (планшет и телефон)

Коробка Тень

Также дайте модулю изображения тень блока.

• Сила размытия тени коробки: 160 пикселей
• Сила распространения тени коробки: -10 пикселей

Фильтры

И в довершение всего, поиграйте с настройками фильтров.

• Насыщенность: 50%
• Контрастность: 130%

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

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

Рабочий стол

Мобильный

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

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