Перейти к основному контенту

Как работать с модулем «Карусель карточек» в REG.Site

Это один из 4-х модулей для создания каруселей. Об остальных можно прочитать в статье Как создать карусели в REG.Site.

Модуль «Карусель карточек» настраивается в два этапа:

  1. Настройка карточек.
  2. Настройка внешнего вида модуля.

Настройки карточки и модуля разделены на 3 вкладки: «Контент», «Дизайн», «Дополнительно». Вкладка «Дополнительно» предназначена для настройки CSS и HTML, поэтому в этой статье мы не будем её рассматривать.

Этап 1. Настройка карточек

Перейдём к настройке карточки. Чтобы перейти к настройке карточки, во вкладке «Контент» основных настроек модуля нажмите на иконку плюса:

Как работать с модулем «Карусель карточек» в REG.Site 1

Перед вами появятся вкладки «Контент», «Дизайн» и «Дополнительно».

Контент

В блоке «Текст» введите заголовок и подзаголовок. Во вкладке текст введите описание для изображения:

Как работать с модулем «Карусель карточек» в REG.Site 2

В блоке «Изображение и значок» загрузите нужное изображение. Для регулировки размеров картинки переведите переключатель «Использовать изображение в качестве фона» в положение ДА. Отрегулируйте размер картинки. Настройте анимацию: увеличение, уменьшение, увеличение или уменьшение с поворотом.

Как работать с модулем «Карусель карточек» в REG.Site 3

Если вы хотите, чтобы при клике изображение открывалось на весь экран, переведите переключатель «Открыть как изображение в лайтбоксе» в положение ДА. Загрузите изображение, которое должно открываться в лайтбоксе. Можно загрузить тоже самое изображение или, например, с другого ракурса.

Как работать с модулем «Карусель карточек» в REG.Site 4

В параметре «Текст значка» введите текст для значка на картинке:

Как работать с модулем «Карусель карточек» в REG.Site 5

Если вы хотите, чтобы значок отправлял на какую-либо страницу, в блоке «Ссылка» введите нужный URL-адрес.

Настройте кнопку, которая будет вести на страницу с дополнительной информацией. Для этого в блоке «Кнопка» введите текст кнопки, URL страницы, на которую должна вести кнопка.

Как работать с модулем «Карусель карточек» в REG.Site 6

Кнопка может вести не только на отдельную страницу, но и просто открывать лайтбокс с изображением. Чтобы сделать такую настройку, в параметре «Открыть как изображение в лайтбоксе» переведите переключатель в положение ДА и добавьте нужную картинку.

В блоке «Фон» можно установить фон карточки:

Как работать с модулем «Карусель карточек» в REG.Site 7

Дизайн

В блоке «Изображение» можно настроить ширину картинки и её расположение. Также можно закруглить углы изображения, добавить рамку, включить оверлей. Оверлей ― это наложение на изображение цветового слоя.

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

В этом же блоке настраивается шрифт, цвет, размер, тень, межбуквенный интервал текста в значке. В самом конце блока можно настроить форму значка.

В блоках «Заголовок Текст», «Тело Текст», «Подзаголовок Текст» можно настроить шрифт, цвет, размер, тень, межбуквенный интервал текста под картинкой.

Как работать с модулем «Карусель карточек» в REG.Site 8

Чтобы настроить внешний вид кнопки, в блоках «Кнопка» переведите переключатель «Использовать пользовательские стили для элемента» в положение ДА. Теперь вы сможете настроить размер, цвет, форму кнопки, а также шрифт, цвет, размер, тень, межбуквенный интервал текста внутри кнопки. Можно включить иконку, которая будет отображаться при наведении на кнопку.

Как работать с модулем «Карусель карточек» в REG.Site 9

С помощью блока ​​«Отступы» настраиваются отступы между изображением и текстом, а также отступы по краям. В блоке «Границы» можно настроить рамку для всей карточки.

Как работать с модулем «Карусель карточек» в REG.Site 10

Готово. Настройте остальные карточки по этой же инструкции.

Этап 2. Настройка внешнего вида модуля

Вернитесь в главное меню модуля. Для этого в левом верхнем углу панели настроек карточки нажмите на иконку стрелки:

Как работать с модулем «Карусель карточек» в REG.Site 11

Контент

В блоке «Настройка карусели» можно выбрать эффект прокрутки карусели (скольжение, обложкой, кувырок, кубом), направление прокрутки. Здесь же настраивается количество столбцов и строк, которые будут отображаться на сайте, и скорость прокрутки.

Если вы хотите, чтобы карточки прокручивались автоматически, в параметре «Автовоспроизведение» переведите переключатель в положение ДА. Укажите интервал воспроизведения. Можно включить паузу при наведении:

Как работать с модулем «Карусель карточек» в REG.Site 12

Чтобы карточки были одного размера, в параметре «Выровнять высоту карт» переведите переключатель в положение ДА. Ниже можно включить дополнительные элементы: стрелку для переключения карточек и пагинацию.

Как работать с модулем «Карусель карточек» в REG.Site 13

Дизайн

В блоке «Макет и выравнивание» можно выбрать один из 2-х видов макетов карточек: «сложены» и «в линию». На предыдущих скриншотах мы использовали макет «Сложены». Макет в линию выглядит вот так:

Как работать с модулем «Карусель карточек» в REG.Site 14

В блоке «Изображение» можно закруглить края картинки, добавить рамку и тени.

В блоке «Значок» настройте положение, цвет, форму, отступы значка, а также цвет, шрифт, межбуквенный интервал, тени текста внутри значка и рамку.

Как работать с модулем «Карусель карточек» в REG.Site 15

В блоке «Стрелка» настраивается положение стрелки на компьютерной и мобильной версии сайта. Она может быть внутри модуля или снаружи. Если вы хотите вручную настроить положение стрелки, в параметре «Использовать настраиваемое положение стрелки» переведите переключатель в положение ДА. В этом же блоке можно выбрать другую иконку стрелки.

Как работать с модулем «Карусель карточек» в REG.Site 16

Ниже в блоке «Стрелка» настраивается цвет, фон, форма фона стрелки и рамка:

Как работать с модулем «Карусель карточек» в REG.Site 17

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

С помощью блоков ​​«Отступы» отрегулируйте положение всего модуля на странице. В блоке «Границы» можно настроить рамку для всего модуля. В блоке «Анимация» настройте параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0