Создавая сайт с помощью различных конструкторов сайта, может при выборе уже готового сайта мы часто видим определенные элементы. К таким элементам относится и "карусель отзывов". Данный элемент на мой скептический взгляд только отпугивает клиентов при неправильно использовании и бездумном применении его для любого сайта. Основная причина такого поведения, что люди перестали относится к данному информационному блоку как к правде, а воспринимают его даже ложью.
Изначально вывод отзывов придуман не просто как элемент дизайна, а именно реальные отзывы от покупателей. Правда выглядело это немного по другому, например в виде карточек, письменных сканированных копий отзывов и прочее. А вот в виде карусели это просто этап эволюции, который происходит в мире вебдизайна и юзабилити. Поэтому если у вас нет реальных отзывов подкрепленных какой то обратной связью или узнаваемыми людьми, то лучше не используйте карусель отзывов на своем сайте. А вот если у вас все это имеется и вы создаете сайт в конструкторе сайта elementor, то для это есть специальный виджет.
Виджет "Карусель отзывов" предназначен для вывода отзывов в виде карусели. В виджете есть все основные составляющие отзыва, это сам отзыв, фио человека, его фото и должность. Карусель может быть представлена в двух стилевых вариантах и в 5 вида расположения макета (т.е фото сверху, слева итд). Так же естьвозможность управления настройками самой карусели т.е изменить скорость, убрать стрелки итд т.е стандартные настройки для каруселей.
Посмотрим на свойства виджета и его настройки.
Содержимое
- Слайды
- Слайды - элементы настроек (в данном случаи это слайд отзыва). Возможно внести такие данные как содержимое отзыва, изображение, имя и заголовок (должность).
- Стиль - стиль для карусели отзывов. Доступно два стиля это обычный по умолчанию и бабл, что то вроде стилевого оформления в виде подсказки над изображением.
- Макет - расположения фото, относительно элементов отзыва. Горизонтально и вертикально - фото смещается вокруг заголовка, а слева сверху справа - фото смещается относительно описания т.е относительно самого отзыва.
- Выравнивание - выравнивание всех данных виджета относительно блока (Лево Центр Право)
- Слайдов за раз - количество слайдов отображаемых в виджете (по умолчанию 1 слайд)
- Прокручивать слайдов - количество прокручиваемых слайдов за одну инерцию.
- Ширина - ширина блока с отзывами (пригодится если нужно сделать больше отстутов от стрелок навигации)
- Дополнительные опции
Присутствую все стандартные настройки карусели, описанные в предыдущей статье про медиа карусель.
- Стрелки, Нумерация страниц
Управление видом навигации и способом управления карусели отзывов. - Длительность перехода
Настойка свойств длительности эффекта перехода при листании. - Листать автоматически, Скорость листания
Автоматический старт карусели при загурзки страницы и пауза между инерцией автоматического листания. - Зациклить листание, Пауза при взаимодействии
Циклическое листание карусели по кругу и пауза листания при наведении курсором на отзыв. - Размер изображения - размер изображения. Можно выбрать свой размер или из тех что настроены в теме.
Стиль
- Слайды
Настройка стилей для слайда. Можно изменить расстояние между слайдами, цвет и размер границ слайдом, а так же установить фон под слайдом, настроить скругление углов и внутренние отступы.
- Содержимое
Для описания возможно настроить отступы текста (разрыв). А вот цвет текста и ее типографику, можно настроить как для описания, так и для имени и заголовка в отдельности. Т.е свойства каждой настройки разделены по группам опций.
- Изображение
У изображение можно изменить скругление углов, размер границы, отступы изображения и его размер. Размер изображения указывается в пикселях с равными сторонами т.е если указать 100, то это значит изображение размером 100x100 пикселей.
- Навигация
У стрелок и нумерации страниц мы можем изменить их цвет и размер. Для каждой настройки свои свойства.
=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================