Учебник Divi: как использовать модуль входа
06.09.2018
Divi: самая простая тема WordPress для использования
Вот лучшие инструменты для монетизации вашего блога
Модуль входа в систему отображает форма Вход в WordPress, стиль Дива , где угодно на вашей странице. Если вы используете элемент WordPress с пространством, а затем добавить регистрационную форму непосредственно на страницу, может быть очень полезным (вместо того, чтобы перенаправлять людей в форме входа в WordPress, который использует другой стиль вашей темы).
Как добавить модуль регистрации на свою страницу
Прежде чем вы сможете добавить модуль регистрации на свою страницу, вы должны сначала перейти в Divi Builder. После того, как тема Divi установлена на вашем веб-сайте, вы заметите кнопку Использовать Divi Builder над издателем каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой сайт на переднем плане, если вы подключены к панели инструментов WordPress.
После того, как вы вошли в Visual Builder, вы можете нажать кнопку «серый плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы запустите новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите модуль регистрации в списке модулей и нажмите на него, чтобы добавить его на свою страницу. Список модулей доступен для поиска, а это значит, что вы также можете ввести слово «Connect», затем нажмите «Enter», чтобы выполнить поиск и автоматически добавить модуль регистрации! После добавления модуля вы будете приветствоваться списком параметров модуля. Эти параметры разделены на три основные группы: Содержание ,Дизайн и Передовой ,
Пример использования примера: добавьте пользовательскую форму входа на страницу входа в зону участника
Поскольку сайты членства требуют, чтобы пользователь входил во все или часть содержимого, модуль входа в систему позволяет легко добавить форму входа в систему. Логин страница , Кроме того, вы можете перенаправить пользователей на эту форму, а не на страницу входа WordPress по умолчанию.
Вот простая страница входа с модулем входа в систему. Я покажу вам, как создать:
Используя Visual Builder, добавьте новый стандартный раздел на страницу входа в членство с колонкой fullwidth (1 column). Затем вставьте модуль подключения в линию.
Обновите настройки подключения следующим образом:
Параметры содержимого
Название: Соединение
Содержание: [введите краткое описание курса или инструкции для входа в систему] Перенаправление на текущую страницу: ДАВарианты дизайна
Цвет фона поля: # f0f0f0 Цвет текста: заголовок Dark Police: 35px цвет заголовка: # 888888 Размер шрифта тела: 16px Граница: Да Цвет рамки: # 0c71c3 ширина рамки: 1px на заказ Обивка: 50px Top, Right 50px, 50px Нидерланды, 50px оставил Использовать пользовательские стили для кнопки: ДА кнопка Размер текста: 26px Цвет кнопки текст: кнопка #ffffff цвет: # 0c71c3 ширина Кнопка: 0px Кнопка шрифта: по умолчанию, значок прописной буквы Добавить: ДА Значок кнопки: Показывать только значок при просадке кнопки: НЕТ
Вот и все. У сайта-члена теперь есть пользовательская форма входа, где пользователи будут перенаправлены, когда им нужно будет войти в курс. Не нужно соглашаться на регистрационную форму WordPress по умолчанию.
WPML, лучший плагин для перевода вашего сайта
Параметры содержимого модуля подключения
На вкладке «Содержание» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролируеткакиев вашем модуле всегда будет отображаться на этой вкладке.
Название
Заголовок появится в поле входа в систему над формой входа в систему.
Содержание
Содержимое будет отображаться в поле ввода под заголовком. Если вы хотите добавить дополнительное описание, вы можете использовать это поле. В противном случае оставьте его пустым.
Перенаправление на текущую страницу
Здесь вы можете выбрать, следует ли перенаправить пользователя на текущую страницу.
Использовать цвет фона
Если вы хотите указать сплошной цвет фона для своей формы входа, выберите «да» для этой опции, а цвет фона, который вы выбрали в следующем варианте, будет использоваться.
Цвет фона
Выберите цвет фона, который будет отображаться на заднем плане вашего окна входа. Если вы решили отключить цвета фона в предыдущем параметре, этот цвет не будет иметь эффекта.
Значок администратора
Это облегчит идентификацию модуля в конструкторе. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в блоке модуля интерфейса Divi Builder.
Параметры стиля для модуля входа в систему
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список параметров дизайна, которые вы можете использовать для изменения чего-либо.
Цвет фона поля формы
Форма входа в систему содержит два поля ввода для имени пользователя и пароля. Вы можете использовать этот параметр для настройки цвета фона этих полей.
Цвет текста поля формы
Форма входа в систему содержит два поля ввода для имени пользователя и пароля. Вы можете использовать этот параметр для настройки цвета текста этих полей. Если вы изменили цвет фона в поле формы, вы также можете настроить цвет текста, чтобы обеспечить плавное цветовое соотношение.
Цвет фона
Когда поле ввода фокусируется с помощью мыши посетителя, цвета меняются, чтобы четко указать, какое поле активно. Здесь вы можете установить цвет фона сфокусированных полей.
Цвет текста фокуса
Когда поле ввода фокусируется с помощью мыши посетителя, цвета меняются, чтобы четко указать, какое поле активно. Здесь вы можете установить цвет текста сфокусированных полей.
Использовать цвет рамки фокуса
Если вы хотите добавить границу к полям ввода, когда они находятся в фокусе, вы можете включить эту опцию.
PEARL: тема WordPress для бизнеса
Цвет рамки фокуса
Используя этот параметр, вы можете изменить цвет границы, который появляется в сфокусированных полях ввода.
Цвет текста
Здесь вы можете выбрать, должен ли ваш текст быть светлым или темным. Если вы работаете на темном фоне, ваш текст должен быть четким. Если ваш фон чист, ваш текст должен быть темным.
Текстовая ориентация
Здесь вы можете настроить выравнивание текста.
Шрифт заголовка
Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. 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 и т. Д.
Стиль границ
Границы поддерживают восемь разных стилей: сплошной, пунктирный, пунктирный, двойной, паз, гребень, инкрустация и начало. Выберите нужный стиль в раскрывающемся меню, чтобы применить его к границе.
Пользовательская маржа
Маржа - это пространство, добавленное к внешней стороне вашего модуля, между модулем и следующим элементом выше, внизу или слева и справа от него. Вы можете добавить специальные значения полей на одну из четырех сторон модуля. Чтобы удалить пользовательский запас, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете вводить собственные единицы измерения в поля ввода.
Пользовательское дополнение
Заполнение - это пространство, добавленное внутри вашего модуля, между краем модуля и его внутренними элементами. Вы можете добавить собственные значения заполнения на одну из четырех сторон модуля. Чтобы удалить пользовательский запас, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете вводить собственные единицы измерения в поля ввода.
Используйте пользовательские стили для кнопки
Включение этой опции показывает различные параметры настройки для кнопок, которые вы можете использовать для изменения внешнего вида кнопки на вашем модуле.
Размер текста кнопки
Этот параметр можно использовать для увеличения или уменьшения размера текста в кнопке. Кнопка изменяется с увеличением и уменьшением размера текста.
Цвет текста кнопки
По умолчанию кнопки используют акцент цвета вашей темы, как это определено в настройке темы. Эта опция позволяет вам назначить цвет настраиваемого текста кнопке на этом модуле. Выберите свой собственный цвет с помощью панели выбора цветов, чтобы изменить цвет кнопки.
Цвет фона кнопки
По умолчанию кнопки имеют прозрачный цвет фона. Это можно изменить, выбрав желаемый цвет фона в панели выбора цветов.
Кнопка ширины границы
Все кнопки Divi имеют границу 2px по умолчанию. Эта граница может быть увеличена или уменьшена с помощью этого параметра. Границы можно удалить, введя значение 0.
Цвет рамки кнопки
По умолчанию границы кнопок изменяются на цвет акцента вашей темы, как это определено в настройке темы. Эта опция позволяет вам назначить настраиваемый цвет границы кнопке на этом модуле. Выберите свой собственный цвет, используя цветной выбор, чтобы изменить цвет границы кнопки.
Рамка границы кнопки
Радиус границы влияет на округлость углов ваших кнопок. По умолчанию кнопки в Divi имеют небольшой радиус границы, который округляет углы 3 пикселей. Вы можете уменьшить это значение до 0, чтобы создать квадратную кнопку или значительно увеличить ее для создания кнопок с круговыми краями.
Интервал букв кнопок
Интервал букв влияет на пространство между каждой буквой. Если вы хотите увеличить пробел между каждой буквой в тексте кнопки, используйте ползунок диапазона, чтобы отрегулировать пространство или ввести желаемый размер расстояния в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Шрифт кнопки
Вы можете изменить шрифт текста кнопки, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками больших шрифтов на основе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль своего текста, используя выделенные жирным шрифтом, курсивом, прописными и подчеркнутыми параметрами.
Добавить значок кнопки
Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки в режиме наведения.
Значок кнопки
Если значки включены, вы можете использовать этот параметр, чтобы выбрать значок, который будет использоваться в вашей кнопке. У Divi есть разные значки на выбор.
Кнопка цветного значка
Установка этого параметра изменит цвет значка, который появляется на вашей кнопке. По умолчанию цвет значка совпадает с цветом текста ваших кнопок, но этот параметр позволяет вам регулировать цвет независимо.
Кнопка размещения значков
Вы можете отображать значок своей кнопки слева или справа от вашей кнопки.
Показывать только значок, когда кнопка перекатывается
По умолчанию значки кнопок отображаются только во время опроса. Если вы хотите, чтобы значок всегда отображался, отключите эту настройку.
Цвет текста кнопки наведения
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Цвет фона кнопки наведения
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Кнопка ограничения цвета
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Наведите указатель поворота границы
Когда кнопка переместится мышью посетителя, это значение будет использовано. Значение изменится с базового значения, определенного в предыдущих параметрах.
Кнопка разметки заметок
Когда кнопка переместится мышью посетителя, это значение будет использовано. Значение изменится с базового значения, определенного в предыдущих параметрах.
Дополнительные параметры модуля входа в систему
На вкладке «Дополнительно» вы найдете варианты, которые могут быть полезны более опытным веб-дизайнерам, например атрибутам 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 рекомендуют следующие категории: