Как создать привлекательный раздел подписки для любого типа веб-сайта с помощью Divi

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

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

Давайте приступим к делу!

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

Предварительный просмотр

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

Цветовая палитра # 1

• Цвет # 1: rgba (79,35,255,0,88)
• Цвет # 2: # e09900
• Цвет # 3: # 4f23ff

Цветовая палитра # 2

• Цвет # 1: rgba (255,35,97,0,75)
• Цвет # 2: # e09900
• Цвет # 3: # d80e00

Цветовая палитра # 3

• Цвет # 1: rgba (41,17,147,0.75)
• Цвет # 2: # 00ffd8
• Цвет # 3: # 291193.

Подход

Выберите одну из цветовых палитр выше (или создайте свою) и используйте эти цвета на протяжении всего урока. Мы будем ссылаться на цвет №1, №2 или №3, когда будем использовать цвет в наших настройках. Мы также делаем так, чтобы модуль подписки перекрывал два столбца, и подчеркиваем преимущества подписки на список рассылки.

Восстановить раздел подписки

Добавить новый раздел

Верхний разделитель

Откройте страницу, на которую хотите добавить раздел подписки, и добавьте новый стандартный раздел. Сразу откройте настройки своего раздела и добавьте следующий верхний разделитель:

• Стиль разделителя: найти в списке
• Цвет разделителя: #FFFFFF
• Высота разделителя: 200 пикселей
• Переворот разделителя: вертикальный

Нижний разделитель

Добавьте такой же разделитель внизу вашего раздела:

• Стиль разделителя: найти в списке
• Цвет разделителя: #FFFFFF
• Высота разделителя: 200 пикселей
• Переворот разделителя: вертикальный

Интервал

Затем откройте настройки «Интервал» и удалите все отступы по умолчанию для вашего раздела, добавив «0 ​​пикселей» к верхнему и нижнему отступу.

Добавить новую строку

Структура столбца

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

Градиентный фон

Откройте настройки строки и продолжите, добавив следующий градиентный фон:

• Первый цвет градиента: цвет # 1
• Второй цвет градиента: цвет # 2
• Направление градиента: 123 град.
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Продолжите, добавив фоновое изображение по выбору. Это фоновое изображение будет лишь немного просвечивать. Также выберите «Обложка» в качестве размера фонового изображения.

Цвет фона столбца 2

Затем добавьте rgba (255,255,255,0.87) в качестве цвета фона столбца 2.

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Последнее, что вам нужно сделать в настройках строки, - это добавить пользовательские отступы:

• Отступ сверху и снизу: 0 пикселей
• Отступ сверху столбца 1: 200 пикселей.
• Отступ нижнего столбца 1: 100 пикселей
• Верхнее поле столбца 2: 300 пикселей (рабочий стол), 50 пикселей (планшет и телефон).
• Отступ нижнего столбца 2: 100 пикселей (планшет и телефон)
• Отступ слева и справа столбца 2: 50 пикселей.

Добавить модуль Blurb # 1 в столбец 1

Добавить заголовок рекламного объявления

Теперь приступим к добавлению наших модулей! Мы начнем с первого столбца, добавив модуль Blurb. Как только мы закончим изменять этот модуль Blurb, мы повторно используем его настройки и для двух других. После добавления модуля Blurb дайте ему название.

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

Затем добавьте значок в свой модуль Blurb. Мы использовали следующий значок для первого модуля:

Настройки значков

Измените внешний вид значка, добавив следующие настройки:

• Цвет значка: #FFFFFF
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 43 пикс.

Настройки текста заголовка

Мы используем только заголовок аннотации. Вот почему нам нужно изменить настройки текста только для H4:

• Шрифт заголовка: Yeseva One
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: #FFFFFF
• Интервал между заголовками: -1px

Размеры

Мы также изменим ширину нашего модуля Blurb в соответствии с различными размерами экрана:

• Ширина содержимого: 150 пикселей
• Ширина: 33% (рабочий стол), 40% (планшет), 60% (телефон)
• Выравнивание модуля: по центру

Интервал

Наконец, добавьте в модуль Blurb следующие пользовательские отступы:

• Отступ сверху и снизу: 50 пикселей

Клонировать модуль Blurb дважды и модифицировать рекомендуемый модуль Blurb

Изменить значок и содержимое

Теперь вы можете дважды клонировать модуль Blurb. Сохраните их все в первом столбце. Для каждого из новых модулей Blurb измените значок и заголовок, чтобы они соответствовали сообщению, которое вы хотите отправить.

Добавить цвет фона

Мы собираемся выделить средний модуль Blurb. Для этого мы начнем с добавления к нему белого цвета фона.

Изменить цвет значка и заголовка

Мы также изменим цвет значка и заголовка H4 на «# 000000».

Добавить закругленные углы

Затем мы добавим «5 пикселей» к каждому из углов в настройках границы.

Коробка Тень

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

Добавить текстовый модуль №1 в столбец 2

Настройки текста

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

• Шрифт текста: Yeseva One
• Цвет текста: # 000000
• Размер текста: 54 пикс.
• Высота текстовой строки: 1em

Добавить текстовый модуль №2 в столбец 2

Интервал

Прямо под этим текстовым модулем мы собираемся добавить еще один текстовый модуль для описания. После того, как вы добавили свой контент, добавьте «20 пикселей» к верхнему полю.

Добавить модуль подписки по электронной почте в столбец 2

Фоновый цвет

Следующий модуль, который нам нужно добавить, - это модуль подписки на электронную почту. После добавления измените цвет фона на «rgba (255,255,255,0)».

Адрес электронной почты

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

Поля

Продолжите, открыв настройки поля и отключив поля «Имя» и «Фамилия».

Параметры поля

Мы также изменим настройки поля. Удалите закругленные углы, добавив «0 ​​пикселей» к каждому из углов. Также добавьте первый вариант тени блока.

Настройки кнопок

Затем измените внешний вид вашей кнопки:

• Цвет текста кнопки: #FFFFFF
• Цвет фона кнопки: цвет # 3
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Yeseva One
• Показать значок кнопки: Да
• Цвет значка кнопки: #FFFFFF
• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет
• Тень коробки: выберите первый вариант

Интервал

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

• Верхнее поле: 20 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Левое поле: -60% (ПК и планшет), 0 пикселей (телефон)
• Правое поле: 60% (рабочий стол), 50% (планшет), 0 пикселей (телефон)

Добавить модуль "Социальные сети" в столбец 2

Добавьте столько социальных сетей, сколько нужно

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

Закругленные углы

После того, как вы добавили все социальные сети, добавьте «50 пикселей» в каждый из углов в настройках границы.

Интервал

Мы также сдвинем модуль вниз, добавив «50 пикселей» к верхнему полю.

Изменение цвета фона каждой социальной сети индивидуально

И последнее, но не менее важное: измените цвет фона каждой социальной сети индивидуально на «# 000000».

Предварительный просмотр

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

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

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