Как стилизовать модуль пост-слайдера Divi, как пост-слайдер Facebook Newsroom

Слайдеры сообщений - это элегантное решение для представления читателям разнообразного контента. Выделенные сообщения можно систематизировать разными способами, начиная с категорий и заканчивая текущими. В сегодняшнем проекте мы рассмотрим пример со страницы блога Facebook Newsroom, который представляет категорию сообщений под названием «Главные новости». Это очень привлекательный слайдер, который подчеркивает заголовок публикации и изображение. Мы воссоздадим внешний вид этого слайдера, используя модуль Divi Post Slider.

До и после: модуль слайдера Divi Post

На первом изображении ниже показан модуль слайдера сообщений divi с его настройками по умолчанию, а на втором - модификация, созданная с помощью всего лишь нескольких настроек и некоторого пользовательского CSS.

До

После

Концепция и вдохновение

Как уже упоминалось, модель сегодняшнего стиля слайдера постов взята из Facebook Newsroom. Это новостной блог, посвященный, как вы уже догадались, всему, что связано с Facebook. Хотя большинство из нас знает Facebook как гиганта социальных сетей, беглый просмотр этого блога расширит ваши перспективы. С выручкой в ​​8,8 миллиарда долларов в прошлом квартале и 1,23 миллиарда активных пользователей в день слайдер блога на странице Facebook Newsroom представляет собой достойную модель для сегодняшнего проекта.

Подготовка элементов дизайна

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

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

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

Реализация дизайна с Divi

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

Если вы следуете инструкциям и еще не настроили страницу для отображения слайдера сообщений, просто создайте новую страницу и нажмите «Использовать Visual Builder», чтобы начать вносить необходимые изменения.

Мы начинаем с добавления регулярного раздела со структурной строкой в ​​1 столбец.

Затем добавьте в строку модуль Post Slider.

Наши модификации начинаются с настроек «Содержимое», которые вы находитесь по умолчанию после добавления любого нового модуля в Visual Builder.

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

Установите «Номер сообщения» на любое количество сообщений, которое вы хотите. В этом примере я использую 3.

Затем установите для параметра «Использовать выдержку из сообщения, если определено» значение «Да» и установите для параметра «Длина автоматической выдержки» значение 180.

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

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

Измените «Цвет фона наложения» на белый (#ffffff).

Измените «Пользовательский цвет точки навигации» на # 576d90.

Измените «Цвет текста» на Темный.

Теперь выделите «Шрифт заголовка» полужирным шрифтом, установите «Размер шрифта заголовка» на 34 пикселя, установите «Цвет текста заголовка» на # 3b5998 и «Высота строки заголовка» на 42 пикселя.

Теперь установите «Цвет основного текста» на # 141924, а «Высота линии тела» на 24 пикселя.

Теперь нажмите «Использовать пользовательские стили для кнопки», чтобы изменить его на «Да». Измените «Размер текста кнопки» на 16 пикселей, «Ширина границы кнопки» на 0 пикселей, «Цвет текста при наведении курсора на кнопку» на # 666666 и «Цвет фона при наведении курсора кнопки» на rgba (0,0,0,0).

Теперь щелкните вкладку «Дополнительно» в верхней части модального окна настроек модуля. В поле ввода текста под идентификатором CSS добавьте «fb-post-slider». Это позволяет нам добавлять стили в этот конкретный модуль, не оказывая никакого влияния на другие модули сообщений, которые могут отображаться на странице.

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

До

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Главный элемент

border-radius: 3px;
border:1px solid #dedede; 

После

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Описание слайда

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

Заголовок слайда

font-family: 'Alegreya Sans', sans-serif;

Скользящая кнопка

padding:0!important;
margin-top:0;

Контроллеры слайдов

margin-bottom:-55px;

Скользящие стрелки

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

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

В Visual Builder вы можете увидеть, что есть еще несколько способов сделать наш пост-слайдер похожим на тот, что на странице Facebook Newsroom.

Это то, о чем немного CSS не может позаботиться, и мы сможем увидеть, как он обретет форму, добавив оставшийся код в Параметры страницы прямо из Visual Builder. Чтобы попасть туда, щелкните значок «Развернуть настройки» внизу по центру страницы, затем щелкните значок «Параметры страницы».

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

Сначала мы позаботимся о размере и положении фонового изображения (в настоящее время скрыто за белым наложением), а также о положении текста ползунка и наложения, добавив следующий CSS в текстовое поле «Custom CSS».

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

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

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

Мы почти готовы, за небольшими исключениями. Вы заметите, что при наведении курсора на наш модуль слайдера сообщений появляются как предыдущая, так и следующая стрелки. На слайдере службы новостей Facebook отображается только следующая стрелка. Это легко исправить, добавив следующий CSS-код в текстовый ввод Custom CSS чуть ниже ранее введенного кода.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

Теперь нам нужно переместить точки навигации под ползунок с помощью следующего кода. Кстати, вы также заметите, что установка свойства переполнения ползунка на visible показывает трехмерный эффект, который мы создали ранее для тега «Top Stories», который обтекает правый верхний угол.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

Наконец, этот последний фрагмент кода изменит анимацию нашего слайдера, чтобы она больше соответствовала нашей модели слайдера. Хотя это не идеальное совпадение, это самое близкое, что я мог бы получить, не вдаваясь в решения jQuery. Также есть несколько медиа-запросов, чтобы сделать наш слайдер более отзывчивым.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

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

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

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