Пропустить

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

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

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

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

Вы можете легко расширить свой список рассылки с помощью модуля подписки на рассылку, предлагаемого темой Divi WordPress. Этот модуль поддерживает интеграцию 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

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

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

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

электронная почта 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 ключи . вот некоторые дополнительная информация о том, как найти ваш ключ API.

api mailchimp divi.png

Пример использования: добавление сообщения о подписке в конец сообщения в блоге

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Название

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

Текст кнопки

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

Содержание

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

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

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

Списки MailChimp

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

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

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

Заголовок Feedburner

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

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

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

Цвет фона

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

Ярлык администрации

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

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

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

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

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

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

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

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

Цвет фона

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

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

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

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

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

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

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

Цвет текста

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

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

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

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

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

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

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

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

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

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

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

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

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

Высота строки заголовка

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

Шрифт тела

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

Размер шрифта тела

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

Цвет текста тела

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

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

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

Высота линии тела

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

Использовать границу

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

Цвет границы

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

Ширина границы

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

Стиль границ

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

Пользовательская маржа

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

Таможенная обивка

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

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

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

Размер текста кнопки

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

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

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

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

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

Кнопка ширины границы

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

Цвет рамки кнопки

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

Рамка границы кнопки

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

Интервал букв кнопок

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

Шрифт кнопки

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

Добавить значок кнопки

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

Значок кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вверх