Хотите вставить компактный слайдер с отзывами в заголовок 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.
Вы можете сделать это, наведя указатель мыши на модуль Slider и нажав кнопку " Добавить в библиотеку“. Затем дайте имя раскладке и нажмите на кнопку " Сохранить в библиотеку".
В шаблон заголовка добавлен компактный макет модуля отзывов.
Изменить пользовательский заголовок
Как только новый модуль слайдера отзывов будет сохранен в библиотеке, мы готовы добавить его в настраиваемый заголовок.
Доступ к Divi > Конструктор тем, затем щелкните значок, позволяющий изменить " Пользовательский заголовок".
Вставьте сохраненный модуль слайдера отзывов из библиотеки
В редакторе макета заголовка нажмите, чтобы добавить компактный модуль ползунка отзывов туда, где вы хотите, чтобы он отображался.
В моде «Вставить модуль», выберите вкладку «Добавить из библиотеки». Найдите компактный слайдер отзывов, который вы сохранили ранее в библиотеке, и выберите его.
После загрузки сохраните изменения.
Смотрите также: Divi: как отобразить модуль заголовка Fullwidth в полноэкранном режиме
Конечный результат
Ниже приведен слайдер отзывов, добавленный в глобальный заголовок.
Здесь у нас есть слайдер отзывов без фоновых изображений автора.
А вот как это выглядит на мобильном телефоне.
Скачайте DIVI прямо сейчас!!!
Заключение
Компактный слайдер отзывов может стать новым дополнением к заголовку чего угодно. Веб-сайт стремясь повысить доверие к своим услугам на самом видном месте своего веб-сайта.
Вы также можете использовать его для перенаправления посетителей на страницу отзывов или страницу продаж, чтобы увеличить конверсию. Мы надеемся, что это будет полезно для вас в ваших следующих проектах Divi.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...