Блок Divi Layout открывает множество удобных способов интеграции мощных функций дизайна Divi Builder с редактором блоков WordPress по умолчанию (Gutenberg). Это позволяет вам писать большую часть содержание вашего поста в блоге, используя знакомый блочный интерфейс Gutenberg, а затем добавляйте макеты Divi там, где необходим индивидуальный дизайн или функциональность. Блок макета Divi может включать в себя все, что вы можете создать в Divi Builder, но он также отлично подходит для включения чего-то столь же простого и важного, как форма подписки.
В этом уроке мы увидим, как добавить форма подписка на сообщение в блоге Gutenberg с использованием блока макета Divi.
Возможный результат
Импорт блока макета JSON
Скачать макет в библиотеке Divi
Чтобы импортировать файл JSON, который вы смогли загрузить выше, перейдите в свою библиотеку Divi на бэкэнде панели инструментов WordPress и нажмите «Импорт и экспорт».
Затем выберите файл JSON в папке загрузки и нажмите «Импортировать макеты Divi Builder».
Добавьте новый блок Divi внутри сообщения Gutenberg
После импорта макета вы можете получить доступ к сообщению Гутенберга и добавить новый блок макета Divi.
Импорт файла JSON из сохраненных презентаций
Затем нажмите «Загрузить из библиотеки», перейдите в «Сохраненные макеты» и выберите макет, чтобы импортировать блок макета Divi CTA в свой блог. Это оно !
И это все!
Перейдем к руководству, хорошо?
Добавьте модуль электронной почты Optin в свой пост в блоге Гутенберга
Создать или редактировать запись в блоге
Для начала нам нужно создать новую запись в блоге или отредактировать существующую. Для этого примера добавим содержание замените заголовок и тело статьи, используя несколько блоков заголовков и абзацев. Затем добавьте избранное изображение и выберите «Без боковой панели» для макета в настройках страницы Divi.
Добавить блок макета Divi онлайн
После того, как вы создали большую часть публикации, все, что нам нужно сделать, это добавить новый блок макета Divi в любом месте области публикации. содержание публикации. Мы могли бы добавить его где-нибудь ближе к концу сообщения, чтобы привлечь квалифицированного потенциального клиента, который явно заинтересован в содержании сообщения.
Чтобы добавить его, наведите указатель мыши на область, куда вы хотите добавить опцию электронной почты, затем щелкните синий значок плюса, чтобы добавить новый блок. В списке контекстных блоков выберите блок Divi Layout.
Создайте новый макет в блоке Divi.
После выбора блока макета Divi у нас будет возможность «Создать новый макет» или «Загрузить из библиотеки». Поскольку нам нужно создать опцию электронной почты с нуля, выберите опцию «Создать новый макет».
Дизайн раздела
В редакторе макета мы можем приступить к созданию электронного письма, которое будет включено в нашу публикацию. Все, что мы создаем в этом редакторе, будет отображаться в области Divi Layout Block сообщения.
Для начала откройте раздел настроек по умолчанию, раздел там уже есть.
Для макета мы выберем макет с двумя столбцами.
Затем мы добавим модуль Email Optin в одну из колонок, выбор колонки оставляю вам.
Далее мы настроим фон раздела. Вы всегда можете изменить значения, чтобы сделать свой дизайн уникальным. Однако мы использовали следующие значения:
- Фон: # ff6100
- Верхний и нижний разделитель: 13-й отсчет сверху.
- Ширина разделительного элемента: 40 пикселей (сверху и снизу).
Теперь мы добавим текст в противоположный столбец. Здесь вы будете использовать поощрительный текст, чтобы посетитель Подписаться.
Затем вам нужно будет сделать различные модификации:
- Текст шрифта: Монтсеррат
- Цвет шрифта: #FFF
- Подзаголовок шрифта текста H2: Монтсеррат
- Текст Субтитры H2 Размер: 2.5em
- Подзаголовок текста H2 Цвет: #FFF
Не забудьте настроить систему электронной почты, которую вы будете использовать. Вы должны знать, что Гутенберг совместим с MailChimp.
Заключительные мысли
Добавление электронного письма с подпиской к вашему сообщению Гутенберга стало невероятно простым с блоком макета Divi. Вы можете не только добавить полнофункциональный (и простой в использовании) вариант электронной почты за секунды, но и использовать Divi Builder для добавления индивидуального дизайна, эффектов наведения и анимации. И все это без использования плагинов!
