Хотели бы вы улучшить свои сообщения в блоге? Divi добавив в него раздел Hero?
Полноэкранные разделы Hero отлично смотрятся на любой веб-странице, но особенно хорошо они смотрятся в сообщениях блога.
Несмотря на то, что показанное изображение полноэкранное, существует множество вариантов дизайна для размещения заголовка и метатекста. Это легко сделать с помощью Конструктор тем Divi .
В этой статье мы рассмотрим несколько способов добавления полноэкранного раздела Hero в шаблон сообщения в блоге. Диви.
Давайте начнем.
обследование
Вот предварительный просмотр того, что мы будем разрабатывать в этом уроке.
Читайте также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения
Раздел Hero с модулем версии Post Title Desktop
Раздел Hero с модулем мобильной версии Post Title
Альтернативный макет раздела Hero с модулем настольной версии Post Title
Скачайте 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
Раздел Hero с модулем мобильной версии Post Title
Альтернативный макет раздела Hero с модулем настольной версии Post Title
Альтернативный макет раздела Hero с модулем заголовка мобильного сообщения
Раздел героя с метаданными Десктопная версия
Раздел героя с метаданными мобильной версии
Скачайте DIVI прямо сейчас!!!
Заключение
Вот и все! Это наш взгляд на то, как добавить полноэкранный раздел Hero в шаблон сообщения в блоге. Divi.
Модули Divi и Theme Builder предлагают несколько вариантов создания полноэкранных разделов Hero. Все методы работают очень хорошо и у всех есть свои преимущества.
Используя эти методы, вы можете добавить полноэкранный раздел Hero в любой шаблон записи блога Divi.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...