5 дизайнов подписки на рассылку электронной почты, которые можно создать с помощью модуля подписки на рассылку электронной почты Divi

Мы все любим новых подписчиков на нашу рассылку. И один из основных способов получить новых подписчиков - предоставить вашим посетителям хорошо продуманную форму подписки по электронной почте. Вот почему в этом уроке я собираюсь показать вам, как создать пять различных дизайнов с помощью модуля подписки Divi email opt-in, чтобы пробудить ваше воображение относительно того, что возможно с этим мощным и гибким модулем.

Sneak Peek

Вот предварительный просмотр пяти дизайнов модуля Divi Email Opt-in, над которыми мы будем работать сегодня.

Подключаемость # 1 Shadow Stacks

Начать разработку # 1

# 2 Большой и минимальный выбор

Начать разработку # 2

Вариант 3 за скинни

Начать разработку # 3

Предложение № 4: участие в предложении

Начать разработку # 4

# 5 Вырезание рамки

Начать разработку # 5

Что вам нужно для начала

Подпишитесь на наш канал Youtube

Для этого урока вам понадобится только Divi. Мы будем создавать каждый из них с нуля, поэтому готовый макет не понадобится. Тем не менее, я буду использовать несколько изображений из некоторых наших пакетов макетов, но вы можете использовать свои собственные, если хотите.

Кроме того, важно знать, что вы не сможете видеть поля формы подписки на действующем сайте, пока не назначите поставщика / список электронной почты для своего модуля подписки на электронную почту. Вы можете сделать это в настройках подписки на электронную почту в разделе «Учетная запись электронной почты».

Теперь перейдем к этим дизайнам!

Подключаемость # 1 Shadow Stacks

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

Вот как это делается.

Сначала создайте новый раздел со строкой из одного столбца и добавьте в строку модуль подписки по электронной почте.

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

Цвет фона: # 1a0a38
Макет: тело сверху, форма снизу
Поля со скругленными углами: 0 пикселей
Ориентация текста: по центру
Толщина шрифта заголовка: легкий
Размер текста заголовка: 36 пикселей
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 00ac69
Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 0 пикселей
Пользовательские отступы: 3vw сверху, 3vw снизу, 5vw слева, 5vw справа

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 25 пикселей
Вертикальное положение тени блока: -25 пикселей
Цвет тени: rgba (26,10,56,0.82)

Теперь давайте добавим небольшой фрагмент пользовательского CSS, чтобы убрать левый отступ, который добавляется к форме по умолчанию. Перейдите на вкладку «Дополнительно» и добавьте следующий CSS-код в поле «Форма подписки».

padding-left: 0px !important;

Это касается настроек модуля подписки на электронную почту. Теперь отредактируем нашу строку. Откройте настройки строки и обновите следующее:

Настраиваемая ширина: 600 пикселей
Пользовательские отступы: 25 пикселей сверху, 0 пикселей снизу, 25 пикселей справа.
Ширина нижней границы: 25 пикселей
Цвет нижней границы: rgba (0,0,0,0)
Ширина левой границы: 25 пикселей
Цвет левой границы: rgba (0,0,0,0)

Теперь мы можем добавить тень блока к строке.

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 50 пикселей
Вертикальное положение тени блока: -50 пикселей
Сила распространения тени коробки: -25 пикселей
Цвет тени: rgba (26,10,56,0.55)

Теперь посмотрим на окончательный дизайн.

# 2 Большой и минимальный выбор

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

Вот как это сделать.

Сначала создайте новый раздел со строкой из одного столбца и добавьте в строку модуль подписки по электронной почте.

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

Затем обновите фон темным цветом или изображением:

Цвет фона: # 121212
Фоновое изображение: это необязательно. Я использую один из пакета макетов подкастов

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

Пользовательская ширина: 100%

Совет: использование 100% нестандартной ширины - отличный способ убедиться, что ваш дизайн не имеет правого или левого поля на мобильном устройстве. Если вы используете опцию «Сделать полную ширину», ваша максимальная ширина будет 89%, так что у вас по-прежнему будут поля на мобильном устройстве.

Теперь вернитесь в настройки модуля подписки по электронной почте и обновите следующий дизайн:

Макет: тело сверху, форма снизу

Цвет фона поля формы: rgba (0,0,0,0)
Поля со скругленными углами: 0 пикселей
Ширина нижней границы поля: 2 пикселя
Цвет нижней границы полей: #ffffff

Ориентация текста: по центру

Шрифт заголовка: Lato
Толщина шрифта заголовка: легкий
Стиль шрифта заголовка: TT
Размер текста заголовка: 4vw
Высота строки заголовка: 1em

Цвет текста поля: #ffffff
Шрифт поля: Lato
Плотность шрифта поля: Light
Размер текста поля: 3.5vw
Интервал между буквами поля: 0,1 м
Высота линии поля: 1,3 м

Интервал между буквами тела: 0,5 м

Размер текста кнопки: 4vw
Радиус границы кнопки: 0 пикселей
Расстояние между буквами кнопки: 0,1 м
Шрифт кнопки: Lato
Толщина шрифта: легкий
Пользовательские отступы: 10vw сверху, 10vw снизу, 10vw слева, 10vw справа

Обратите внимание на использование единицы длины vw для размера шрифта в сочетании с единицей длины em для высоты строки и межбуквенного интервала. Это позволяет легко масштабировать текст и дизайн при настройке вашего браузера.

Последний шаг - это несколько фрагментов пользовательского CSS для доработки дизайна. Перейдите на вкладку «Дополнительно» и добавьте следующий настраиваемый CSS в поле «Поля формы для подписки»:

font-size: 3.5vw;

Это позволит размеру текста при наборе текста соответствовать тексту-заполнителю в полях вашей формы.

Затем давайте добавим немного настраиваемого поля над кнопкой, чтобы дать ей немного передышки. Добавьте следующее под кнопкой «Подписаться»:

margin-top: 3.5vw;

Теперь посмотрим на окончательный дизайн.

Вариант 3 за скинни

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

Вот как это сделать.

Создайте новый раздел со строкой из одного столбца и добавьте в строку модуль подписки по электронной почте.

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

Затем обновите дизайн, добавив фон и цвет кнопки следующим образом:

Цвет фона: # 54677d
Макет: тело сверху, форма снизу
Ориентация текста: по центру
Цвет фона кнопки: # b0c94f
Ширина границы кнопки: 0 пикселей

Пришло время настраивать CSS. Поскольку нам нужен тонкий дизайн формы только на настольном компьютере (а не на мобильном устройстве), мы будем добавлять CSS на страницу (в настройках страницы), используя Custom CSS ID для таргетинга на стиль формы.

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

CSS ID: скинни

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

Теперь откройте настройки страницы Divi Builder и добавьте следующий CSS на вкладке «Дополнительно».

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Поскольку Divi уже использует flex для стилизации формы на бэкэнде, этот CSS извлекает свойство flex-wrap, которое заставляет поля формы выравниваться по вертикали. Результат - горизонтальное расположение полей формы. Настройка свойства flex-base на 23% в основном устанавливает ширину каждого поля формы. А поскольку мы добавили CSS внутрь медиа-запроса, дизайн будет происходить только на настольном компьютере с макетом формы по умолчанию, отображаемым на мобильном устройстве.

Вот окончательный дизайн.

Предложение № 4: участие в предложении

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

Вот как это сделать.

Создайте новый раздел со строкой из одного столбца и добавьте в строку модуль подписки по электронной почте.

Откройте настройки подписки на электронную почту и оставайтесь на вкладке контента.

Под описанием сократите текст по умолчанию до пары предложений. Затем добавьте изображение из медиатеки, нажав кнопку «Добавить медиафайл».

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

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

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

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

Фоновое изображение: [добавить изображение]
Цвет фона градиента слева: rgba (0,0,0,0.5)
Цвет фона градиента справа: rgba (0,0,0,0.5)
Поместите градиент над фоновым изображением: ДА

Затем обновите остальную часть дизайна следующим образом:

Цвет текста кнопки: # 333333
Цвет фона кнопки: # ffcb7a
Ширина границы кнопки: 0 пикселей
Расстояние между буквами кнопки: 5 пикселей
Плотность шрифта: Ультра полужирный
Стиль шрифта: TT
Ширина: 700 пикселей
Выравнивание модуля: по центру
Пользовательские отступы: 3vw сверху, 3vw снизу, 3vw слева, 3vw справа

Вот окончательный дизайн.

# 5 Вырезание рамки

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

Вот как это сделать.

Создайте новый раздел со строкой из одного столбца и добавьте в строку модуль подписки по электронной почте.

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

Цвет фонового градиента слева: # 8300e9
Правый цвет градиента фона: # 06c8ff
Тип градиента: радиальный
Радиальное направление: вверху слева

Затем обновите остальную часть дизайна следующим образом:

Толщина шрифта заголовка: полужирный
Размер текста заголовка: 36 пикселей
Ширина: 70% (рабочий стол), 100% (планшет и смартфон)
Выравнивание модуля: по центру
Пользовательское заполнение: 6vw сверху, 6vw снизу, 6vw слева, 6vw справа
Закругленные углы: 50 пикселей вверху слева, 0 пикселей вверху справа, 50 пикселей внизу справа, 0 пикселей внизу слева.

Сохраните ваши настройки.

Затем обновите настройки строки, задав произвольную ширину.

Пользовательская ширина: 100%

Теперь мы готовы настроить параметры раздела, чтобы добавить эффект вырезанной рамки с этими разделителями.

Откройте настройки раздела и обновите следующее:

Цвет фона: # 222222

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: # 222222 (убедитесь, что он соответствует цвету фона раздела)
Высота верхнего разделителя: 12vw (рабочий стол), 150px (планшет и смартфон)
Расположение верхнего разделителя: поверх содержимого раздела

Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: # 222222 (убедитесь, что он соответствует цвету фона раздела)
Высота нижнего разделителя: 12vw (рабочий стол), 150px (планшет и смартфон)
Горизонтальное повторение нижнего делителя: 0,8x
Переворот нижнего разделителя: вертикальный и горизонтальный
Расположение нижнего разделителя: поверх содержимого раздела

Теперь посмотрим на окончательный дизайн.

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

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!