Отзывы на сайте помогают посетителю сделать выбор, зачастую это отзывы которые вы сами написали и подаете под соусом довольных клиентов, но надеюсь так не у всех. Именно о создании сетки отзывов для сайта мы сегодня хотим поговорить. Думаю каждый из вас хоть раз сталкивался с необходимости создания сетки или карусели с отзывами для клиентов. Мы будем использовать небольшой плагин jQuery, который добавляет отзывчивые, настраиваемые, вертикальные (или горизонтальные) отзывы на страницу вашего проекта.

 

Ведь отзывы-это отличный способ показать комментарии, и отзывы Ваших клиентов, чтобы повысить конверсию. Адаптивный дизайн у нас будет основан на CSS flexbox. Также вы можете найти множество интересных бесплатных шаблонов у наших партнеров:

Шаг 1. HTML

Вставьте библиотеку jQuery вместе с файлами плагина в вашу страницу где будут размещены отзывы:

Инициализируйте плагин Resonsive Testimonials в этом же документе:

Далее создаем разметку горизонтальных отзывов с классом-‘responsive-testimonals—layout-row’:

Также пример разметки горизонтальных отзывов с классом ‘responsive-testimonals—layout-col’:

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

Шаг 2. CSS

У нас будет целый набор классов полностью настраиваемых с помощью следующих классов CSS вместо JavaScript:

  • responsive-testimonals__list—align-h-left: По левому краю горизонтально;
  • responsive-testimonals__list—align-h-center: Горизонтально по центру;
  • responsive-testimonals__list—align-h-right: Горизонтально справа;
  • responsive-testimonals__list—align-v-top: Вертикально вверху;
  • responsive-testimonals__list—align-v-center: Вертикально по центру;
  • responsive-testimonals__list—align-v-bottom: Выравнивание снизу вертикально;
  • responsive-testimonals__list—align-v-stretch: Stretch-выравнивание по вертикали;
  • responsive-testimonals__item—layout-order-1: Порядок текста и изображения;
  • responsive-testimonals__item—layout-order-2: Порядок текста и изображения;
  • responsive-testimonals__item—align-aside-start: Положение контейнера изображений;
  • responsive-testimonals__item—align-aside-center: Положение контейнера изображений;
  • responsive-testimonals__item—align-aside-end: Положение контейнера изображений;
  • responsive-testimonals__content—align-h-left: выравнивание для горизонтального режима;
  • responsive-testimonals__content—align-h-center: выравнивание для горизонтального режима;
  • responsive-testimonals__content—align-h-right: выравнивание для горизонтального режима;
  • responsive-testimonals__content—align-h-justify: выравнивание для горизонтального режима;
  • responsive-testimonals__content—align-v-top: выравнивание для вертикального режима;
  • responsive-testimonals__content—align-v-center: выравнивание для вертикального режима;
  • responsive-testimonals__content—align-v-bottom: выравнивание для вертикального режима;
  • responsive-testimonals__rounded-x: скругление элементов. x может быть 0~20.

Вот и все. Готово!