Превратите модуль блога в расширенную карусель с возможностью перетаскивания / пролистывания с помощью Divi & Slick

Для многих веб-сайтов ведение блогов стало важной частью их стратегии SEO. Но помимо создания высококачественного контента, важно также упростить процесс навигации по записям для ваших посетителей. Таким образом, они могут переходить от одного сообщения к другому и проводить больше времени на вашем веб-сайте, читая контент, который вы там размещаете. В Divi есть модуль блога, который вы можете использовать для динамического отображения сообщений в блоге и стилизации их. Если вы ищете способ поднять опыт поиска сообщений на новый уровень, вам понравится этот пост. Мы покажем вам, как превратить встроенный модуль блога Divi в усовершенствованную карусель с возможностью перетаскивания и прокрутки с помощью встроенных элементов Divi и бесплатной удобной библиотеки js. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите модуль блога Draggable Swipe Carousel Layout БЕСПЛАТНО

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

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Создать страницу блога

Добавить новую страницу

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

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

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

2. Создавайте предыдущие и следующие конструкции стрелок с помощью модулей Blurb

Добавить новую строку в начало раздела

Структура столбца

Как только мы окажемся на странице блога, мы можем приступить к созданию усовершенствованной перетаскиваемой карусели. Первая часть посвящена разработке стрелок, которые нам нужны, чтобы посетители могли переходить между сообщениями. Стрелки - не единственный вариант, который посетители могут использовать для навигации по карусели. Они смогут перетаскивать карусель на рабочий стол и смахивать на мобильном телефоне. Чтобы разработать стрелки, мы будем использовать встроенный модуль Blurb Divi, но вы можете использовать любой другой модуль по вашему выбору. Добавьте новую строку в верхнюю часть раздела блога, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке касаться левой и правой стороны раздела, изменив настройки размера следующим образом:

• Ширина: 100%
• Максимальная ширина: 100%

Добавить модуль Blurb

Добавить заголовок

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

Выбрать значок

Далее выберите значок.

Настройки значков

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

• Цвет значка: # 000000
• Значок Круга: Да
• Цвет круга: # f2f2f2
• Размещение изображения / значка: вверху
• Выравнивание изображения / значка: по центру

Настройки текста заголовка

Затем измените настройки текста заголовка.

• Шрифт заголовка: Muli
• Плотность шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000

Размеры

Далее мы меняем настройки размера модуля для разных размеров экрана.

• Ширина: 10% (рабочий стол), 20% (планшет), 30% (телефон)
• Выравнивание модуля: справа

CSS-класс

И мы также добавим класс CSS. Этот класс CSS поможет нам запустить действие карусели при нажатии позже в руководстве.

• Класс CSS: кнопка возврата

Основной элемент CSS

И последнее, но не менее важное: мы также добавим одну строку кода CSS к основному элементу модуля, чтобы превратить курсор в указатель.

cursor: pointer;

Клонировать строку и разместить внизу раздела

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

Изменить заголовок

Откройте модуль Blurb в повторяющейся строке и измените заголовок.

Изменить значок

Вместе со значком.

Изменить класс CSS

И также измените класс CSS.

• Класс CSS: следующая кнопка

3. Подготовьте модуль блога.

Модуль блога с открытой строкой

Размеры

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

• Ширина: 100%
• Максимальная ширина: 100%

Видимость

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Изменить модуль блога

Скрыть разбиение на страницы

После того, как настройки строки будут на месте, откройте настройки модуля блога. Убедитесь, что в настройках элементов отключена пагинация.

• Показать разбиение на страницы: Нет

Макет

Затем перейдите на вкладку дизайна и измените макет на полную ширину.

• Макет: Полная ширина

Оверлей

Мы тоже добавляем оверлей.

• Наложение избранного изображения: Вкл.
• Цвет значка наложения: #ffffff
• Цвет фона наложения: rgba (1,0,66,0.33)

CSS-класс

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

• Класс CSS: модуль блога

Опубликовать мета-CSS

И мы сгенерируем некоторое пространство между мета поста и отрывком, добавив нижнее поле к мета CSS элементу поста на расширенной вкладке.

margin-bottom: 50px;

4. Добавьте удобную функциональность JS.

Добавить модуль кода под модулем блога

После того, как все настройки Divi настроены, пришло время добавить удобную функциональность js! Добавьте модуль кода прямо под модулем блога (или где-нибудь еще на странице).

Добавление тегов Slick JS Script

Затем добавьте красивую библиотеку js в теги сценария (как вы можете видеть на экране печати ниже). Вы также можете добавить их в заголовок своего веб-сайта в настройках темы Divi.

src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js

Добавить CSS-код слайда

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

.slick-slide {
float: left;
margin: 2vw;
}

Добавить код JQuery

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

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. Сохраните страницу и выйдите из Visual Builder, чтобы просмотреть результат.

В Visual Builder вы не увидите результата. Итак, как только вы закончите, сохраните свою страницу, выйдите из Visual Builder и просмотрите результат на своем веб-сайте!

Предварительный просмотр

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

Рабочий стол

Мобильный

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

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

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