Раздел «Настраиваемые карточки» в конструкторе сайтов предназначен для тех, кто хочет легко и быстро представить ключевую информацию о своих товарах, услугах или отзывах клиентов. Эти блоки позволяют добавлять на страницу сайта визуально привлекательные карточки, которые можно настроить в соответствии с потребностями вашего бизнеса.
Независимо от того, хотите ли вы предоставить подробное описание курса, отзывы довольных клиентов или рекомендации по использованию ваших услуг, «Настраиваемые карточки» и «Карточки курсов» помогут выделить информацию и сделать ее более доступной и удобной для посетителей сайта.
Как добавить блок?
Чтобы добавить раздел «Настраиваемые карточки», нажмите на «+» в режиме редактирования вашего сайта:
Затем найдите раздел «Настраиваемые карточки» в открывшемся меню и нажмите на него, чтобы добавить раздел на сайт. Раздел будет добавлен на сайт, и для вас откроется меню настроек содержимого:
Как добавить карточку?
В меню редактирования раздела «Настраиваемые карточки» вы увидите различные разделы для настройки: стиль карточек, изображения, кнопки и т.д.
Для вашего удобства вы можете сначала добавить карточки, чтобы увидеть, как настройки стиля применяются к карточкам.
Для этого прокрутите вниз в меню настроек содержимого и найдите кнопку «Добавить карточку»:
Нажав на кнопку «Добавить карточку», вы увидите настройки карточки с пустым текстовым полем, панелью для загрузки изображения для карточки и для иконки кнопки, а также для текста самой кнопки:
Поля настроек карточки являются необязательными: это означает, что вы можете пропустить, например, загрузку изображения для самой карточки или для иконки кнопки, не вставляя текст — все на ваше усмотрение.
Если, например, вам не нужна кнопка со ссылкой в карточке, оставьте поля «Название кнопки» и «Ссылка» пустыми: тогда кнопки не будут отображаться в карточке.
Существуют различные настройки для текста карточки, аналогичные любому текстовому редактору, где вы можете настроить размер шрифта, контур шрифта, цвет, выделение, а также добавить ссылку и многое другое.
Для этого выделите текст (часть текста) и примените к нему необходимые настройки:
После того как вы полностью настроили первую карточку, добавьте следующую: для этого нажмите на кнопку «Добавить карточку», которая находится под панелью настроек первой добавленной карточки:
Настройки карточек
Карточки настраиваются в едином стиле: все настройки, которые вы используете в этом разделе, будут применены ко всем карточкам в этом же разделе.
Стиль карточек
В конструкторе сайтов Mavibot доступны два стиля для карточек: простой и в виде слайдера.
При использовании простого стиля все карточки будут сразу отображаться на одной странице раздела сайта:
При использовании стиля «Слайдер» карточки будут в виде карусели, что добавит сайту больше динамики:
Для стиля слайдера вы можете выбрать, где будут располагаться стрелки и точки карточек:
Стрелки могут располагаться внутри слайдера, снаружи или быть скрытыми (например, если вы установили таймер для автоматического перелистывания карточек):
Точки также могут располагаться внутри слайдера, снаружи или быть скрытыми.
Для автоматической прокрутки карточек установите временной интервал отображения одной страницы:
Если значение таймера установлено на 0, карточки не будут автоматически прокручиваться.
Обратите внимание!
Время задается в миллисекундах, где одна миллисекунда равна 0,001 секунды. Это означает, что если вам нужно установить 7 секунд, введите значение в поле 7000.
Вы также можете выбрать тип карточки:
Настройки цвета для элементов карточки
Чтобы настроить карточки под свой стиль, используйте настройки цвета:
Настройки цвета применяются ко всем карточкам одновременно. Если вам нужен разный цвет текста в каждой карточке, используйте настройки в текстовом поле.
Для настройки цвета доступна обширная цветовая палитра:
И вы можете применить настройки цвета к любому элементу карточки.
Настройка границ и отступов
- Количество карточек в строке — текстовое поле, которое поможет вам задать необходимое количество карточек в одной строке (странице).
- Отступы — поля для ввода числовых значений, которые помогут увеличить или уменьшить горизонтальные/вертикальные отступы между карточками, а также отступы внутри карточек.
Вы можете задать общее числовое значение для отступа внутри карточек или, нажав на шестеренку в правом углу строки, задать отдельное значение для верхней, нижней, левой и правой границ:
Ориентация карточки
Ориентация карточки может быть горизонтальной, а также вертикальной.
Выравнивание
Может быть по центру, по левому или правому краю.
Настройки тени
Поможет добавить глубину карточкам и выделить их на фоне раздела/страницы.
Настройки изображения
Настройки изображения также применяются ко всем изображениям, которые вы добавили в карточку.
В настройках изображения необходимо задать:
а) ширину картинки:
Поле принимает числовое значение в пикселях, если не указано, отображается автоматически в соответствии с фактической шириной изображения в пикселях.
б) высоту изображения:
Поле принимает числовое значение в пикселях, если не указано, отображается автоматически пропорционально фактической высоте изображения.
в) скругление:
Поле, принимающее числовое значение в пикселях, помогает скруглить углы изображения:
г) размер изображения:
Настройка применяется, если необходимо заполнить/растянуть/позиционировать изображение относительно заданных ширины и высоты для изображения.
д) флажок «Изображение после текста»
Если установить флажок, изображение будет располагаться под текстом в карточке.
Как настроить кнопки
Текст, а также ссылка на страницу, на которую должен нажать посетитель вашего сайта, настраиваются в самой карточке:
Также, помимо текста и ссылки, вы можете установить иконку для кнопки, загрузив изображение в карточку:
Чтобы задать цвет текста и фона кнопки, используйте настройки здесь:
Затем вы можете настроить размер, ширину и отступы для кнопки:
- Ширина кнопки — поле, принимающее числовое значение как в пикселях, так и в процентах:
- Выравнивание кнопки — помогает установить кнопку в карточке относительно правого или левого края, а также по центру.
- Радиус границы кнопки — поле, принимающее числовое значение в пикселях для скругления углов кнопки:
- Ширина границы — поле, принимающее числовое значение в пикселях для установки ширины контура кнопки:
- Внешний отступ
Помогает настроить отступы для кнопки в карточке относительно верхнего, нижнего, левого и правого краев.
- Внутренний отступ
Помогает настроить отступы внутри кнопки.
- Иконка
Если вы загрузили иконку на кнопку в карточке, то иконку можно настроить по размеру:
А также задать положение иконки относительно текста слева или справа:
- Тень для кнопки
Тень можно задать не только для карточки, но и отдельно для кнопки. Для этого достаточно найти в настройках кнопки выпадающее поле с названием «Тень» и выбрать степень интенсивности тени: легкая или сильная:
- Анимация кнопки
Помогает привлечь внимание клиентов (пользователей сайта) к целевому действию на кнопке и добавить динамики сайту:
1) анимация вспышки кнопки:
2) анимация пульсации кнопки:
Готово!
Теперь вы знаете, как создавать и настраивать карточки на своем сайте с нуля.