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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаблоны постов в блоге для полноэкранного раздела Hero

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

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

Загрузите или создайте шаблон сообщения в блоге для полноэкранного раздела Hero.

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

Смотрите также: 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,6 em. Закройте настройки и сохраните шаблон.

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

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

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

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

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

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

  • Остановки градиента:
    • 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,6 см. Закройте настройки и сохраните шаблон.

  • Заголовок 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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

Вот и все! Это наш взгляд на то, как добавить полноэкранный раздел Hero в шаблон сообщения в блоге. Divi

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

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

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

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

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

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

...