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