Divi: как создать компактный слайдер отзывов для заголовка

Хотите вставить компактный слайдер с отзывами в заголовок Divi?

Добавление отзывов на ваш сайт — эффективный способ повысить авторитет вашей компании (или бренда) и укрепить доверие посетителей. 

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

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

Для этого мы собираемся модифицировать модуль Divi Slider интересным и уникальным способом.

Давайте начнем!

Но прежде чем вы сможете открыть для себя наше руководство по Divi, лучшая и самая простая в использовании тема WordPress в мире

обследование

Вот компактный слайдер отзывов, который мы создадим с помощью модуля Slider в Divi.

А вот тот же слайдер отзывов, добавленный в глобальный заголовок.

А вот как это выглядит на мобильном телефоне.

Создайте новую страницу с помощью Divi Builder

Для начала вам нужно будет сделать следующее:

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

Затем нажмите Начать строительство (Построить с нуля)

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

Как создать компактный слайдер отзывов в Divi

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

Для начала добавьте в раздел строку из одного столбца.

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

Изменить слайд

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

Содержание слайда

Под "КонтентВ настройках слайда обновите следующее:

• Название: «Donec solicitudin molestie malesuada. Vivamus sucipit tortor eget.
• Кнопка: прочитать все
• Тело: — Татьяна Гагельман

После этого сохраните настройки слайда.

Читайте также: Divi: как использовать настройки фоновой маски и параметры преобразования узора

Обновить настройки ползунка

Дублирование слайдов и скрытие элементов управления

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

Далее, в группе опций. Elements, скройте ползунки, обновив следующее:

• Показать управление: НЕТ

Обновите фон всех слайдов.

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

Чтобы добавить фон, обновите следующие элементы:

• Градиент фона:
  • Остановки градиента 0%: #000000
  • Остановки градиента 100%: #000000

• Фоновая картинка :
  • Размер: подходит
  • Позиция: по центру слева
  • Смесь: яркость

Настройки слайдера

Под вкладкой Дизайн, обновите следующее:

обложка

• Использовать наложение фона: ДА
• Цвет наложения фона: rgba (0,0,0,0.7)

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

• Название:
  • Уровень заголовка: H4
  • Шрифт: Джозефин Санс
  • Вес шрифта: средний
  • Выравнивание текста: по левому краю
  • Размер текста: 16 пикселей (для ПК и планшетов), 14 пикселей (для телефонов)
  • Высота строки: 1,5 см

текст тела

• Тело :
  • Шрифт: Джозефин Санс
  • Выравнивание текста: по левому краю
  • Цвет текста: #аааааа
  • Расстояние между буквами: 0,05em

кнопка

• Использовать нестандартный размер кнопки: ДА
• Кнопка:
  • Размер текста: 1em
  • Цвет текста: по умолчанию (рабочий стол), #000 (при наведении)
  • Цвет фона (рабочий стол): rgba (255,255,255,0.19 XNUMX XNUMX, XNUMX)
  • Цвет фона (при наведении): #ffffff
  • Ширина границы: 0 пикселей
  • Расстояние между буквами: 0,05em
  • Шрифт: Джозефин Санс
  • Поле: 0 пикселей (сверху и снизу)
  • Отступы: 0 пикселей (сверху и снизу), 0,6 em (слева и справа)

Автозаполнение и анимация

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

• Поле: 0 пикселей (сверху и снизу)
• Отступы: 1em (сверху и снизу), 5% (слева и справа)
• Автоматическая анимация: ВКЛ.
• Скорость автоматической анимации: 3500

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

Под вкладкой Фильтр, добавьте следующий пользовательский CSS, чтобы обновить стиль каждого элемента слайдера (заголовок, кнопка и стрелки)

Название слайда

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

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

Кнопка слайда

position:absolute;
bottom: 1em;
right: 6%;

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

Перетащите стрелки

font-size: 30px;
margin-top: -15px;

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

Совет: для более плавных переходов между слайдами добавьте к колонке тот же цвет фона.

Для этого откройте настройки родительского столбца слайдера и добавьте следующий цвет фона:

• Фон: #000000

Добавление фоновых изображений автора на слайд.

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

После добавления фонового изображения к слайду, оно унаследует стили, уже заданные в настройках слайдера (а не в настройках слайда).

Результат

Проверьте конечный результат.

Добавил компактный слайдер отзывов в шаблон заголовка.

Сохраните модуль в библиотеке Divi.

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

Это можно сделать, наведя курсор на модуль «Слайдер» и нажав на значок «».Добавить в библиотекуДалее, дайте макету имя и нажмите кнопку "".Сохранить в библиотеку".

Добавлен компактный макет модуля отзывов в шаблон заголовка.

Отредактируйте пользовательский заголовок

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

Доступ к Divi > Конструктор темЗатем нажмите на значок, позволяющий редактировать "Пользовательский заголовок".

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

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

В моде "Вставить модуль", выберите вкладку "Добавить из библиотеки". Найдите компактный слайдер отзывов, который вы сохранили ранее в библиотеке, и выберите его.

После загрузки сохраните изменения.

Смотрите также: Divi: как отобразить модуль заголовка Fullwidth в полноэкранном режиме

Конечный результат

Ниже приведен слайдер отзывов, добавленный в глобальный заголовок.

Здесь представлен слайдер с отзывами, но без фоновых изображений авторов.

А вот как это выглядит на мобильном телефоне.

Скачайте DIVI прямо сейчас!!!

Заключение

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

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

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...