Как насчетплакатer ваш блог Диви в виде карусели, где можно легко листать статьи?
Для многих веб-сайтов ведение блогов стало важной частью маркетинговой стратегии. SEO.
Но помимо создания высококачественного контента важно также упростить процесс просмотра сообщений для ваших посетителей. Таким образом, они могут переходить от статьи к статье и проводить больше времени на вашем веб-сайте, читая контент, который вы там публикуете.
В Divi есть модуль «Блог», который вы можете использовать для динамического отображения своих статей и их настройки. Если вы ищете способ вывести поиск сообщений на новый уровень, вам понравится эта статья.
Мы покажем вам, как превратить интегрированный модуль блога Divi в карусель, используя интегрированные элементы Divi и бесплатная js-библиотека .
Пойдем.
обследование
Прежде чем погрузиться в учебник, давайте быстро взглянем на результат.
Создайте страницу блога с помощью Divi Theme Builder
Начните с добавления новой страницы на веб-сайт, над которым вы работаете.
Дайте вашей странице название, опубликуйте страницу и нажмите 'Использовать Divi Builder».
Загрузить предварительно разработанный макет страницы блога «Компания по дизайну интерьеров»
В этом уроке мы будем использовать страницу блога из макета «Компания по дизайну интерьера», но вы можете использовать любой другой макет, который вам нравится.
Создавайте шаблоны стрелок «Предыдущий» и «Следующий» с помощью модуля «Сводка» Divi.
Оказавшись на странице блога, мы можем начать создавать карусель.
Первая часть посвящена созданию стрелок, необходимых для того, чтобы посетители могли перемещаться между статьями.
Читайте также: Как создать липкий глобальный заголовок в DIVI
Для разработки стрелок мы будем использовать модуль Divi Summary, но вы можете использовать любой другой модуль по вашему выбору.
Добавьте новую строку вверху раздела ваш блог используя следующую структуру столбцов:
калибровка
Пока не добавляя никаких модулей, откройте настройки линии и дайте линии коснуться левой и правой сторон секции, изменив настройки размера следующим образом:
- Максимальная ширина: 100%
- Максимальная ширина: 100%
Добавить модуль сводки
Добавьте модуль «Сводка» и вставьте заголовок.
Затем выберите значок.
- Использовать значки: ДА
Настройки значка
Перейдите на вкладку «Стиль» и измените настройки значка следующим образом:
- Цвет значка: #000000
- Размещение изображения/значка: Вершина
- Выравнивание изображения/значка: по центру
Настройки текста заголовка
Затем измените настройки текста заголовка.
- Шрифт заголовка: Mulish
- Мягкий свет Название: Полужирный
- Выравнивание текста: по центру
- Цвет текста заголовка: #000000
калибровка
Затем мы меняем настройки размера модуля для разных размеров экрана.
- Максимальная ширина: 10 % (рабочий стол), 20 % (планшет), 30 % (телефон).
- Выравнивание текста: вправо
Давайте также добавим класс CSS. Этот класс CSS поможет нам запускать действие карусели при нажатии.
- Класс CSS: кнопка «Назад»
Наконец, мы также добавим строку кода CSS в основной элемент модуля, чтобы превратить курсор в указатель.
cursor: pointer;
Клонируйте линию и поместите ее внизу раздела.
После того, как вы закончите первую стрелку, вы можете клонировать весь контейнер строки и поместить дубликат строки в конец раздела блога.
Откройте модуль «Сводка» в дублирующей строке и отредактируйте заголовок.
Использовать значки: ДА.
Также измените класс CSS.
- Класс CSS: следующая кнопка
Подготовьте модуль блога
калибровка
Когда стрелки на месте, пора приступить к настройке модуля «Блог», начиная со строки, в которой он находится. Откройте настройки линии и соответствующим образом измените настройки размера:
- Максимальная ширина: 100%
- Максимальная ширина: 100%
Затем установите для переполнения строки значение «скрытый». Это поможет гарантировать, что карусель не приведет к появлению горизонтальной полосы прокрутки на нашей странице.
- Горизонтальное переполнение: Скрыто
- Вертикальное переполнение: скрыто
Скрыть нумерацию страниц
После настройки линии откройте настройки модуля «Блог». Убедитесь, что пейджинг отключен в настройках элемента.
- Показать пагинацию: Нет
Затем перейдите на вкладку «Стиль» и измените макет на «Полный экран».
- Модель: Полноэкранный
Мы также добавим наложение.
- Показано наложенное изображение: АКТИВНО
- Цвет значка наложения: #ffffff
- Цвет фона наложения: rgba (1,0,66,0.33)
Далее мы добавим в наш блог класс CSS, который поможет нам включить карусель позже в этом руководстве.
- Класс CSS: блог-модуль
И мы создадим некоторое пространство между метаданными сообщения и выдержкой, добавив нижнее поле к элементу CSS метаданных сообщения на вкладке «Дополнительно».
Узнайте также: Как создать скользящее и push-меню в DIVI
margin-bottom: 50px;
Добавьте функциональность Slick JS
После того, как все настройки Divi установлены, пришло время добавить изящную функциональность js! Добавьте модуль «Код» сразу под модулем «Блог» (или в любом другом месте на странице).
Затем добавьте гладкую библиотеку js в тегах скрипта (как вы можете видеть на экране печати ниже). Вы также можете добавить их в шапку вашего сайта в настройках Диви тема.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Мы немного изменим каждый пост в блоге на индивидуальном уровне, используя код CSS.
Читайте также: Как создать страницу блога с помощью модуля «Блог» в DIVI
Обязательно разместите код между тегами стиля как показано на скриншоте ниже.
.slick-slide {
float: left;
margin: 2vw;
}
И, наконец, мы добавим код 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
}
}]
});
});
Сохраните страницу и выйдите из Visual Builder Divi, чтобы отобразить результат.
В Visual Builder вы не увидите результат.
Итак, как только вы закончите, сохраните свою страницу, выйдите из Visual Builder и посмотрите результат на своем сайте!
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Скачайте DIVI прямо сейчас!!!
Заключение
Так ! Вот и все для этой статьи. Мы показали вам, как вывести дизайн модуля блога на новый уровень. В частности, мы показали вам, как превратить встроенный модуль блога Divi в карусель с помощью бесплатной библиотеки js.
Если вы хотите узнать больше о Divi, не стесняйтесь посетить наш каталог Учебники Диви. Вы также можете проконсультироваться Как создать страницу блога с помощью модуля Divi Blog
Смотрите также наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
