Когда вы оптимизируете способ создания сообщений в блоге на своем Веб-сайт, скорее всего, вы захотите включить привлекательный призыв к действию где-нибудь в своей статье. Теперь, благодаря новой интеграции блока макета Gutenberg от Divi, вы можете легко добавить новый блок, созданный Divi, в любое место в своем сообщении в блоге Gutenberg. Это позволяет вам сохранить содержание общий пост в блоге в среде Gutenberg, продолжая при этом создавать собственный CTA Divi, используя встроенные параметры Divi. Лучшее из обоих миров! В этом уроке мы покажем вам, как добавить встроенный анимированный блок макета Divi CTA в ваше сообщение Gutenberg. Мы также бесплатно поделимся JSON-файлом блока макета Divi CTA!

Пойдем.

Возможный результат

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

Анимационная презентация Divi

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

Скачать макет в библиотеке Divi

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

Divi импорт

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

Импортировать json divi 1

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

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

Добавить макет divi

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

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

Загрузите макет divi
Выберите макет анимированного раздела divi

Приступим к воссозданию!

Используйте шаблон публикации для третьего пакета тем

Используйте третий сборщик тем

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

Пакет WordPress для темы Divi

Перейти к Divi Theme Builder

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

Divi меню конструктора тем

Скачать шаблон публикации

Загрузите шаблон сообщения Theme Builder Pack, щелкнув значок в правом верхнем углу.

Переносимость модуля Divi

Затем выберите шаблон сообщения и нажмите «Импортировать шаблоны Divi Theme Builder». Не забудьте также сохранить изменения в построителе тем. На данный момент мы назначили шаблон сообщения в блоге из пакета создания тем для всех наших сообщений.

Скриншот wordpress.go 2020.02.05 14 58 38

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

Следующим шагом будет добавление блока макета Divi CTA в наш пост Гутенберга. Для этого откройте существующую статью или создайте новую.

Создание публикации на гутенберге

Добавить новый блок Divi онлайн

Оказавшись внутри сообщения, вы можете добавить новый блок макета Divi.

Добавить макет divi

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

Тогда у вас будет два варианта. Выберите вариант «Создать новый макет».

Создайте новый макет divi

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

расстояние

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

  • Верхнее поле: 50px
  • Нижнее поле: 50px
  • Левое поле: -10%
  • Правое поле: -10%
Настроить интервал между разделами на divi

Добавить строку № 1

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

Продолжите добавлять новую строку, используя следующую структуру столбцов:

Выберите столбец divi

калибровка

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

  • Ширина: 100%
  • Максимальная ширина: 100%
Настроить размер линии divi

Добавить разделитель № 1 в столбец

видимость

Пора добавлять модули, начиная с модуля разделения. Убедитесь, что опция «Показать разделитель» включена.

  • Показать разделитель: Да
Показать разделитель divi

Линия

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

  • Цвет линии: # fc526e
  • Стиль линии: сплошная
  • Положение линии: высокая
Настроить стиль разделителя divi

калибровка

Также измените параметры размеров.

  • Вес делителя: 3px
  • Ширина: 30%
  • Выравнивание модуля: справа
  • Высота: 3px
Настроить разделитель divi

Анимация

И соответственно измените настройки анимации:

  • Стиль анимации: слайд
  • Направление анимации: влево
  • Продолжительность анимации: 2000 мс
  • Задержка анимации: 500 мс
  • Интенсивность анимации: 100%
  • Непрозрачность начала анимации: 0%
Запуск модуля разделителя аниматин divi

Добавить делитель № 2 в столбец

видимость

Переходим к следующему модулю разделения. Опять же, убедитесь, что опция «Показать разделитель» включена.

  • Показать разделитель: Да
Добавить новый разделитель divi

Линия

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

  • Цвет линии: # e1e3e8
  • Стиль линии: сплошная
  • Положение линии: высокая
Добавить новую строку divi

калибровка

Затем измените параметры размеров модуля.

  • Вес делителя: 3px
  • Высота: 3px
Вес разделителя-разделителя

расстояние

Также добавьте собственные значения интервала.

  • Левое поле: 10%
  • Правое поле: -20%
Настроить расстояние между модулями разделителя divi

Анимация

И завершите параметры модуля, изменив параметры анимации следующим образом:

  • Стиль анимации: слайд
  • Направление анимации: влево
  • Продолжительность анимации: 2000 мс
  • Задержка анимации: 500 мс
  • Интенсивность анимации: 100%
  • Непрозрачность начала анимации: 100%
Настроить разделитель анимации 2

Вы можете добавить столько разделителей, сколько хотите настроить анимацию.

Добавить строку № 2

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

Добавьте еще одну строку в раздел, используя следующую структуру столбцов:

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

калибровка

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

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 1
  • Ширина: 70%
  • Выравнивание линии: центр
Настройка размера линии 2

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

Добавить контент H2

Затем добавьте первый текстовый модуль в столбец строки с помощью содержание H2 на ваш выбор.

Добавить текст в столбец divi

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

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

  • Цвет текста элемента 2: # fc526e
  • Заголовок 2 Размер текста: 28 пикселей
Раздел текста Divi

расстояние

Затем добавьте пользовательские значения заполнения.

  • Верхняя обивка: 50px
  • Нижняя обивка: 50px
  • Левый отступ: 50px
Настроить текстовый раздел divi

Граница

Мы также используем левую границу.

  • Ширина левой границы: 2 пикселя
  • Цвет левой границы: # fc526e
Используйте границу divi

Анимация

И заполните параметры модуля, добавив персонализированную анимацию.

  • Стиль анимации: флип
  • Направление анимации: Центр
  • Задержка анимации: 1500 мс
Текстовый параметр модуля Divi

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

Добавить контент

Добавьте еще один текстовый модуль чуть ниже предыдущего с помощью содержание де Votre Choix.

Добавить новый текст модуля divi

расстояние

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

  • Верхняя обивка: 50px
  • Нижняя обивка: 50px
  • Правый отступ: 50 пикселей
Настройка заполнения текстового модуля divi

граница

Затем добавьте верхнюю и правую границу.

  • Верхняя и правая границы: 2 пикселя
  • Цвет верхней и правой границы: # fc526e
Конфигурация границы текстового модуля Divi

Анимация

И завершите параметры модуля, изменив параметры анимации следующим образом:

  • Стиль анимации: флип
  • Направление анимации: Центр
  • Задержка анимации: 1700 мс
Настроить анимацию текстового модуля divi

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

Добавить копию

Следующий и последний модуль, который нам нужен в этой строке, - это кнопочный модуль. Добавьте копию по вашему выбору.

Добавить кнопку divi

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

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

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 13px
  • Цвет текста кнопки: #ffffff
  • Цветовой градиент 1: # ff5b84
  • Цветовой градиент 2: # f94857
  • Тип градиента: линейный
  • Направление градиента: 165 градусов
  • Ширина границы кнопки: 0 пикселей
Конфигурация кнопки градиента divi
  • Радиус границы кнопки: 0 пикселей
  • Интервал между кнопками: 1px
  • Шрифт кнопки: Montserrat
  • Вес шрифта кнопки: полужирный
  • Стиль шрифта кнопки: заглавные
Настроить стиль кнопки divi

расстояние

Затем добавьте пользовательский верхний и нижний отступы.

  • Верхняя обивка: 16px
  • Нижняя обивка: 16px
Настройка расстояния между модулями кнопок divi

Анимация

И завершите параметры модуля, добавив следующую анимацию:

  • Стиль анимации: флип
  • Задержка анимации: 1900 мс
Блок макета Divi CTA

Клонируйте линию № 1 и поместите ее внизу раздела

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

Столбец, ряд 1, разделительный модуль

Изменить порядок разделителей

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

изменить порядок дел

Заключительные мысли

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