Начать свой пост с привлекательного по дизайну заголовка статьи – это отличный способ привлечь внимание посетителя. Создать его нам поможет модуль Заголовка (Post Title Module) темы Divi.
Тема поста навеяна вот этой публикацией.
Прежде чем мы начнем, давайте посмотрим, как выглядит заголовок поста отображаемый модулем Post Title по умолчанию.
Посмотрите на начало этого поста. Этот заголовок создан модулем именно с такими установками.
Достаточно просто и практически ни чем не отличается от заголовка создаваемого Divi вообще без использования этого модуля.
Постараемся с помощью нехитрых настроек модуля и небольших добавлений кода CSS преобразовать картинку в более привлекательный вид.
Перед настройкой модуля заголовка у вас уже должны быть заранее определены заголовок и изображение.
Заголовок – это название публикации, которое вы вписываете в поле «Введите заголовок» при создании поста или статьи.
Изображение – установленное изображение записи или Featured Image в английской трансляции. Так же известно под названием Post Thumbnails.
Это изображение отображается в виде миниатюры в списке публикаций сайта и как изображение в заголовке поста.
При использовании модуля Post Title, в настройках поста редактора Divi Builder (правый верхний блок), нужно отключить отображение заголовка. Это нужно чтобы заголовок не дублировался. Пункт Post Title устанавливаем в значение Hide.
Еще замечание. В процессе выставления параметров шрифтов не забывайте контролировать получаемый результат на различных устройствах (десктоп, планшет и смартфон). В зависимости от длины вашего заголовка может потребоваться установка разных размеров шрифта для правильного отображения на каждом из этих устройств.
Итак, начнем.
Первый вариант не требует какого-либо добавления кода, результат достигается только настройками самого модуля Post Title.
Получается интересный заголовок с параллакс-эффектом.
Как мы видели ранее, модуль по умолчанию выводит заголовок и метаданные над изображением. В этом примере мы опустим заголовок вниз и расположим его на цветном фоне.
В третьем примере и заголовок и изображение расположены внутри общего цветного прямоугольника. Этот вариант так же требует добавления небольшого кода CSS. Это не сложно. Результат будет таким:
Настройки модуля.
Поле Meta:
border-top: 1px solid #fff2e1;
padding-top: 5px;
padding-bottom: 0px;Код добавляет линию между заголовком и метатекстом, а так же настраивает отступы.
Поле Featured Image:
margin-top: -20px;
padding: 20px;Эти строки уменьшают расстояние между текстом и изображением и устанавливают отступы для визуального объединения фонов изображения и заголовка.
Не забываем сохранить нажав Save&Exit.
Вот так с помощью всего лишь изменения настроек и нескольких строк кода можно создать современно и стильно выглядящий заголовок публикации.
Еще одним способом привлечь дополнительное внимание к вашей публикации является создание заголовка в стиле всплывающего «поп-ап» окна. В этом примере, создается впечатление, что текстовый блок заголовка расположен на переднем плане перед изображением.
Настройки модуля.
Поле Featured Image:
margin-bottom: -15px;
padding: 0% 3%;Код немного сдвигает изображение вниз за блок текста и задает отступы слева и справа от изображения визуально помещая картинку на задний план.
В последнем примере заголовок публикации расположен на полупрозрачном цветном слое (color overlay) перед изображением и при прокручивании создает параллакс эффект. Этот способ интересен еще тем, что в качестве фонового изображения может использоваться картинка, отличная от Featured Image.
Сначала настроим параметры строки (Row).
Поле Featured Image:
В это поле последовательно вставляем следующие строки:
Эти строки гарантируют, что фоновое изображение расположено в пределах фрейма.
background-repeat: no-repeat ;
background-attachment: fixed;
background-position: top center ;
-webkit-background-size: cover ;
-moz-background-size: cover ;
background-size: cover ;При помощи следующего кода создается наложение цветового слоя на изображение. В нашем случае это градиент под углом 45 градусов. Для одноцветной заливки параметры цветов нужно будет установить одинаковыми.
Обратите внимание на URL фонового изображения. Вы должны вставить сюда адрес своей картинки, скопировав его из медиабиблиотеки. Адрес может быть как абсолютным, так и относительным.
background-image:
linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)),
url('/wp-content/uploads/2017/11/bg.jpg');
Следующий код отрисовывает однопиксельную рамку белую рамку на расстоянии 20 пикселей от края изображения.
outline: solid 1px #fff;
outline-offset: -20px;
Теперь остается настроить сам модуль:
View Comments
Добрый вечер. Не подскажите, как можно деактивировать этот плагин, чтобы статьи остались нормальными и не содержали весь код, оставленный Divi?
Доброго, Дмитрий.
Попробуйте воспользоваться вот этим бесплатным плагином.
Он удалит шорткоды Divi с ваших страниц.