Учебник Divi: как использовать персональный модуль в Divi Builder
06.09.2018
Divi: самая простая тема WordPress для использования
Вот лучшие инструменты для монетизации вашего блога
Личный модуль Дива это лучший способ создать личный профиль. Это отличный модуль для использования на страницах About Me или на членах команды, где вы хотите создать биографию людей. Этот модуль объединяет текстовые, графические и социальные медиа-ссылки в один когерентный модуль.
Как добавить модуль пользователя на свою страницу
Прежде чем вы сможете добавить модуль пользователя на свою страницу, вы должны сначала перейти в Divi Builder. После того, как тема Divi установлена на вашем веб-сайте, вы заметите кнопку Использовать Divi Builder над издателем каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой сайт на переднем плане, если вы подключены к панели инструментов WordPress.
После того, как вы вошли в Visual Builder, вы можете нажать кнопку «серый плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы запустите новую страницу, не забудьте сначала добавить строку на свою страницу. У нас отличные учебные пособия об использовании элементов линии и разделах Диви.
Найдите модуль пользователя в списке модулей и нажмите на него, чтобы добавить его на свою страницу. Список модулей доступен для поиска, а это значит, что вы также можете ввести слово «человек», затем нажмите «Ввод» для поиска и автоматического добавления модуля пользователя! После добавления модуля вы будете приветствоваться списком параметров модуля. Эти параметры разделены на три основные группы: Содержание ,Дизайн и Передовой ,
Пример использования примера: добавление раздела «Наша команда» на страницу «О нас»
Страница «О нас» - это хорошее место для ознакомления членов вашей команды с использованием модуля Person. Это добавляет личный контакт и может помочь повысить доверие к новым клиентам.
В этом примере я покажу вам, как использовать модуль Person для добавления раздела «Наша команда» на страницу о малом бизнесе. Я буду использовать положение трех человек, три столбцы который держит секцию более компактной и соответствует общей конструкции страницы.
Используя Visual Builder, вставьте новый стандартный раздел со строкой из трех столбцов (1 / 3 1 / 3 1 / 3). Затем добавьте модуль Person в первый столбец.
Обновите настройки модуля Person следующим образом:
WPML, лучший плагин для перевода вашего сайта
Параметры содержимого
Имя: [Введите имя человека] Позиция: [Введите номер лица] Введите URL-адреса профиля социальных сетей
Описание: [Введите краткую биографию] Изображение: [Введите изображение 600 x 600]Варианты дизайна
Значок цвета: # fcbf00
Цвет значка Hover: # e0a831 Шрифт заголовка: Roboto, полужирный, воспользоваться Размер шрифта заголовка: 30px Цвет текста заголовка: # 505050 Промежуточная буква заголовка: 1px Высота строки заголовка: 1.5em Размер шрифта для тела: 18px Размер линии тела: 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.
PEARL: тема WordPress для бизнеса
URL профиля Twitter
Введите URL-адрес на странице Twitter или оставьте поле пустым, чтобы отключить значок Twitter.
URL профиля Google+
Введите URL-адрес своей + страницы или оставьте поле пустым, чтобы отключить значок Google+.
URL профиля LinkedIn
Введите URL-адрес на странице LinkedIn или оставьте поле пустым, чтобы отключить значок LinkedIn.
Описание
Введите содержимое основного текста для своего модуля здесь.
URL изображения
Здесь вы можете скачать фотографию для использования в биографии.
Цвет фона
Установите собственный цвет фона для вашего модуля или оставьте пустым, чтобы использовать цвет по умолчанию.
Фоновое изображение
Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек. Фоновые изображения будут отображаться над цветами фона, а это означает, что фоновый цвет не будет отображаться при использовании фонового изображения.
Значок администратора
Это облегчит идентификацию модуля в конструкторе. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в блоке модуля интерфейса Divi Builder.
Варианты дизайна персонального модуля
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль 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 и т. Д.
Стиль границ
Границы поддерживают восемь разных стилей: сплошной, пунктирный, пунктирный, двойной, паз, гребень, инкрустация и начало. Выберите нужный стиль в раскрывающемся меню, чтобы применить его к границе.
Пользовательская маржа
Маржа - это пространство, добавленное к внешней стороне вашего модуля, между модулем и следующим элементом выше, внизу или слева и справа от него. Вы можете добавить специальные значения полей на одну из четырех сторон модуля. Чтобы удалить пользовательский запас, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете вводить собственные единицы измерения в поля ввода.
Пользовательское дополнение
Заполнение - это пространство, добавленное внутри вашего модуля, между краем модуля и его внутренними элементами. Вы можете добавить собственные значения заполнения на одну из четырех сторон модуля. Чтобы удалить пользовательский запас, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете вводить собственные единицы измерения в поля ввода.
Расширенные параметры модуля Person
На вкладке «Дополнительно» вы найдете варианты, которые могут быть полезны более опытным веб-дизайнерам, например атрибутам CSS и пользовательский HTML. Здесь вы можете применить собственный CSS к одному из многих элементов модуля. Вы также можете применить к модулю пользовательские классы и идентификаторы CSS, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.
CSS-идентификатор
Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор может использоваться для создания пользовательского стиля CSS или для создания ссылок на определенные разделы вашей страницы.
Класс CSS
Введите дополнительные классы CSS, которые будут использоваться для этого модуля. Класс CSS можно использовать для создания пользовательского стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы могут использоваться в вашей дочерней теме Divi или в специальной таблице стилей CSS, которую вы добавляете на свою страницу или на веб-сайт, с помощью параметров темы Divi или настроек страницы Divi Builder.
пользовательских CSS
Пользовательский CSS также может применяться к модулю и к одному из внутренних элементов модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавлять собственные таблицы стилей CSS непосредственно к каждому элементу. Элементы CSS в этих параметрах уже завернуты в теги стиля. Поэтому просто введите правила CSS, разделенные точкой с запятой.
Анимация
По умолчанию изображения анимируются при прокрутке страницы. Здесь вы можете выбрать направление анимации или отключить его.
видимость
Эта опция позволяет вам управлять устройствами, на которых отображается ваш модуль. Вы можете отключить свой модуль на планшетах, смартфонах или настольных компьютерах по отдельности. Это полезно, если вы хотите использовать разные модули на разных устройствах, или если вы хотите упростить мобильный дизайн, исключив некоторые элементы страницы.
Вы ищете лучшие темы и плагины WordPress?
Пользователи BlogPasCher рекомендуют следующие категории: