Как включить блок макета Divi сводной коробки в ваш пост Гутенберга

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО The Summary Box Divi Layout Block

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

Начнем воссоздавать!

Использовать шаблон сообщения из пакета Sixth Theme Builder Pack

Скачать Sixth Theme Builder Pack

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

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

Затем перейдите в конструктор тем Divi.

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

Щелкните значок в правом верхнем углу и загрузите шаблон сообщения из пакета конструктора тем. Не забудьте потом изменить все изменения в построителе тем.

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

Теперь, когда вы добавили соответствующий шаблон сообщения, пришло время создать сводное поле. Откройте или создайте новый пост с помощью Гутенберга.

Добавить заголовок сводки H2

Ближе к концу сообщения в блоге мы добавим новый заголовок H2.

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

Затем мы добавим новый блок макета Divi.

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

После того, как вы добавили блок, у вас будет два варианта. Выберите создание нового макета.

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

Фоновый цвет

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

• Цвет фона: #FFFFFF

Интервал

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

• Верхнее поле: 100 пикселей
• Левое поле: -10% (компьютер), 0% (планшет и телефон)
• Правая маржа: -10% (компьютер), 0% (планшет и телефон)
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Граница

Также добавьте немного радиуса границы.

• Внизу слева: 16 пикселей
• Внизу справа: 16 пикселей

Коробка Тень

Наряду с тонкой тенью коробки.

• Сила размытия тени коробки: 60 пикселей
• Сила распространения тени коробки: 10 пикселей
• Цвет тени: rgba (0,0,0,0.08)

Добавить новую строку

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

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

Размеры

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

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

Интервал

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

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

Столбец 1 Настройки

Фоновый цвет

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

• Цвет фона: #FFFFFF

Интервал

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

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

Коробка Тень

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

• Сила размытия тени коробки: 50 пикселей
• Цвет тени по умолчанию: rgba (0,0,0,0)
• Цвет тени при наведении: rgba (0,0,0,0.15)

Масштаб преобразования при наведении

При наведении мы также немного хотим масштабировать столбец.

• Правильно: 105%
• Внизу: 105%

Индекс наведения Z

Завершите настройки столбца, добавив z-индекс при наведении курсора.

• Индекс наведения Z: 11

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

Добавить номер в поле содержимого

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

Градиентный фон

Затем добавьте градиентный фон.

• Цвет 1: # ff5e92
• Цвет 2: # ffd4b6
• Направление градиента: 165 градусов

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

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

• Шрифт текста: Поппинс
• Цвет текста: #ffffff
• Размер текста: 26 пикселей
• Выравнивание текста: по центру

Размеры

Затем назначьте ширину и высоту.

• Ширина: 150 пикселей
• Высота: 150 пикселей

Граница

Также добавьте немного радиуса границы.

• Внизу слева, вверху справа и внизу справа: 100 пикселей

Основной элемент CSS

Чтобы центрировать текст в нашем контейнере, нам нужно добавить несколько строк кода CSS к основному элементу модуля на расширенной вкладке.

display: flex;
align-items: center;
justify-content: center;

Позиция

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

• Позиция: Абсолютная
• Расположение: вверху слева

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

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

Переходим к следующему текстовому модулю. Добавьте контент H3 по вашему выбору.

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

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

• Размер текста заголовка 3: 23 пикселя.

Интервал

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

• Верхнее поле: 100 пикселей
• Нижнее поле: 20 пикселей

Добавить модуль разделителя в столбец

Видимость

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

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

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

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

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

Размеры

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

• Вес разделителя: 2 пикселя
• Ширина: 20%

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

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

Переходим к следующему и последнему текстовому модулю. Добавьте контент по вашему выбору.

Клонировать столбец

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

Изменить цвет тени окна по умолчанию

Откройте настройки столбца 2 и измените цвет тени по умолчанию.

• Цвет тени: rgba (0,0,0,0.06)

Изменить текстовый модуль №1 с градиентом фона

Откройте первый текстовый модуль в следующем столбце 2 и измените градиентный фон.

• Цвет 1: # 7e5ce6
• Цвет 2: # 25b8ee

Изменить рамку текстового модуля №1

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

• Вверху слева, внизу слева и внизу справа: 100 пикселей

Изменить позицию текстового модуля №1

И переместите модуль в расширенную вкладку.

• Loaction: вверху справа

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

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

• Цвет линии: # 7e5ce6

Изменить все содержимое

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

Клонировать весь раздел дважды

Завершив весь первый раздел, вы можете дважды клонировать его.

Изменить интервал первого повторяющегося раздела

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

• Левое поле: -5% (компьютер), 0% (планшет и телефон)
• Правая маржа: -5% (компьютер), 0% (планшет и телефон)

Изменить интервал второго повторяющегося раздела

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

• Нижнее поле: 100 пикселей

Изменить все содержимое

И последнее, но не менее важное: измените все содержимое модуля.

Сохраните макет в библиотеке Divi для повторного использования

Если вы планируете использовать это сводное поле в других сообщениях блога, убедитесь, что вы сохранили его в своей библиотеке Divi, чтобы вы могли легко получить к нему доступ! Вот и все!

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

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

Рабочий стол

Мобильный

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

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

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