Создание ценных сообщений в блоге требует времени и усилий. Наряду с поиском лучших тем для написания в вашей нише, также важно поддерживать заинтересованность читателей и позволять им быстро находить информацию, которую они ищут. 

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

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

Давайте начнем воссоздание!

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

Скачать пакет шестой тематической сборки

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

Загрузите пакет divi

Перейти к Divi Theme Builder

Затем перейдите к Divi Theme Builder.

Доступ к теме построителя

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

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

Скачать модель публикации

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

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

Создать публикацию divi

Добавить резюме заголовка H2

В конце поста в блоге мы добавим новый заголовок H2.

Добавить заголовок текстового модуля Gutenberg

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

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

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

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

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

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

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

Фоновый цвет

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

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

расстояние

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

  • Верхнее поле: 100px
  • Оставленное поле: -10% (офис), 0% (планшет и телефон)
  • Правая граница: -10% (офис), 0% (планшет и телефон)
  • Верхняя обивка: 0px
  • Нижняя обивка: 0px
Конфигурация Divi Spacing

Граница

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

  • Внизу слева: 16 пикселей
  • Внизу справа: 16 пикселей
Конфигурация границы модуля Divi

Shadow box

С тонкой тенью коробки.

  • Box Shadow Blur Сила: 60px
  • Сила распространения тени коробки: 10 пикселей
  • Цвет тени: rgba (0,0,0,0,08)
Конфигурация Shadow Box Divi

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

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

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

Выбор макета divi

калибровка

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

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

расстояние

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

  • Верхняя обивка: 0px
  • Нижняя обивка: 0px
Регулировка межстрочного интервала Divi

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

Фоновый цвет

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

  • Цвет фона: #FFFFFF
Регулировка столбца Divi

расстояние

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

  • Верхняя обивка: 70px
  • Нижняя обивка: 70px
  • Левая обивка: 70 px
  • Правый отступ: 70 пикселей
Настройки расстояния между столбцами Divi

Shadow box

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

  • Box Shadow Blur Сила: 50px
  • Цвет тени по умолчанию: rgba (0,0,0,0)
  • Цвет тени при наведении: rgba (0,0,0,0,15)
Настройки фона столбца Divi

Шкала преобразования при наведении

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

  • Справа: 105%
  • Низкий: 105%
Настройка столбца Divi

Индекс Hover Z

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

  • Индекс при наведении курсора Z: 11
Положение столбца Divi

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

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

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

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

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

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

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

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

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

  • Шрифт текста: Poppins
  • Цвет текста: #ffffff
  • Размер текста: 26px
  • Выравнивание текста: центр
Конфигурация шрифта Divi 1

калибровка

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

  • Ширина: 150 пикселей
  • Высота: 150px
Конфигурация интервала текстового модуля на divi

Граница

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

  • Внизу слева, сверху справа и снизу справа: 100 пикселей
Конфигурация границы текстового модуля 1

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

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

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

Настройка кода модуля css text divi

Позиция

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

  • Позиция: абсолютная
  • Расположение: вверху слева
Конфигурация положения текстового модуля Divi

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

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

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

Добавить содержимое текстового модуля

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

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

  • Заголовок 3 Размер текста: 23px
Параметр текстового модуля Divi

расстояние

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

  • Верхнее поле: 100px
  • Нижнее поле: 20px
Модульная конфигурация интервалов divi

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

видимость

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

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

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

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

  • Цвет линии: # ff5e92
  • Стиль линии: сплошная
  • Положение линии: высокая
Настройка линии Divi

калибровка

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

  • Вес делителя: 2px
  • Ширина: 20%
Размер диви

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

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

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

Текстовый столбец 3 дел.

Колонка клонирования

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

Столбец столбец divi

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

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

  • Цвет тени: rgba (0,0,0,0,06)
Измените цвет тени divi

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

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

  • Цвет 1: # 7e5ce6
  • Цвет 2: # 25b8ee
Измените фон градиента divi

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

Также измените настройки границы модуля.

  • Слева вверху, слева внизу и справа внизу: 100 пикселей
Измените границу текстового модуля divi

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

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

  • Расположение: вверху справа
Изменить положение текста divi

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

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

  • Цвет линии: # 7e5ce6
Изменить цвет разделителя divi

Изменить весь контент

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

Изменить содержимое текстового модуля divi

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

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

Клонируйте столбцы столько раз, сколько необходимо

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

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

  • Оставленное поле: -5% (настольный компьютер), 0% (планшет и телефон)
  • Правая граница: -5% (офис), 0% (планшет и телефон)
Настроить интервал между строками divi

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

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

  • Нижнее поле: 100px
Настройте верхнее поле divi

Изменить весь контент

Наконец, измените весь контент модуля.

Редактировать все содержимое divi

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

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

Сохраните в библиотеке divi

обследование

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

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

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

В этой статье мы показали вам, как добавить поле сводки к вашему сообщению Gutenberg с новыми блоками макета Divi. Сводные блоки — отличный визуальный способ помочь посетителей найти информацию, которую они ищут. 

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