Создание ценных сообщений в блоге требует времени и усилий. Наряду с поиском лучших тем для написания в вашей нише, также важно поддерживать заинтересованность читателей и позволять им быстро находить информацию, которую они ищут.
Теперь отличный способ приблизиться к этому типу пользовательского опыта - это поделиться визуальным сводным окном в конце вашего сообщения в блоге, прямо перед последними мыслями.
С новыми блоками макета Divi теперь вы можете легко создать сводное окно со встроенными параметрами Divi. В этом руководстве мы проведем вас через этот процесс, и вы также сможете бесплатно загрузить файл макета в формате JSON!
Давайте начнем воссоздание!
Используйте шаблон публикации для шестого пакета тем
Скачать пакет шестой тематической сборки
Окно сводки, которое мы воссоздадим в этом уроке, идеально соответствует шаблону сообщения Sixth Theme Builder Pack. бесплатно. Доступ кстатья в блоге и скачайте весь пакет.
Перейти к Divi Theme Builder
Затем перейдите к Divi Theme Builder.
Скачать шаблон публикации
Щелкните значок в правом верхнем углу и загрузите шаблон сообщения из пакета Theme Building Pack. Не забудьте после этого отредактировать любые изменения в построителе тем.
Откройте существующую публикацию Гутенберга или создайте новую
Теперь, когда вы добавили соответствующий шаблон сообщения, пришло время создать сводное поле. Откройте или создайте новый пост с помощью Гутенберга.
Добавить резюме заголовка H2
В конце поста в блоге мы добавим новый заголовок H2.
Добавить новый блок Divi онлайн
Далее мы добавим новый блок макета Divi.
Создайте новый макет внутри блока Divi
После того, как вы добавили блок, у вас будет два варианта. Выберите создание нового макета.
Настройки раздела
Фоновый цвет
Внутри редактора блоков макета Divi вы заметите раздел. Откройте этот раздел и используйте для него белый фон.
- Цвет фона: #FFFFFF
расстояние
Перейдите на вкладку дизайна раздела и добавьте настраиваемые значения полей и отступов.
- Верхнее поле: 100px
- Оставленное поле: -10% (офис), 0% (планшет и телефон)
- Правая граница: -10% (офис), 0% (планшет и телефон)
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Граница
Также добавьте радиус границы.
- Внизу слева: 16 пикселей
- Внизу справа: 16 пикселей
Shadow box
С тонкой тенью коробки.
- Box Shadow Blur Сила: 60px
- Сила распространения тени коробки: 10 пикселей
- Цвет тени: rgba (0,0,0,0,08)
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Еще не добавляя модуль, откройте настройки строки и позвольте строке занять всю ширину контейнера раздела.
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Выровнять высоту столбца: Да
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем удалите верхний и нижний отступы по умолчанию из строки.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Настройки столбца 1
Фоновый цвет
Затем откройте настройки в столбце 1 и используйте для этого белый цвет фона.
- Цвет фона: #FFFFFF
расстояние
Также добавьте пользовательские значения заполнения.
- Верхняя обивка: 70px
- Нижняя обивка: 70px
- Левая обивка: 70 px
- Правый отступ: 70 пикселей
Shadow box
Продолжите, добавив тонкую тень блока с другим цветом по умолчанию и цветом тени при наведении.
- Box Shadow Blur Сила: 50px
- Цвет тени по умолчанию: rgba (0,0,0,0)
- Цвет тени при наведении: rgba (0,0,0,0,15)
Шкала преобразования при наведении
При наведении мы также хотим немного масштабировать столбец.
- Справа: 105%
- Низкий: 105%
Индекс Hover Z
Заполните параметры столбца, добавив индекс при наведении курсора z.
- Индекс при наведении курсора Z: 11
Добавить текстовый модуль # 1 в столбец
Добавить номер в область содержимого
Пришло время добавлять модули, начиная с первого текстового модуля. Добавьте номер в поле содержание.
Градиентный фон
Затем добавьте градиентный фон.
- Цвет 1: # ff5e92
- Цвет 2: # ffd4b6
- Направление градиента: 165 градусов
Настройки текста
Перейдите на вкладку дизайна модуля и измените настройки текста следующим образом:
- Шрифт текста: Poppins
- Цвет текста: #ffffff
- Размер текста: 26px
- Выравнивание текста: центр
калибровка
Затем назначьте ширину и высоту.
- Ширина: 150 пикселей
- Высота: 150px
Граница
Также добавьте радиус границы.
- Внизу слева, сверху справа и снизу справа: 100 пикселей
CSS основной элемент
Чтобы центрировать текст в нашем контейнере, нам нужно будет добавить несколько строк кода CSS в основной элемент модуля на расширенной вкладке.
display: flex;align-items: center;justify-content: center;
Позиция
И мы закончим параметры модуля, переместив модуль.
- Позиция: абсолютная
- Расположение: вверху слева
Добавить текстовый модуль # 2 в столбец
Добавить контент H3
Перейдем к следующему текстовому модулю. Добавь немного содержание H3 на ваш выбор.
Настройки текста H3
Затем измените размер текста H3 модуля.
- Заголовок 3 Размер текста: 23px
расстояние
Также измените настройки интервала.
- Верхнее поле: 100px
- Нижнее поле: 20px
Добавьте модуль разделения в столбец
видимость
Следующий необходимый нам модуль - это модуль разделения. Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: Да
Настройки линии
Перейдите на вкладку дизайна модуля и измените настройки строки следующим образом:
- Цвет линии: # ff5e92
- Стиль линии: сплошная
- Положение линии: высокая
калибровка
Также измените размеры модуля.
- Вес делителя: 2px
- Ширина: 20%
Добавить текстовый модуль # 3 в столбец
Добавить контент
Перейдем к следующему и последнему текстовому модулю. Добавь немного содержание де Votre Choix.
Колонка клонирования
После того, как вы завершили столбец и все его модули, вы можете клонировать весь столбец.
Изменить цвет тени поля по умолчанию
Откройте настройки в столбце 2 и измените цвет тени по умолчанию.
- Цвет тени: rgba (0,0,0,0,06)
Изменить градиентный фон текстового модуля № 1
Откройте первый текстовый модуль в следующих 2 столбцах и измените градиентный фон.
- Цвет 1: # 7e5ce6
- Цвет 2: # 25b8ee
Изменить границу текстового модуля № 1
Также измените настройки границы модуля.
- Слева вверху, слева внизу и справа внизу: 100 пикселей
Изменить положение текстового модуля № 1
И переместите модуль в расширенную вкладку.
- Расположение: вверху справа
Изменить цвет разделителя
Продолжите, открыв настройки модуля разделения. Измените цвет линии, чтобы он соответствовал новой цветовой схеме.
- Цвет линии: # 7e5ce6
Изменить весь контент
Наконец, измените все содержимое модуля в столбце 2.
Клонировать весь раздел дважды
Как только вы закончили первый раздел, вы можете клонировать его дважды.
Измените интервал первого повторяющегося раздела
Откройте настройки в первом дублированном разделе и измените значения полей соответственно:
- Оставленное поле: -5% (настольный компьютер), 0% (планшет и телефон)
- Правая граница: -5% (офис), 0% (планшет и телефон)
Измените интервал второго повторяющегося раздела
Также откройте второй дубликат, удалите все значения полей и добавьте нижнее поле.
- Нижнее поле: 100px
Изменить весь контент
Наконец, измените весь контент модуля.
Сохраните макет в библиотеке Divi для повторного использования.
Если вы планируете использовать это сводное поле в других сообщениях блога, обязательно сохраните его в своей библиотеке Divi, чтобы вы могли легко получить к нему доступ! Это оно !
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Заключительные мысли
В этой статье мы показали вам, как добавить поле сводки к вашему сообщению Gutenberg с новыми блоками макета Divi. Сводные блоки — отличный визуальный способ помочь посетителей найти информацию, которую они ищут.
Вы также смогли бесплатно скачать файл макета в формате JSON! Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии в разделе комментариев ниже.