Модуль Входа Divi

Как добавить, настроить и адаптировать под свои требования модуль Входа.

Модуль входа в систему отображает форму входа в WordPress, оформленную в стиле Divi, в любом месте вашей страницы. Если вы используете WordPress в качестве системы членства, то добавление формы входа непосредственно на страницу может быть весьма полезным (вместо перенаправления людей на фирменную форму входа WordPress, которая находится вне темы вашего веб-сайта).

Как добавить модуль Войти на свою страницу

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

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

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

Пример использования: добавление настраиваемой формы входа на страницу для входа в раздел для зарегистрированных пользователей

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

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

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

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

Вкладка Контент

Заголовок: Login to the Membership Course Here
Body: [введите короткие инструкии по входу]
Перенаправить на текущую страницу: ДА

Вкладка Дизайн

Поля цвет фона: #f0f0f0
Цвет текста: Dark
Заголовок размер текста: 35px
Заголовок цвет текста: #888888
Body размер текста: 16px
Использовать рамку: YES
Цвет рамки: #0c71c3
Ширина рамки: 1px
Внутренний отступ: 50px верх, 50px право, 50px них, 50px лево
Использовать пользовательские стили для кнопка: ДА
Кнопка размер текста: 26px
Кнопека цвет текста #ffffff
Кнопка Background: #0c71c3
Кнопка ширина рамки: 0px
Кнопка шрифт: default, Uppercase
Кнопка иконка: YES
Кнопка икона: выберите подходящую иконку
Только показывать значок при наведении курсора мыши за кнопка: НЕТ

Готово. Теперь на сайте есть настраиваемая форма входа, на которую пользователи будут перенаправляться при необходимости входа в курс. Больше не нужно пользоваться на формой входа по умолчанию в WordPress.

Вкладка Контент модуля Войти

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

Заголовок

Заголовок появится в поле входа над формой входа.

Body

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

Перенаправить на текущую страницу

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

Использовать цвет фона

Если вы хотите придать форме входа в систему сплошной цвет фона, выберите «Да» для этого параметра, и будет использован цвет фона, который вы выберете в следующем варианте.

Фон

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

Метка администратора

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Войти

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

Поля цвет фона

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

Поля цвет текста

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

Поля цвет фокуса

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

Поля цвет текста фокуса

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

Использовать фокус цвет рамки

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

Поля фокус цвет рамки

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

Цвет текста

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

Расположение текста

Здесь вы можете настроить выравнивание текста.

Заголовок шрифт

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

Заголовок размер текста

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

Заголовок цвет текста

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

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

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

Заголовок высота строки

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

Body шрифт

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

Body Размер текста

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

Body цвет текста

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

Body расстояние между букв

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

Body высота строки

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

Использовать рамку

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

Цвет рамки

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

Ширина рамки

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

Стиль границы

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

Поле

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

Внутренний отступ

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

Использовать пользовательские стили для кнопки

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

Кнопка размер текста

Этот параметр можно использовать для увеличения или уменьшения размера текста внутри кнопки. Кнопка будет масштабироваться по мере увеличения и уменьшения размера текста.

Кнопка цвет текста

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

Кнопка background

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

Кнопка ширина рамки

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

Цвет границы кнопки

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

Кнопка цвет рамки

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

Кнопка расстояние между букв

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

Кнопка шрифт

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

Кнопка иконка

Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки при наведении курсора.

Кнопка иконка

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

Кнопка цвет иконки

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

Кнопка иконка размещения

Вы можете выбрать отображение значка кнопки слева или справа от кнопки.

Только показывать значок при наведении курсора мыши на кнопку

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

Цвет текста при наведении курсора на кнопку

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

Цвет фона при наведении курсора

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

Цвет границы при наведении курсора на кнопку

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

Кнопка радиус рамки

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

Кнопка расстояние между букв

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

Вкладка Расширенный модуля Войти

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

Класс CSS

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

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

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

Отключить на:

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