Когда вы оптимизируете способ создания сообщений в блоге на своем Веб-сайт, скорее всего, вы захотите включить привлекательный призыв к действию где-нибудь в своей статье. Теперь, благодаря новой интеграции блока макета Gutenberg от Divi, вы можете легко добавить новый блок, созданный Divi, в любое место в своем сообщении в блоге Gutenberg. Это позволяет вам сохранить содержание общий пост в блоге в среде Gutenberg, продолжая при этом создавать собственный CTA Divi, используя встроенные параметры Divi. Лучшее из обоих миров! В этом уроке мы покажем вам, как добавить встроенный анимированный блок макета Divi CTA в ваше сообщение Gutenberg. Мы также бесплатно поделимся JSON-файлом блока макета Divi CTA!
Пойдем.
Возможный результат
Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.
Импорт блока макета JSON
Скачать макет в библиотеке Divi
Чтобы импортировать файл JSON, который вы смогли загрузить выше, перейдите в свою библиотеку Divi на бэкэнде панели инструментов WordPress и нажмите «Импорт и экспорт».
Затем выберите файл JSON в папке загрузки и нажмите «Импортировать макеты Divi Builder».
Добавьте новый блок Divi внутри Gutenberg
После импорта макета вы можете получить доступ к сообщению Гутенберга и добавить новый блок макета Divi.
Импорт файла JSON из сохраненных презентаций
Затем нажмите «Загрузить из библиотеки», перейдите в «Сохраненные макеты» и выберите макет, чтобы импортировать блок макета Divi CTA в свой блог. Это оно!
Приступим к воссозданию!
Используйте шаблон публикации для третьего пакета тем
Используйте третий сборщик тем
Пора начинать творить с нуля! Прежде всего, дизайн, который мы воссоздаем, соответствует третьему пакету создания тем, который был опубликован в блоге Divi. Перейти к статье и загрузите файлы JSON для этого пакета создания темы.
Перейти к Divi Theme Builder
После того, как вы загрузили третий пакет создания тем, вы можете получить доступ к Divi Theme Builder.
Скачать шаблон публикации
Загрузите шаблон сообщения Theme Builder Pack, щелкнув значок в правом верхнем углу.
Затем выберите шаблон сообщения и нажмите «Импортировать шаблоны Divi Theme Builder». Не забудьте также сохранить изменения в построителе тем. На данный момент мы назначили шаблон сообщения в блоге из пакета создания тем для всех наших сообщений.
Откройте существующую публикацию Гутенберга или создайте новую
Следующим шагом будет добавление блока макета Divi CTA в наш пост Гутенберга. Для этого откройте существующую статью или создайте новую.
Добавить новый блок Divi онлайн
Оказавшись внутри сообщения, вы можете добавить новый блок макета Divi.
Создайте новый макет внутри блока Divi
Тогда у вас будет два варианта. Выберите вариант «Создать новый макет».
Настройки раздела
расстояние
Оказавшись внутри редактора блоков макета Divi, вы заметите раздел. Откройте этот раздел и добавьте настраиваемые значения полей, чтобы освободить пространство вокруг контейнера раздела.
- Верхнее поле: 50px
- Нижнее поле: 50px
- Левое поле: -10%
- Правое поле: -10%
Добавить строку № 1
Структура столбца
Продолжите добавлять новую строку, используя следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии и увеличьте ширину и максимальную ширину.
- Ширина: 100%
- Максимальная ширина: 100%
Добавить разделитель № 1 в столбец
видимость
Пора добавлять модули, начиная с модуля разделения. Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: Да
Линия
Перейдите на вкладку дизайна модуля и измените настройки строки следующим образом:
- Цвет линии: # fc526e
- Стиль линии: сплошная
- Положение линии: высокая
калибровка
Также измените параметры размеров.
- Вес делителя: 3px
- Ширина: 30%
- Выравнивание модуля: справа
- Высота: 3px
Анимация
И соответственно измените настройки анимации:
- Стиль анимации: слайд
- Направление анимации: влево
- Продолжительность анимации: 2000 мс
- Задержка анимации: 500 мс
- Интенсивность анимации: 100%
- Непрозрачность начала анимации: 0%
Добавить делитель № 2 в столбец
видимость
Переходим к следующему модулю разделения. Опять же, убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: Да
Линия
Затем перейдите на вкладку дизайна модуля и измените настройки строки следующим образом:
- Цвет линии: # e1e3e8
- Стиль линии: сплошная
- Положение линии: высокая
калибровка
Затем измените параметры размеров модуля.
- Вес делителя: 3px
- Высота: 3px
расстояние
Также добавьте собственные значения интервала.
- Левое поле: 10%
- Правое поле: -20%
Анимация
И завершите параметры модуля, изменив параметры анимации следующим образом:
- Стиль анимации: слайд
- Направление анимации: влево
- Продолжительность анимации: 2000 мс
- Задержка анимации: 500 мс
- Интенсивность анимации: 100%
- Непрозрачность начала анимации: 100%
Вы можете добавить столько разделителей, сколько хотите настроить анимацию.
Добавить строку № 2
Структура столбца
Добавьте еще одну строку в раздел, используя следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии и измените параметры размеров следующим образом:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Ширина: 70%
- Выравнивание линии: центр
Добавить текстовый модуль № 1 в столбец
Добавить контент H2
Затем добавьте первый текстовый модуль в столбец строки с помощью содержание H2 на ваш выбор.
Настройки текста H2
Перейдите на вкладку дизайна и соответствующим образом измените настройки текста H2:
- Цвет текста элемента 2: # fc526e
- Заголовок 2 Размер текста: 28 пикселей
расстояние
Затем добавьте пользовательские значения заполнения.
- Верхняя обивка: 50px
- Нижняя обивка: 50px
- Левый отступ: 50px
Граница
Мы также используем левую границу.
- Ширина левой границы: 2 пикселя
- Цвет левой границы: # fc526e
Анимация
И заполните параметры модуля, добавив персонализированную анимацию.
- Стиль анимации: флип
- Направление анимации: Центр
- Задержка анимации: 1500 мс
Добавить текстовый модуль # 2 в столбец
Добавить контент
Добавьте еще один текстовый модуль чуть ниже предыдущего с помощью содержание де Votre Choix.
расстояние
Перейдите на вкладку дизайна модуля и соответствующим образом измените значения отступов:
- Верхняя обивка: 50px
- Нижняя обивка: 50px
- Правый отступ: 50 пикселей
граница
Затем добавьте верхнюю и правую границу.
- Верхняя и правая границы: 2 пикселя
- Цвет верхней и правой границы: # fc526e
Анимация
И завершите параметры модуля, изменив параметры анимации следующим образом:
- Стиль анимации: флип
- Направление анимации: Центр
- Задержка анимации: 1700 мс
Добавить кнопочный модуль в столбец
Добавить копию
Следующий и последний модуль, который нам нужен в этой строке, - это кнопочный модуль. Добавьте копию по вашему выбору.
Настройки кнопок
Перейдите на вкладку дизайна модуля и измените настройки кнопки следующим образом:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 13px
- Цвет текста кнопки: #ffffff
- Цветовой градиент 1: # ff5b84
- Цветовой градиент 2: # f94857
- Тип градиента: линейный
- Направление градиента: 165 градусов
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 0 пикселей
- Интервал между кнопками: 1px
- Шрифт кнопки: Montserrat
- Вес шрифта кнопки: полужирный
- Стиль шрифта кнопки: заглавные
расстояние
Затем добавьте пользовательский верхний и нижний отступы.
- Верхняя обивка: 16px
- Нижняя обивка: 16px
Анимация
И завершите параметры модуля, добавив следующую анимацию:
- Стиль анимации: флип
- Задержка анимации: 1900 мс
Клонируйте линию № 1 и поместите ее внизу раздела
После того, как вы закончили первую и вторую строки, вы можете клонировать первую строку и поместить дубликат внизу раздела.
Изменить порядок разделителей
Поменяйте местами первый и последний разделительные модули.
Заключительные мысли
В этой статье мы показали вам, как воспользоваться преимуществами новой интеграции Divi с Gutenberg и добавить встроенный анимированный блок Divi CTA в свой пост в блоге Gutenberg. Это отличный способ выделить выбранный вами призыв к действию во время посетителей прочитайте содержание вашего сообщения в блоге.