Как добавить подписку Divi Email Optin в сообщение в блоге Gutenberg

Блок макета Divi открывает двери для множества удобных способов переноса мощных функций дизайна Divi Builder в редактор блоков WordPress по умолчанию (Gutenberg). Это позволяет вам писать большую часть контента вашего блога, используя знакомый интерфейс блока Гутенберга, а затем вставлять макеты Divi, где требуется индивидуальный дизайн или функциональность. Блок макета Divi может включать все, что вы можете построить в Divi Builder, но он также отлично подходит для включения чего-то столь же простого и необходимого, как подписка по электронной почте.

В этом руководстве мы расскажем, как добавить красивую подписку Divi Email Optin в сообщение в блоге Gutenberg с помощью блока макета Divi.

Давайте начнем!

Sneak Peek

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Импорт блока макета JSON

Загрузить макет в библиотеку Divi

Чтобы импортировать файл JSON, который вы смогли загрузить выше, перейдите в свою библиотеку Divi на бэкэнд панели управления WordPress и нажмите «Импорт и экспорт».

Затем выберите файл JSON в папке загрузки и нажмите «Импортировать макеты Divi Builder».

Добавить новый блок Divi Block в пост Гутенберга

После того, как ваш макет был импортирован, вы можете перейти к своему посту в Гутенберге и добавить новый блок макета Divi.

Импортировать файл JSON из сохраненных макетов

Затем нажмите «Загрузить из библиотеки», перейдите к «Сохраненные макеты» и выберите макет, чтобы импортировать блок макета Divi CTA в свое сообщение в блоге. Вот и все!

Вот и все!

Давайте перейдем к руководству, не так ли?

Добавление подписки Divi Email Optin к вашему сообщению в блоге Gutenberg

Создать или отредактировать сообщение в блоге

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

Добавить встроенный блок макета Divi

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

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

Создайте новый макет в блоке макета Divi

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

Дизайн сечения

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

Для начала откройте настройки раздела уже существующего по умолчанию раздела.

Фоновый градиент

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

• Цвет фонового градиента слева: # ff9945
• Правый цвет градиента фона: # f86a4c

Разделители

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

• Стиль верхнего делителя: см. Снимок экрана
• Цвет верхнего разделителя: # f86a4c
• Повторение по горизонтали верхнего делителя: 0,8x

• Стиль нижнего разделителя: см. Снимок экрана
• Цвет нижнего разделителя: # ff9945
• Горизонтальное повторение нижнего делителя: 0,8x
• Переворот нижнего разделителя: горизонтальный и вертикальный

Маржа и граница

После того, как разделители будут на месте, дайте секции немного поля сверху и снизу, а затем завершите ее рамкой и анимацией, как показано ниже:

• Поля: сверху 20 пикселей, снизу 20 пикселей
• Закругленные углы: 30 пикселей
• Ширина границы: 2 пикселя
• Цвет границы: # ff9945
• Стиль анимации: флип

Добавить столбец и установить ширину строки

Теперь, когда раздел завершен, добавьте в строку структуру из одного столбца.

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

• Ширина: 100%
• Максимальная ширина: 100%

Создайте подписку на электронную почту

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

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

Электронная почта Optin Content

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

• Заголовок: «Получайте БЕСПЛАТНЫЕ советы каждую неделю!»
• Body: [оставить фиктивный контент по умолчанию]
• Список Mailchimp: [добавить список]
• Использовать одно поле имени: ДА
• Использовать цвет фона: НЕТ

Электронная почта Optin Design

Поля

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

• Макет: тело справа, форма слева
• Цвет фона полей: # f86a4c
• Цвет текста полей: #ffffff
• Шрифт полей: IBM Plex Sans
• Размер текста полей: 18 пикселей
• Расстояние между полями: 2 пикселя
• Высота линии полей: 2em

Заголовок

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

• Шрифт заголовка: IBM Plex Sans Condensed
• Плотность шрифта заголовка: полужирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 60 ​​пикселей (рабочий стол), 30 пикселей (телефон)
• Высота строки заголовка: 1.2em (настольный компьютер), 1.6 (телефон)

Кнопка

Для кнопки обновите следующее:

• Использовать собственные стили для кнопки: ДА
• Цвет текста кнопки: # ff9945
• Цвет фона градиента кнопки слева: # ff9945
• Правый градиент фона кнопки: #ffffff
• Направление градиента: 90 градусов
• Конечная позиция: 34%
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: IBM Plex Sans
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопки: TT
• Отступ кнопок: 15 пикселей сверху, 15 пикселей снизу.

Обивка

И в качестве последнего штриха добавьте следующий отступ:

• Заполнение: 5% слева, 5% справа

Конечный результат

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

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

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

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

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

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