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

Как добавить модуль слайдера статьи в Divi Builder

Прежде чем вы сможете добавить модуль слайдера статей на свою страницу, вы должны сначала перейти в Divi Builder. После того, как Диви тема установленный на вашем веб-сайте, вы заметите кнопка Использовать Divi Builder выше издателя каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.

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

Найдите модуль «Слайдеры публикации» в списке модулей и щелкните по нему, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «Курсоры сообщений» и затем нажать «Ввод», чтобы автоматически найти и добавить модуль указателей сообщений! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .

Пример использования: слайдеры публикации (статьи) для отображения последних

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

Используя Visual Builder, добавьте новый стандартный раздел вверху страницы блога с строкой в ​​полную ширину (1 столбец). Затем вставьте модуль Post Slider в новую строку.

В разделе «Настройки курсора» обновите следующие параметры:

Параметры содержимого

Количество сообщений: 3

Варианты дизайна

Шрифт заголовка: Roboto (Capitals) Размер шрифта заголовка: 50 пикселей Цвет текста заголовка: # edef5d Расстояние между буквами заголовка: 1 пикселей Размер шрифта основного текста: 16 Пространство между буквами основного текста: 1 пикселей Высота строки основного текста: 1.4em Мета-шрифт: Open Sans, Курсив, верхний регистр. Размер мета-шрифта: 18 пикселей. Цвет метатекста: #cccccc. Высота мета-строки: 2em. Использование пользовательских стилей для кнопки: ДА. Размер текста: 26 пикселей. Цвет текста кнопки: # edef5d. Ширина кнопки: 0 пикселей. Значок кнопки:> Показать только значок

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

Вот так!

Модуль слайдера статьи с параметрами контента

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

Кол-во предметов (кол-во постов)

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

Включить категории

Выберите категории, которые вы хотите включить в слайдер.

Сортировать по

Здесь вы можете настроить порядок отображения статей.

Текст кнопки

Определите текст, который будет отображаться на кнопке «Подробнее». оставьте поле пустым по умолчанию (Подробнее)

Отображение содержимого

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

Использовать отрывок из статьи, если он определен

Отключите эту опцию, если вы хотите пропустить определенные вручную фрагменты и при этом автоматически генерировать их.

Длина автоэкстракции

Определите длину автоматически генерируемых отрывков. Оставьте поле пустым по умолчанию (270)

Показать стрелки

Этот параметр активирует и деактивирует стрелки навигации.

Показать элементы управления

Этот параметр включает и отключает кнопки в нижней части курсора.

Показать кнопку «Читать дальше»

Этот параметр включает и отключает кнопку «Читать далее».

Показать сообщение Meta

Этот параметр включает и отключает мета-раздел.

Показать избранное изображение

Этот параметр включает и выключает изображение, выбранное в ползунке.

Изображение места размещения

Выберите, как вы хотите отображать выбранное изображение на слайдах

Цвет фона

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

Фоновое изображение

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

Положение фонового изображения

Выберите CSS-расположение фонового изображения для каждого слайда.

Размер фонового изображения

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

Метка администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Параметры дизайна слайдера

На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.

Убрать внутреннюю тень

Это удалит внутреннюю тень CSS, применяемую по умолчанию ко всем слайдам.

Использовать наложение фона

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

Фоновый цвет наложения

Используйте палитру цветов, чтобы выбрать цвет фона.

Использовать наложение текста

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

Пограничный радиус текста

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

Используйте эффект параллакса

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

Метод параллакса

Здесь вы можете установить метод, используемый для эффекта параллакса - CSS или True Parallax.

Пользовательские Цветные Стрелки

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

Dot Nav Custom Color

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

Цвет текста

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

Шрифт заголовка

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

Размер шрифта заголовка

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

Цвет текста заголовка

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

Расстояние между буквами заголовка

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

Высота строки заголовка

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

Шрифт тела

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

Размер шрифта тела

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

Цвет текста тела

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

Расстояние между буквами тела

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

Высота линии тела

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

Мета Полиция

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

Размер шрифта Meta

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

Цвет метатекста

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

Интервал метаданных

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

Высота линии Meta

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

Верхняя обивка

Этот параметр управляет внутренним пространством между верхней частью модуля и текстовым содержимым в модуле. Если вы хотите увеличить или уменьшить это пространство, введите здесь желаемое значение. Например, чтобы уменьшить пространство и общий размер курсора, вы можете ввести значение 100 пикселей. Вы также можете ввести процентное значение, например 10%, чтобы сделать высоту более динамичной.

Нижняя обивка

Этот параметр управляет внутренним пространством между нижней частью модуля и текстовым содержимым в модуле. Если вы хотите увеличить или уменьшить это пространство, введите здесь желаемое значение. Например, чтобы уменьшить пространство и общий размер курсора, вы можете ввести значение 100 пикселей. Вы также можете ввести процентное значение, например 10%, чтобы сделать высоту более динамичной.

Используйте пользовательские стили для кнопки

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

Размер текста кнопки

Этот параметр можно использовать для увеличения или уменьшения размера текста на кнопке. Кнопка адаптируется по мере увеличения и уменьшения размера текста.

Цвет текста кнопки

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

Цвет фона кнопки

По умолчанию кнопки имеют прозрачный цвет фона. Это можно изменить, выбрав желаемый цвет фона в палитре цветов.

Ширина рамки

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

Цвет рамки кнопки

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

Рамка границы кнопки

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

Интервал букв кнопки

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

Полицейская кнопка

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

Добавить значок кнопки

Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки при наведении курсора.

Значок кнопки

Если значки включены, вы можете использовать этот параметр, чтобы выбрать, какой значок использовать на вашей кнопке. У Divi есть разные значки на выбор.

Кнопка со значком цвета

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

Кнопка размещения значков

Вы можете выбрать отображение значка вашей кнопки слева или справа от кнопки.

Показывать только значок при наведении курсора на кнопку

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

Цвет текста кнопки наведения

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

Цвет фона кнопки наведения

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

Кнопка ограничения цвета

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

Наведите указатель поворота границы

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

Кнопка разметки заметок

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

Расширенные настройки Post Slider

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS-идентификатор

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

Класс CSS

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

Пользовательский CSS

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

Автоматическая анимация

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

Скорость автоматической анимации (в мс)

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

Продолжить Автоматическое слайд на Hover

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

Скрыть контент на мобильных устройствах

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

Скрыть CTA на мобильном телефоне

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

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

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

дезактивировать

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

[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin