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

Как настроить модуль Divi Person

Прежде чем вы сможете добавить модуль Divi Person на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем Веб-сайт, вы заметите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой Веб-сайт на переднем плане, если вы вошли в панель управления WordPress.

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть отличные уроки по использованию элементов линии и разделах пользователя Divi.

Найдите модуль человека в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «человек» и затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль «Человек»! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .

Пример использования: добавление раздела «Наша команда» на страницу «О нас»

Страница о нас - хорошее место, чтобы познакомить членов вашей команды с модулем Person. Это добавляет индивидуальности и может помочь завоевать доверие новых клиентов.

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

Используя Visual Builder, вставьте новый стандартный раздел со строкой из трех столбцов (1/3 1/3 1/3). Затем добавьте модуль Person в первый столбец.

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

Параметры содержимого

Имя: [Введите имя человека]
Должность: [Введите добавочный номер человека]
Введите URL-адреса для профилей в социальных сетях
Описание: [Введите краткую биографию]
Изображение: [Сделайте снимок 600 x 600]

Варианты дизайна

Цветной значок: # fcbf00
Цвет значка наведения: # e0a831
Шрифт заголовка: Roboto, полужирный, усиление внутри-
Размер шрифта заголовка: 30 пикселей
Цвет текста заголовка: # 505050
Расстояние между заголовками букв: 1 пиксель
Высота строки заголовка: 1.5 мм
Размер шрифта основного текста: 18 пикселей
Размер линии тела: 1.4em
Пользовательское заполнение: 15px вверх, 15px вправо, 15px вниз, 15px слева

Расширенные настройки (пользовательский CSS)

Основной элемент:
-webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);
box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);

Сохранить настройки

Теперь продублируйте только что созданный модуль Person дважды и перетащите дублированные модули во второй и третий столбцы в строке. Поскольку дизайн был перенесен на каждый из дублированных модулей «Человек», все, что вам нужно сделать, это обновить контент, добавив в него изображение, заголовок, позицию, URL-адреса социальных сетей и описание. человека.

Вот так!

Параметры контента для человека

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

Имя

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

Позиция

Позиция отображается под именем более мелким шрифтом. Это часто используется для обозначения профессионального положения человека в корпоративной команде. Например, Ник Роуч, «Графический дизайнер».

URL профиля Facebook

Введите URL-адрес на своей странице Facebook или оставьте поле пустым, чтобы отключить значок Facebook.

URL профиля Twitter

Введите URL-адрес на своей странице в Twitter или оставьте поле пустым, чтобы отключить значок Twitter.

URL профиля Google+

Введите URL-адрес вашей + страницы или оставьте поле пустым, чтобы отключить значок Google+.

URL профиля LinkedIn

Введите URL-адрес на своей странице в LinkedIn или оставьте поле пустым, чтобы отключить значок LinkedIn.

Описание

Введите содержимое основного текста для своего модуля здесь.

URL изображения

Здесь вы можете скачать фотографию для использования в био.

Цвет фона

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

Фоновое изображение

Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек. Фоновые изображения будут отображаться поверх цветов фона, что означает, что цвет фона не будет виден при применении фонового изображения.

Значок администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Варианты дизайна для модуля Person

На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.

Цвет значка

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

Цвет значка при наведении

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

Цвет текста

Здесь вы можете выбрать значение вашего текста. Если вы работаете на темном фоне, ваш текст должен быть включен. Если вы работаете со светлым фоном, ваш текст должен быть темным.

Шрифт заголовка

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

Размер шрифта заголовка

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую ввести значение желаемого размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Цвет текста заголовка

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

Расстояние между буквами заголовка

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы настроить интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Высота строки заголовка

Высота строки влияет на расстояние между каждой строкой текста заголовка. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле поле ввода справа от курсора. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Шрифт тела

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

Размер шрифта тела

Здесь вы можете настроить размер основного текста. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую ввести желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Цвет текста тела

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

Расстояние между буквами тела

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Высота линии тела

Высота строки влияет на расстояние между каждой строкой текста в вашем теле. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода. расположен справа от курсора. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Использовать границу

Включение этой опции поместит рамку вокруг вашего модуля. Эту границу можно настроить с помощью следующих условных параметров.

Цвет границы

Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.

Ширина границы

По умолчанию ширина границ составляет 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя произвольное значение в поле ввода справа от ползунка. Поддерживаются пользовательские единицы измерения, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.

Стиль границ

Границы поддерживают восемь различных стилей: сплошной, точечный, точечный, двойной, бороздка, гребень, наложение и начало. Выберите желаемый стиль из раскрывающегося меню, чтобы применить его к границе.

Пользовательская маржа

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

Таможенная обивка

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

Расширенные настройки модуля «Человек»

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

CSS-идентификатор

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

Класс CSS

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

Пользовательский CSS

Пользовательский CSS также может быть применен к модулю и к любому внутреннему устройству модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавить пользовательские таблицы стилей CSS непосредственно к каждому элементу. Записи CSS в этих настройках уже заключены в теги стилей. Так что просто введите правила CSS через точку с запятой.

Анимация

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

видимость

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

[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin