Как добавить встроенный и анимированный блок макета Divi CTA в сообщение в блоге Gutenberg

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

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

Загрузите встроенный и анимированный блок макета Divi CTA БЕСПЛАТНО

Чтобы получить доступ к бесплатным разделам о героях, вам сначала нужно загрузить их, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки 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. Перейдите к публикации и загрузите файлы JSON этого пакета для создания тем.

Перейти в конструктор тем Divi

После того, как вы скачали третий пакет построителей тем, вы можете перейти к Divi Theme Builder.

Загрузить шаблон сообщения

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

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

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

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

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

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

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

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

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

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 50 пикселей
• Левая маржа: -10%
• Правая маржа: -10%

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и увеличьте ширину и максимальную ширину.

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

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

Видимость

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

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

Линия

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

• Цвет линии: # fc526e
• Стиль линии: сплошной
• Позиция линии: вверху

Размеры

Измените также настройки размера.

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

Анимация

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

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

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

Видимость

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

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

Линия

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

• Цвет линии: # e1e3e8
• Стиль линии: сплошной
• Позиция линии: вверху

Размеры

Затем измените настройки размера модуля.

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

Интервал

Также добавьте несколько значений пользовательского интервала.

• Левая маржа: 10%
• Правая маржа: -20%

Анимация

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

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

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

Видимость

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

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

Линия

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

• Цвет линии: # fc526e
• Стиль линии: сплошной
• Позиция линии: вверху

Размеры

Измените также размер модуля.

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

Интервал

Вместе с настройками интервалов.

• Нижнее поле: 100 пикселей
• Левая маржа: -20%
• Правая маржа: 10%

Анимация

И завершите настройку модуля, изменив настройки анимации.

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

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

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

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

Размеры

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

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

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

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

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

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

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

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

Интервал

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

• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей
• Отступ слева: 50 пикселей

Граница

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

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

Анимация

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

• Стиль анимации: флип
• Направление анимации: центр
• Задержка анимации: 1500 мс

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

Добавить содержимое

Добавьте еще один текстовый модуль прямо под предыдущим с некоторым содержимым по вашему выбору.

Интервал

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

• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей
• Отступ справа: 50 пикселей

Граница

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

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

Анимация

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

• Стиль анимации: флип
• Направление анимации: центр
• Задержка анимации: 1700 мс

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

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

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

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

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

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

• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 1 пиксель
• Шрифт кнопки: Montserrat
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхний отступ: 16 пикселей
• Нижний отступ: 16 пикселей

Анимация

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

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

Клонировать строку №1 и разместить внизу секции

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

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

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

Изменить интервал разделителя №1

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

• Верхнее поле: 100 пикселей
• Левая маржа: 10%
• Правая маржа: -20%

Изменить интервал разделителя №2

Измените также настройки интервала второго модуля разделителя.

• Левая маржа: -20%
• Правая маржа: 10%

Изменить размер разделителя №3

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

• Выравнивание модуля: слева

Удалить задержку анимации разделителя # 3

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

• Задержка анимации: 0 мс

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

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

Рабочий стол

Мобильный

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

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

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