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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Линии Divi преобразованы во вкладки

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

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

Линии Divi преобразованы во вкладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Показать управление: НЕТ
Компактный слайдер отзывов Divi

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

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

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

  • Градиент фона:
    • Остановки градиента 0%: #000000
    • Остановки градиента 100%: #000000
#image_title
  • Фоновая картинка :
    • Размер: подходит
    • Позиция: по центру слева
    • Смесь: яркость
#image_title

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Фон: #000000
Компактный слайдер отзывов Divi

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

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

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

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

Результат

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

#image_title

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

...