4 потрясающих примера модуля заголовков сообщений Divi и способы их достижения

Для всех вас, блоггеров Divi, которые ищут новые способы взаимодействия с людьми своими сообщениями в блоге, модуль заголовков сообщений Divi - отличное место для начала. Модуль заголовка поста позволяет вам стилизовать заголовок поста (и избранное изображение) различными способами для бесчисленных потрясающих дизайнов. Это позволяет вам создавать красивые статьи, которые привлекают ваших потенциальных читателей с первого взгляда. Сегодня я собираюсь показать вам четыре потрясающих способа стилизации модуля заголовка сообщения Divi, чтобы привлечь внимание читателей.

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

Sneak Peek

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

# 1 Абстрактное обрамление

Начать строительство # 1

# 2 Перекрытие текста и избранного изображения

Начать строительство # 2

# 3 Уникальный фон контента для удобочитаемости

Начать строительство # 3

# 4 Эффект наложения с двумя избранными изображениями

Начать строительство # 4

Начиная

Подпишитесь на наш канал Youtube

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

Настройка для новых сообщений

В этом уроке я буду использовать Divi Builder для создания примеров дизайна заголовков для нового сообщения. Чтобы настроить сборки в этом руководстве, вам необходимо сделать следующее:

1. Создайте новый пост.
2. Добавьте заголовок к своему сообщению.
3. Добавьте изображение в свой пост.
4. Разверните Divi Builder.
5. Выберите строить с нуля
6. в разделе «Настройки страницы Divi» выберите макет страницы без боковой панели и выберите « Скрыть заголовок».
7. Затем нажмите «Создать» в интерфейсе пользователя или разверните режим представления «Рабочий стол» в серверной части, чтобы визуально создать страницу.

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

# 1 Абстрактное обрамление

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

Вот как это сделать.

Убедитесь, что вы настроили новое сообщение, как описано в начале этой статьи (Добавить заголовок, Избранное изображение, Без макета страницы боковой панели, скрыть заголовок сообщения по умолчанию). Добавьте к своему сообщению новый раздел со строкой в ​​одну колонку. Затем добавьте модуль заголовка сообщения в строку.

В настройках заголовка публикации установите размещение избранного изображения следующим образом:

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

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

Цвет фона градиента слева: rgba (0,0,0,0.06)
Цвет фона градиента справа: rgba (0,0,0,0)
Тип градиента: радиальный
Радиальное направление: Внизу справа
Стартовая позиция: 10%
Конечная позиция: 0%

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

Шрифт заголовка: Josefin Sans
Выравнивание текста заголовка: по правому краю
Размер текста заголовка: 36 пикселей
Высота строки заголовка: 1,7 мкм (настольный компьютер), 1,3 мкм (планшет и смартфон)
Мета Шрифт: Josefin Sans
Стиль мета-шрифта: TT
Выравнивание метатекста: по левому краю
Интервал между буквами в мета: 2 пикселя
Высота мета-линии: 2em
Специальная маржа: -5vw сверху
Пользовательские отступы: 5vw сверху, 5vw снизу, 5vw слева, 5vw справа
Ширина правой границы: 4 пикселя

Поле -5vw вытягивает модуль за пределы строки, чтобы правая граница находилась над левой границей, которую мы будем добавлять в строку.

Теперь давайте добавим абстрактный элемент дизайна с помощью тени блока:

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 112 пикселей
Положение прямоугольной тени по вертикали: 85 пикселей
Сила распространения тени коробки: -80 пикселей
Цвет тени: rgba (224,43,32,0.3)

Сохранить настройки.

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

Настраиваемая ширина: 700 пикселей
Ширина правой границы: 4 пикселя

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 112 пикселей
Положение прямоугольной тени по вертикали: 85 пикселей
Сила распространения тени коробки: -80 пикселей
Цвет тени: rgba (224,43,32,0.3)

Теперь посмотрим на окончательный дизайн.

# 2 Перекрытие текста и избранного изображения

Создайте новый раздел с строкой из двух столбцов. Затем добавьте модуль изображения в левый столбец.

Это изображение будет использоваться в качестве избранного изображения с использованием динамического контента. Откройте настройки изображения, удалите имитацию изображения и щелкните значок динамического содержимого в правом верхнем углу окна предварительного просмотра изображения. Затем выберите Featured Image из списка, чтобы добавить избранное изображение на страницу.

Теперь добавьте модуль заголовка сообщения в правый столбец. Откройте настройки и скройте избранное изображение, установив для параметра Показать избранное изображение значение НЕТ.

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

Цвет фонового градиента слева: #ffffff
Цвет фона градиента справа: rgba (255,255,255,0)

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

Обновите остальную часть дизайна следующим образом:

Шрифт заголовка: Fira Sans Condensed
Плотность шрифта заголовка: Ультра легкий
Размер текста заголовка: 80 пикселей (рабочий стол), 70 пикселей (планшет), 45 пикселей (смартфон)
Мета-шрифт: Fira Sans Condensed
Стиль мета-шрифта: TT
Выравнивание метатекста: вправо
Цвет метатекста: #cccccc
Интервал между буквами в мета: 2 пикселя
Специальная маржа: -20% слева (компьютер), 0% (планшет и смартфон)
Пользовательские отступы: 5vw сверху, 5vw снизу, 30 пикселей слева

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 80 пикселей
Положение прямоугольной тени по вертикали: 82 пикс.
Сила распространения тени коробки: -80 пикселей

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

Ширина желоба: 1
Выровнять высоту столбца: ДА

Теперь посмотрим на окончательный дизайн.

Альтернативный дизайн закругленных изображений

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

Закругленные углы: 50%

Затем откройте настройки строки и добавьте следующий настраиваемый CSS под основным элементом:

align-items: center;

Это работает только в том случае, если для параметра «Выровнять высоту столбцов» установлено значение «ДА», что активирует свойство гибкости, позволяющее выравнивать элементы по вертикали.

Вот окончательный дизайн.

# 3 Уникальный фон контента для удобочитаемости

Этот дизайн заголовка поста включает фоновые градиенты, чтобы сделать заголовок и метатекст более читабельными с фоном избранного изображения.

Вот как это сделать.

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

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

Шрифт заголовка: Abril Fatface
Цвет текста заголовка: # 121212
Размер текста заголовка: 75 пикселей (рабочий стол), 50 пикселей (планшет), 30 пикселей (смартфон)
Интервал между заглавными буквами: 2 пикселя
Высота строки заголовка: 1,1 мкм
Мета-шрифт: Roboto Condensed
Цвет метатекста: #ffffff
Размер метатекста: 16 пикселей
Интервал между буквами в мета: 2 пикселя
Высота мета-линии: 2em
Ширина: 60% (рабочий стол), 90% (планшет), 100% (смартфон)
Пользовательские отступы: осталось 3vw

Теперь давайте добавим тень блока, которая будет фоном к метатексту и сделать его читабельным.

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: -32px
Цвет тени коробки: # 121212

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

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

Цвет фона градиента слева: rgba (255,255,255,0.76)
Цвет фона градиента справа: rgba (255,255,255,0)
Тип градиента: радиальный
Радиальное направление: вверху слева
Стартовая позиция: 40%
Конечная позиция: 0%
Поместите градиент над фоновым изображением: ДА

Теперь посмотрим на окончательный дизайн.

# 4 Эффект наложения с двумя избранными изображениями

Этот дизайн включает в себя некоторые тени блоков, чтобы создать эффект наложения элементов, составляющих модуль заголовка сообщения и фон раздела. Он также использует две версии избранного изображения (динамически) для уникального элемента дизайна.

Вот как это сделать.

Создайте новый раздел со строкой из одного столбца. Затем добавьте модуль публикации в строку и обновите размещение избранного изображения до Title / Meta Background Image.

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

Цвет текста: светлый
Цвет фона текста: rgba (1,59,104,0.79)
Ориентация текста: по центру
Шрифт заголовка: Roboto Condensed
Толщина шрифта заголовка: легкий
Размер текста заголовка 70 пикселей (рабочий стол), 50 пикселей (планшет), 30 пикселей (смартфон)
Высота строки заголовка: 1,3 мкм
Толщина мета-шрифта: легкий
Стиль мета-шрифта: TT
Цвет метатекста: #cccccc
Интервал между буквами в мета-формате: 1 пиксель
Пользовательские отступы: 10vw сверху, 0px снизу

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: -46 пикселей
Цвет тени: #ffffff

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

Теперь сохраните ваши настройки и откройте раздел настроек. Добавьте изображение к вашему фону как динамическое содержимое. Затем добавьте градиент следующим образом:

Цвет фона градиента слева: rgba (1,59,104,0.79)
Градиент фона Правый цвет: rgba (1,59,104,0.79)
Поместите градиент над фоновым изображением: ДА

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

Затем добавьте пользовательские отступы.

Custom Padding (рабочий стол): 10vw сверху, 0px снизу
Custom Padding (смартфон): 0vw сверху, 0px снизу

Затем добавьте еще одну тень блока, чтобы продолжить эффект наложения.

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: -92 пикселей
Цвет тени: #ffffff

Чтобы завершить дизайн, откройте настройки строки и обновите следующее:

Сделать эту строку полной шириной: ДА
Ширина желоба: 1
Пользовательский отступ (рабочий стол): 0 пикселей сверху, 0 пикселей снизу, 6% слева, 6% справа
Пользовательский отступ (смартфон: 0 пикселей сверху, 0 пикселей снизу, 0% слева, 0% справа

Теперь посмотрим на окончательный дизайн.

Последние мысли

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

Чтобы узнать больше о дизайне, ознакомьтесь с нашим сообщением в блоге о красивых и увлекательных динамических разделах, посвященных героям блога, и о секрете разработки макетов с разбитой сеткой в ​​Divi.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!