Мы все любим с новыми подписчиками в наш список Новостную рассылку. Один из основных способов получить новых подписчиков — предоставить вашим посетителям форма хорошо продуманная регистрация по электронной почте. Вот почему в этом уроке я покажу вам, как создать три разных дизайна с помощью модуля подписки на электронную почту Divi, чтобы пробудить ваше воображение о возможностях этого мощного и гибкого модуля.
обследование
Вот обзор трех концепций модуля электронной почты Divi, которые мы рассмотрим сегодня.
Включите # 1 стеков теней
# 2 Большой и минимальный выбор
# 3 маленькая форма подписки
Что нужно для начала
Для этого урока вам понадобится только Divi. Мы построим каждый из них форма с нуля, поэтому нет необходимости в предварительно сделанном макете. Тем не менее, я буду использовать несколько изображений из некоторых пакетов макетов, но вы можете использовать свои собственные, если хотите.
Также важно знать, что вы не сможете видеть поля форма включение на активный сайт до тех пор, пока вы не назначите поставщика/список электронной почты для своего модуля подписки по электронной почте. Вы можете сделать это в настройках подписки электронной почты в разделе «Учетная запись электронной почты».
Теперь давайте перейдем к этим чертежам!
Включите # 1 стеков теней
Этот дизайн добавляет две тени блока к модулю регистрации электронной почты Divi для уникального эффекта стека, который выталкивает форму. Первая тень окна добавляется в модуль подписки электронной почты, а вторая тень окна добавляется в строку, которая имеет нестандартный размер и границу, чтобы заставить ее работать.
Вот как это делается.
Сначала создайте новый раздел со строкой из одного столбца, а затем добавьте в строку модуль регистрации по электронной почте.
Откройте настройки подключения к электронной почте и обновите следующее:
Цвет фона: #1a0a38
Расположение: тело сверху, форма на основании
Монеты с закругленными полями: 0px
Текстовая ориентация:
Заголовок по центру Толщина шрифта:
Очистить заголовок Размер текста: 36 пикселей
Цвет текстовой кнопки: #ffffff
Цвет фона кнопки: # 00ac69
Ширина границы кнопки: 0px
Радиус кнопки: 0px
Пользовательские отступы: 3vw вверху, 3vw внизу, 5vw слева, 5vw справа
Теперь давайте добавим наш первый слой с тенью ящика для модуля приема электронной почты.
Box Shadow: см. Снимок экрана
Box Shadow Горизонтальное положение: 25px
Вертикальное положение тени от коробки: -25px
Цвет тени: RGBA (26,10,56,0.82)
Теперь давайте добавим небольшой фрагмент пользовательского кода CSS, чтобы удалить левый отступ, добавленный по умолчанию в форму. Перейдите на вкладку «Дополнительно» и добавьте следующий CSS в форму членства.
padding-left: 0px !important; |
Это поддерживает настройки модуля электронной почты для подписки. Теперь отредактируем нашу строку. Откройте настройки строки и обновите следующее:
Пользовательская ширина: 600px
Пользовательский отступ: 25px вверх, 0px вниз, 25px вправо
Ширина нижней границы: 25px
Цвет нижней границы: rgba (0,0,0,0)
Ширина левой границы: 25px
Цвет левой границы: rgba (0,0,0, 0)
Теперь мы можем добавить к линии тень от прямоугольника.
Box Shadow: см. Снимок экрана
Box Shadow Горизонтальное положение: 50px
Вертикальное положение тени от коробки: -50px
Сила распространения тени в коробке: -25px
Цвет тени: RGBA (26,10,56,0.55)
Все, что вам нужно сделать, это отредактировать текст в форме. Теперь посмотрим на окончательный дизайн.
# 2 Большой и минимальный выбор
Этот дизайн подписки на электронную почту минимален, чист и велик. Поля формы адаптируются к размеру браузера, поэтому она отлично выглядит на всех устройствах. И он не слишком велик, чтобы требовать прокрутки.
Вот как это сделать.
Сначала создайте новый раздел со строкой из одного столбца, а затем добавьте в строку модуль регистрации по электронной почте.
Откройте настройки участия по электронной почте и обновите содержимое, включив в него заголовок и текст нижнего колонтитула.
Затем обновите фон темным цветом или изображением:
Цвет фона: #121212
Фоновое изображение: это необязательно. Я использую один из пакета макетов подкастов
Прежде чем мы перейдем на вкладку «Дизайн» для дополнительной настройки, нам нужно освободить место для больших элементов формы, которые мы собираемся добавить. Для этого перейдите в настройки строки и обновите следующее:
Пользовательская ширина: 100%
Conseil: Использование 100% нестандартной ширины - отличный способ убедиться, что у вашего дизайна нет левого или правого поля на мобильном телефоне. Если вы используете опцию «Создать полную ширину», ваша максимальная ширина будет 89%, так что у вас всегда будут поля на вашем мобильном телефоне.
Теперь вернитесь к настройкам модуля регистрации электронной почты и обновите следующий шаблон:
Макет: тело вверх, форма вниз
Цвет фона поля формы: rgba (0,0,0,0)
Скругленные углы: 0px
Ширина полей нижней границы: 2px
Цветовые поля нижней границы: #ffffff
Ориентация текста: Центр
Название шрифта: Lato
Название шрифта: Light
Стиль шрифта заголовка: TT
Размер текста заголовка: 4vw
Высота строки заголовка: 1em
Цвет текста поля: #ffffff
Шрифт поля: Lato
Поле Вес шрифта: Light
Размер текста: 3.5vw
Интервал букв поля: 0.1em
Высота линии поля: 1.3em
Интервал букв тела: 0.5em
Размер текста кнопки: 4vw
Радиус кнопки: 0px
Пространство букв кнопок: 0.1em
Шрифт кнопки: Lato
Вес шрифта: легкий
Пользовательские отступы: 10vw вверху, 10vw внизу, 10vw слева, 10vw справа
Обратите внимание на использование единицы длины vw для размера шрифта в сочетании с единицей длины em для высоты строки и межбуквенного интервала. Это позволяет легко адаптировать текст и дизайн при настройке вашего браузера.
Последний шаг включает несколько настраиваемых фрагментов CSS для полировки дизайна. Перейдите на вкладку Дополнительно и добавьте следующий настраиваемый CSS в Поля формы членства:
font-size: 3.5vw; |
Это позволит при вводе текста размер текста совпадать с альтернативным текстом в полях формы.
Затем давайте добавим настраиваемое поле над кнопкой, чтобы немного передохнуть. Добавьте следующие элементы под кнопкой «Подписаться»:
margin-top: 3.5vw; |
Теперь давайте посмотрим на окончательный дизайн.
# 3 Маленькая форма подписки
Этот новый дизайн наверняка станет популярным решением для компаний и блогов, которые хотят сэкономить вертикальное пространство на своих постах или целевых страницах. Несмотря на то, что модуль членства по электронной почте Divi больше подходит для формы более традиционные вертикальные формы, вы можете преобразовать их в однострочные горизонтальные формы с помощью небольшого фрагмента кода CSS.
Вот как это сделать.
Создайте новый раздел со строкой из одного столбца и добавьте в строку модуль членства по электронной почте.
Откройте настройки подписки по электронной почте и обновите содержимое, включив в него заголовок, но ничего больше.
Затем обновите чертеж фоном и цветом кнопки следующим образом:
Цвет фона: # 54677d
Макет: тело вверх, форма вниз
Ориентация текста: Центр
Цвет фона кнопки: #b0c94f
Ширина границы кнопки: 0px
Пришло время кастомного CSS. Поскольку мы хотим, чтобы дизайн тонкой формы был только для настольных компьютеров (а не для мобильных устройств), мы добавим CSS на страницу (в настройках страницы), используя собственный идентификатор CSS для таргетинга на стиль формы. .
Для этого перейдите на вкладку «Дополнительно» и назначьте настраиваемый идентификатор CSS для модуля членства.
CSS id: тощий
Это будет использоваться для нацеливания на эту форму с помощью внешнего CSS, который мы добавим на страницу.
Теперь откройте настройки на странице Divi Builder и добавьте следующий CSS-код на вкладку «Дополнительно».
@media (минимальная ширина: 980 пикселей) {# skinny.et_pb_newsletter .et_pb_newsletter_fields {flex-wrap: nowrap! important; } # skinny.et_pb_newsletter .et_pb_newsletter_fields> * {гибкая основа: 23%; }} #skinny .et_pb_newsletter_form {padding-left: 0px; }
Поскольку Divi уже использует flex для стилизации формы на бэкэнде, этот CSS удаляет свойство flex-wrap, которое выравнивает поля формы по вертикали. Результат - горизонтальное расположение полей формы. Устанавливая свойство flex-base на 23%, вы обычно устанавливаете ширину каждого поля формы. А поскольку мы добавили CSS в медиа-запрос, дизайн будет происходить только на рабочем столе, а макет формы по умолчанию будет отображаться на мобильном устройстве.
Вот окончательный дизайн.
Это все для этого урока, я надеюсь, что он позволит вам создать формы единая подписка на Divi Builder.
