Divi: как добавить раздел «Герой» в запись блога

Хотели бы вы улучшить свои сообщения в блоге? Divi добавив в него раздел Hero?

Полноэкранные заставки Hero отлично смотрятся на любой веб-странице, но особенно интересны они на записях в блоге. 

Даже если изображение отображается на весь экран, существует множество вариантов оформления для размещения заголовка и мета-текста. Это легко сделать с помощью Конструктор тем Divi . 

В этой статье мы рассмотрим несколько способов добавления полноэкранного раздела "Герой" в шаблон записи вашего блога. Диви.

Давайте начнем.

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

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

Читайте также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения

Раздел Hero с модулем версии Post Title Desktop

Раздел Hero с модулем мобильной версии Post Title

Альтернативный макет раздела Hero с модулем настольной версии Post Title

Скачайте DIVI прямо сейчас!!!

Альтернативный макет раздела Hero с модулем заголовка мобильного сообщения

Раздел героя с метаданными Десктопная версия

Раздел героя с мобильной версией метаданных

Скачайте DIVI прямо сейчас!!!

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

Вы можете создать шаблон для записи в блоге в Divi Theme Builder с нуля или скачать готовый шаблон из блога Elegant Themes. Чтобы найти их, воспользуйтесь поиском по блогу. «Бесплатный шаблон для постов в блоге». Если вы загружаете шаблон, обязательно разархивируйте его.

Для наших примеров мы будем использовать  Бесплатный шаблон сообщения в блоге для пакета макетов модного дизайнера Divi . Мы также используем бесплатный пакет макетов. Верхний и нижний колонтитулы Дизайнер одежды .

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

Вы можете скачать шаблон для записи в блоге или создать его с нуля. Мы скачаем готовый шаблон, но процесс создания полноэкранного раздела "Герой" остаётся тем же.

Смотрите также: Divi: как использовать маски и фоновые узоры для раздела героя

Способ 1: Полноэкранный модуль заголовка сообщения

Этот метод будет использовать Модуль PostTitle Это хороший вариант, если вы хотите отобразить всю информацию одновременно. После того, как вы создадите шаблон, выберите значок редактирования, чтобы открыть его.

В загруженном нами шаблоне есть раздел с изображением для обложки. Мы собираемся удалить этот раздел и добавить другой. Секция полной ширины на своем месте.

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

Все элементы выбраны по умолчанию. Оставьте их включенными. Прокрутите вниз до Размещение избранного изображения и выберите Над заголовком.

• Размещение избранного изображения: над заголовком

Прокрутите до Цвет фона и установите цвет #fff9f2

• Фон: #fff9f2

Текст заголовка

Выберите вкладку Дизайн . Для текста заголовка оставьте H1 и выберите Playfair Display. Установите для него значение Left Justified и выберите цвет #34332e.

• Название:
  • Уровень заголовка: H1
  • Шрифт: Дисплей Playfair
  • Выравнивание текста: по левому краю
  • Цвет текста: #34332e

Для размер текста , установите для настольной версии значение 65 пикселей, для мобильной версии — 42 пикселя, а для высоты строки — 1,2 эм.

• Размер текста заголовка (на рабочем столе): 65 пикселей (на рабочем столе), 42 пикселя (на телефоне)
• Высота строки заголовка: 1,2 см

Метатекст

Прокрутите до Мета-текст. Выберите Montserrat для шрифта и установите средний, верхний регистр, выравнивание по правому краю для настольной версии и выравнивание по левому краю для мобильной версии. Выберите цвет #7b7975.

• МетаШрифт:
  • Шрифт: Монтсеррат
  • Вес: средний
  • Стиль: ТТ
• Метатекст:
  • Выравнивание: вправо (рабочий стол), влево (телефон)
  • Цвет: #7b7975

Определить размер шрифта Для версии для настольных компьютеров установите размер шрифта 14 пикселей, для мобильной версии — 10 пикселей, межбуквенный интервал — 1 пиксель, а высоту строки — 1,6em. Закройте настройки и сохраните шаблон.

• Метатекст:
  • Размер (для рабочего стола): 14 пикселей
  • Размер (телефон): 10px
• Расстояние между буквами: 1px
• Высота строки: 1,6 см

Заголовок на фоновом изображении

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

выбрать Заголовок/метафоновое изображение для Размещение избранного изображения.

• Размещение избранного изображения: Заголовок/Метафоновое изображение

Прокрутите до Предыстория и выберите Фоновый градиентУстановите левый цвет на #fff9f2, правый цвет на rgba (255,255,255,0), направление на 90 градусов, начальную позицию на 30%, и выберите «Да», чтобы наложить градиент на фоновое изображение. Закройте и сохраните настройки.

• Остановки градиента:
  • 30%: #fff9f2
  • 100%: RGBA(255,255,255,0)
• Направление градиента: 90 градусов
• Квадратный градиент над фоновым изображением: ДА

Способ 2: Полноэкранный раздел героя с метаданными

Этот метод будет использовать текстовые модули с динамический контент Для информации. Это хороший вариант, если вы хотите отобразить все элементы в разных местах. 

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

Настройки полноэкранного раздела Hero с метаданными

Откройте настройки . и прокрутите до Изображение на заднем плане. Выбрать Фоновый градиент и измените настройки следующим образом:

• Остановки градиента:
  • 30%: #fff9f2
  • 100%: RGBA(255,255,255,0)
• Направление градиента: 90 градусов
• Квадратный градиент над фоновым изображением: ДА

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

Выберите Изображение в опциях.

Выберите вкладку Дизайни прокрутите до Калибровка. Добавьте 100vh к минимальной высоте. Закройте настройки раздела.

• Минимальная высота: 100vh

Настройки полноэкранного раздела Hero с метаданными

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

Добавить Текстовый модуль в правом столбце.

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

Выберите Заголовок сообщения / архива в списке опций.

• Динамический контент: заголовок поста/архива

Перейдите на вкладку Дизайн.

• Заголовок:
  • Текст: H1
  • Шрифт: Дисплей Playfair
  • Выравнивание текста: по левому краю
  • Цвет текста: #34332e

Для размера тексты , установите для настольной версии 65 пикселей, для мобильной версии 42 пикселя и высоту строки 1,2 em.

• Заголовок:
  • Размер текста: 65 пикселей (рабочий стол), 42 пикселя (телефон).
  • Высота строки: 1,2 см

Прокрутите до Расстояние и введите 50% для верхнего заполнения. Закрыть настройки.

• Набивка: 50% (сверху)

Вы также можете прочитать эту статью о: Как создать раздел героя с модулем заголовка полной ширины Divi

Раздел героя с категорией метаданных

Добавить новый раздел обычный в разделе «Герой».

Откройте его настройки и установите оттенок Фон на #fff9f2. Закрыть настройки.

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

Затем добавьте линия из 4 столбцов в новый раздел.

Полноэкранный герой с текстом категории метаданных

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

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

выбрать Прошлые категории в списке.

• Динамический контент: категории сообщений

Выберите вкладку Дизайн Прокрутите вниз до раздела «Заголовок». Выберите H4. Выберите шрифт Playfair Display и установите его значение: средний, верхний регистр, выравнивание по правому краю для версии для настольных компьютеров и по левому краю для версии для телефонов. Выберите цвет #7b7975.

• Заголовок:
  • Текстовый дисплей
  • Шрифт: Дисплей Playfair
  • Вес шрифта: средний
  • Стиль: ТТ
  • Выравнивание текста: по центру
  • Цвет текста: #7b7975

Установите размер шрифта для версии для настольных компьютеров на 14 пикселей, для мобильной версии — на 10 пикселей, межбуквенный интервал — на 1 пиксель, а высоту строки — на 1,6em. Закройте настройки и сохраните шаблон.

• Заголовок 4:
  • Размер (для рабочего стола): 14 пикселей
  • Размер (телефон): 10px
  • Расстояние между буквами: 1px
  • Высота строки: 1,6 см

Прокрутите до Расстояние и добавьте 0px к нижнему полю. Закрыть настройки.

• Поле (снизу): 0px

Полноэкранный раздел Hero с метаданными Meta Text

Затем скопируйте модуль «Категория» и перетащите его в следующий столбец. Каждый из метамодулей имеет одинаковые настройки. Мы покажем, как создать первый модуль, а затем дважды скопировать его для создания других модулей.

Автор

Откройте настройки и удалите динамический контент.

Cliquez-сюр- Используйте динамический контент и выберите Сообщение.

• Динамический контент: Автор сообщения

На вкладке Дизайн, Измените следующие настройки. 

• Заголовок 4:
• Шрифт: Монтсеррат
• Вес шрифта: средний
• Стиль: ТТ
• Выравнивание текста (рабочий стол): по центру
• Выравнивание текста (телефон): по левому краю
• Цвет: #7b7975

Параметры размер шрифта включать:

• Размер текста: 14 пикселей (на компьютере), 10 пикселей (на телефоне)
• Расстояние между буквами: 1px
• Высота строки: 1,6 см

La нижнее поле должен иметь 0px.

• Поле (снизу): 0px

Время

копия модуль Author и перетащите его в следующий столбец.

Удали это динамический контент актуально, выбирай Используйте динамический контент и выберите Дата публикации публикации. Закрыть настройки.

• Динамический контент: дата публикации публикации

Комментарии

Enfin, копия модуль «Дата публикации публикации» и перетащите его в последний столбец.

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

Выберите Количество комментариев к сообщению от вашего выбора.

• Динамический контент: количество комментариев

На этот раз добавьте пробел и слово Комментарии в поле После . Закройте маленькое модальное окно, затем закройте настройки. Сохраните свою работу.

• После: Комментарии

Читайте также: Divi: как отобразить модуль заголовка Fullwidth в полноэкранном режиме

Результаты

Раздел Hero с модулем версии Post Title Desktop

Раздел Hero с модулем мобильной версии Post Title

Альтернативный макет раздела Hero с модулем настольной версии Post Title

Альтернативный макет раздела Hero с модулем заголовка мобильного сообщения

Раздел героя с метаданными Десктопная версия

Раздел героя с метаданными мобильной версии

Скачайте DIVI прямо сейчас!!!

Заключение

Вот и всё! Это наш вариант того, как добавить полноэкранный раздел «Герой» в шаблон записи блога Divi. 

Модули Divi и Theme Builder предлагают несколько вариантов создания полноэкранных разделов Hero. Все методы работают очень хорошо, и каждый имеет свои преимущества. 

Используя эти методы, вы можете добавить полноэкранный раздел "Герой" в любой шаблон записи блога Divi.

Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...