Пропустить

Учебник Divi: использование модуля Email Optin

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

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

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

Вы можете легко расширить свой список рассылки, используя модуль регистрации рассылки, предлагаемый темой WordPress Divi. Этот модуль поддерживает интеграцию MailChimp , Aweber et Feedburner.

интеграция mailchimp divi.png

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

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

использовать divi builder

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

email optin.png

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

Настройка учетных записей электронной почты

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

электронная почта optin configuration.png

Чтобы добавить нового провайдера электронной почты, сначала выберите своего провайдера электронной почты из списка. Выберите провайдера , Затем нажмите кнопку добавлять чтобы связать модуль с вашей учетной записью электронной почты. В настоящее время Divi поддерживает трех поставщиков: MailChimp, AWeber и Feedburner.

Свяжите свою учетную запись AWeber

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

логин aweber divi.png

Затем скопируйте и вставьте ключ в поле Ключ API в настройках модуля, затем нажмите кнопку послать .

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

Свяжите свою учетную запись MailChimp

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

Вы можете найти свой ключ API MailChimp в своей учетной записи MailChimp.com. Войдите и перейдите на страницу своего профиля. Смотреть в рубрике экстракт и найдите ссылку API ключи , Voici Quelques дополнительная информация о том, как найти ваш ключ API.

api mailchimp divi.png

Пример использования примера: добавление подписного сообщения в нижней части сообщения в блоге

Обычное место для добавления формы электронной почты optin чуть ниже содержания вашего сообщения.
Для этого быстрого примера я покажу вам, как легко вставить и стилизовать модуль электронной почты Optin под сообщением в блоге с помощью Visual Builder.

визуальный строитель divi example.jpg

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

Поскольку этот пример будет предложением для электронных книг, добавьте модуль изображения в левую колонку и загрузите изображение книги. Установите выравнивание изображения на «Центр» и установите максимальную ширину изображения на 300px.

добавить модуль электронной почты optin divi.jpg

Затем добавьте модуль электронной почты Optin в правый столбец.

пример email optin tutorial divi.png

Обновите настройки электронной почты Optin следующим образом:

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

Заголовок: «Новые подписчики получают БЕСПЛАТНУЮ копию моей электронной книги». Текст кнопки: «Подписка» Содержание: «Увлекательная история, которая оставит вас на краю места». Поставщик услуг: [выберите поставщика услуг] 
Выберите список или заголовок потока

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

Цвет фона поля: # f1f1f1 Цвет фона: #ffffff Цвет границы фокуса: ДА Цвет границы: # 02b875 Цвет текста: Темный Направление текста: Верхний колонтитул Шрифт: PT Sans Header Размер шрифта: 35px Высота головы: 1.3em Размер шрифта тела: 18px Пользовательский отступ: 20px Право, 20px Левый Стиль Использовать пользовательский для кнопки: ДА Кнопка размера текста: 26px Цвет кнопки текста: # Кнопка ffffff Цвет фона: # 02b875 Кнопка ширины границы: 2 Кнопка границы Цвет: # 02b875 Кнопка межбуквенного ввода: 1px Значок кнопки добавления: Да Значок кнопки: [добавить значок]

электронная книга пример divi configuration.png

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

Опция содержимого модуля электронной почты Optin

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

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

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

параметр параметров опций электронной почты content.png

Название

Вставьте название вашей регистрационной формы здесь.

Текст кнопки

Укажите текст кнопки регистрации здесь.

Содержание

В этом поле вы можете ввести содержимое модуля SignUp.

Провайдер услуг

Здесь вы можете выбрать, какого поставщика рассылки вы используете. Модуль в настоящее время поддерживает интеграцию MailChimp , Aweber et Feedburner, Выберите вашего поставщика из списка, а затем перейдите к следующим параметрам.

Списки MailChimp

Если вы выбрали MailChimp как поставщик, эта опция появится. Здесь вы можете выбрать список MailChimp для добавления клиентов. Если вы не видите здесь никакого списка, вы должны убедиться, что ключ API MailChimp определен в ePanel и что у вас есть хотя бы один список в учетной записи MailChimp. Если вы добавили новый список, но он здесь не отображается, включите опцию «Regenerate MailChimp Lists» в ePanel. Не забудьте отключить его после восстановления списка.

Листы Авебера

Если вы выбрали Aweber как поставщик, эта опция появится. Здесь вы можете выбрать список Aweber для добавления клиентов. Если вы не видите здесь никакого списка, вам нужно убедиться, что Aweber правильно настроен в ePanel и что у вас есть хотя бы один список в учетной записи Aweber. Если вы добавили новый список, но его здесь нет, активируйте опцию «Регенерировать списки веб-ссылок» в ePanel. Не забудьте отключить его после восстановления списка.

Заголовок Feedburner

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

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

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

Цвет фона

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

Административная этикетка

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

Электронная почта Дизайн раздела Optin

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

дизайн модуля электронной почты optin.png

Цвет фона поля формы

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

Цвет текста поля формы

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

Цвет фона

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

Цвет текста в фокусе

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

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

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

Цвет рамки фокуса

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

Цвет текста

Если цвет фона темный, цвет текста должен быть установлен на «Светлый». С другой стороны, если цвет фона чистый, цвет текста должен быть установлен на «Темный».

Текстовая ориентация

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

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

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

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

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

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

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

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

По умолчанию все цвета текста 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 имеет разные иконки на выбор.

Кнопка со значком цвета

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

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

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

Показывать только значок наведения кнопки

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

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

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

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

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

Цвет фона кнопки наведения

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

Кнопка ограничения цвета

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

Наведите указатель поворота границы

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

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

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

Email Optin Дополнительные параметры

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

модуль электронной почты optin

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

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

Класс CSS

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

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

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

видимость

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

Другие учебники по теме WordPress Divi

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

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

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

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

Вверх
11 акции
доля6
чирикать1
Регистрация4