Пропустить

Divi Tutorial: использование модуля Person Divi Builder

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

divi builder

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

человек модуль divi.png

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

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

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

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

страница о нас.jpg

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

модуль человек wordpress divi.png

Обновите настройки модуля 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 divi.png

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

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

Вот так!

модуль результатов person divi.jpg

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

опция контента divi.png

Имя

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

Позиция

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

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.png

Цвет значка

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

Цвет текста

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

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

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. 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 вашей дочерней темы.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

модуль выбора опции divi.png

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

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

Класс CSS

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

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

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

Анимация

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

видимость

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

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

Эта статья содержит комментарии 3

  1. Привет,
    Спасибо за эти очень полезные статьи.
    Как и URL-адреса в Facebook, Twitter, Google+ или LinkedIn, знаете ли вы, можно ли добавить URL-адрес в свой профиль Instagram? Спасибо 🙂

  2. Salut!
    Когда я создаю проект или сообщение и использую модуль "Человек", почему поле "Позиция" исчезает, когда я просматриваю проекты или сообщения с помощью модуля блога или фильтруемого модуля блога?

    Как сделать поле «Позиция человека» видимым в представлении «Сетка блога»?

    Merci!

    1. Добрый вечер и спасибо за ожидание.
      Обычно поисковые модули не выполняют шорткоды. Следовательно, модуль Person (как и любой другой модуль) генерирует шорткод, который можно отобразить только путем предварительного просмотра статьи или страницы, а не из модуля, который предлагает предварительный просмотр указанной статьи или страницы.

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
19 акции
доля10
чирикать3
Регистрация6