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

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

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

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

Sneak Peek

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

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

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

Загрузите макет и шаблон БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Импортируйте макет в библиотеку Divi

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера. Это будет файл JSON с именем «divi-short-testimonial-slider-module-layout.json».

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Импортируйте шаблон заголовка в конструктор тем Divi

Если вы хотите импортировать шаблон заголовка с компактным слайдером отзывов, добавленным к заголовку, вам нужно будет перейти в Divi> Theme Builder.

Затем используйте значок переносимости в правом верхнем углу страницы, чтобы импортировать файл JSON. Это будет файл с именем «divi-short-testimonial-slider-header-template.json».

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

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

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

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

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

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

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

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

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

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

На вкладке содержимого настроек слайда обновите следующее:

• Название: «Donec sollicitudin molestie malesuada. Vivamus suscipit toror eget ».
• Текст кнопки: Читать все
• Тело: - Татьяна Гагельман

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

Обновить настройки слайдера

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

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

Затем в группе параметров «Элементы» скройте элементы управления ползунком, обновив следующее:

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

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

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

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

• Цвет фонового градиента слева: # 000000
• Правый цвет градиента фона: # 000000
• Размер фонового изображения: По размеру
• Положение фонового изображения: по центру слева
• Смешивание фонового изображения: яркость

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

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

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

Оверлей

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

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

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

Основной текст

• Шрифт: Josefin Sans
• Выравнивание основного текста: по левому краю
• Цвет основного текста: #aaaaaa
• Интервал между буквами основного текста: 0,05 мкм

Кнопка

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

Отступы и автоматическая анимация

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

• Поля: сверху 0 пикселей, снизу 0 пикселей
• Заполнение: 1em сверху, 1em снизу, 5% слева, 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> Theme Builder, затем щелкните, чтобы отредактировать настраиваемый заголовок для шаблона.

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

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

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

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

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

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

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

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

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!