# Настраиваемые карточки

Раздел «Настраиваемые карточки» в конструкторе сайтов предназначен для тех, кто хочет легко и быстро представить ключевую информацию о своих товарах, услугах или отзывах клиентов. Эти блоки позволяют добавить на страницу сайта визуально привлекательные карточки, которые можно настроить под потребности вашего бизнеса.

<figure><img src="/files/dc7a72e8ad58560b7e7630e97a9faab593557533" alt=""><figcaption></figcaption></figure>

Независимо от того, хотите ли вы предоставить подробное описание курса, отзывы довольных клиентов или рекомендации по использованию ваших услуг, «Настраиваемые карточки» и «Карточки курса» помогут выделить информацию и сделать её более доступной и удобной для посетителей сайта.

## Как добавить блок?

Чтобы добавить раздел «Настраиваемые карточки», нажмите на «+» в режиме редактирования вашего сайта:

<figure><img src="/files/fd65dcc95c6d96d0c77dbd6d324667086fdc6416" alt=""><figcaption></figcaption></figure>

Далее найдите в открывшемся меню раздел «Настраиваемые карточки» и нажмите на него, чтобы добавить раздел на сайт. Раздел будет добавлен на сайт, и для вас откроется меню настроек контента:

<figure><img src="/files/574db000fb9d6e8147b3a5b569b60a0ecf29d28d" alt=""><figcaption></figcaption></figure>

## Как добавить карточку?&#x20;

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

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

Для этого прокрутите вниз в меню настроек контента и найдите кнопку «Добавить карточку»:

<figure><img src="/files/756c2ac055f40c704c06f0dbff3c81b9b3e17ae6" alt=""><figcaption></figcaption></figure>

Нажав на кнопку «Добавить карточку», вы увидите настройки карточки с пустым текстовым полем, полем для загрузки изображения для карточки и иконки кнопки, а также для текста самой кнопки:

<figure><img src="/files/aecabe388de36fb8bb2a7d6fda4ce941c67c54b2" alt=""><figcaption></figcaption></figure>

Поля настроек карточки необязательны: это значит, что вы можете пропустить, например, загрузку изображения для самой карточки или для иконки кнопки, не вставлять текст — всё на ваше усмотрение.

Если, например, вам не нужна кнопка со ссылкой в карточке, оставьте поля «Название кнопки» и «Ссылка» пустыми: тогда кнопки не будут отображаться в карточке.

<figure><img src="/files/edf9b44017122015e6e98dd6eb3f4fadffe78e3a" alt=""><figcaption></figcaption></figure>

Существуют различные настройки для текста карточки, аналогичные любому текстовому редактору, где можно настроить размер шрифта, контур шрифта, цвет, выделение, а также добавить ссылку и многое другое.

Для этого выделите текст (часть текста) и примените к нему необходимые настройки:

<figure><img src="/files/0d2653f5be0eb7fa13665980228a3d16e980f69b" alt=""><figcaption></figcaption></figure>

После того как вы полностью настроили первую карточку, добавьте следующую: для этого нажмите кнопку «Добавить карточку», которая находится ниже панели настроек первой добавленной карточки:

<figure><img src="/files/3be82cee6b6efcb256bae9e71e5796424f2fa4e2" alt=""><figcaption></figcaption></figure>

## Настройки карточек

{% hint style="info" %}
Карточки настраиваются в едином стиле: все настройки, которые вы используете в этом разделе, будут применены ко всем карточкам в одном и том же разделе.
{% endhint %}

### Стиль карточек

В конструкторе сайтов Mavibot есть два стиля карточек: простой и в виде слайдера.

При использовании простого стиля все карточки сразу будут отображаться на одной странице раздела сайта:

<figure><img src="/files/068f55fa80eb97b130db21511e2c4d99297c9246" alt=""><figcaption></figcaption></figure>

При использовании стиля «Слайдер» карточки будут в виде карусели, тем самым добавляя сайту больше динамики:

Для стиля слайдера можно выбрать, где будут расположены стрелки и точки карточки:

<figure><img src="/files/42374e44ab09fe869f06e6d16c6806552780ac2c" alt=""><figcaption></figcaption></figure>

Стрелки могут располагаться внутри слайдера, снаружи или быть скрытыми (например, если вы зададите таймер для автоматического пролистывания карточек):

<figure><img src="/files/412f4280578dc1e2a44f7db4939ba17a277d1126" alt=""><figcaption></figcaption></figure>

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

Чтобы автоматически пролистывать карточки, установите временной интервал для показа одной страницы:

<figure><img src="/files/c3e86e08a78f6a1535dc7c7ba0da5679864e9a25" alt=""><figcaption></figcaption></figure>

Если значение таймера установлено в 0, карточки не будут пролистываться автоматически.

{% hint style="warning" %}
Обратите внимание!&#x20;

Время задаётся в миллисекундах, где одна миллисекунда равна 0,001 секунды. Это значит, что если вам нужно установить 7 секунд, введите значение 7000 в поле.
{% endhint %}

Также вы можете выбрать тип карточки:

<figure><img src="/files/56772332e6fbf0e25730a7c216a7343c9e390820" alt=""><figcaption></figcaption></figure>

#### Настройки цвета элементов карточки

Чтобы настроить карточки под ваш стиль, используйте настройки цвета:

<figure><img src="/files/18e46de029121823383ae0772520f208ccc60a1c" alt=""><figcaption></figcaption></figure>

Настройки цвета применяются ко всем карточкам одновременно. Если вам нужно, чтобы цвет текста в каждой карточке был разным, используйте настройки в текстовом поле.

Для настройки цвета доступна обширная цветовая палитра:

<figure><img src="/files/4e263bfea9856e4a9ef8c00ea5815cfdb51b2be2" alt=""><figcaption></figcaption></figure>

И вы можете применить настройки цвета к любому элементу карточки.

#### Настройка границ и отступов

<figure><img src="/files/b7ec22928eea3c47744a9999ead1a5f28c981f2f" alt=""><figcaption></figcaption></figure>

1. **Количество карточек в строке** - текстовое поле, которое поможет задать нужное количество карточек в одной строке (на одной странице).
2. **Отступы —** это поля для ввода числовых значений, которые помогут увеличить или уменьшить горизонтальные/вертикальные промежутки между карточками, а также отступы внутри карточек,

<figure><img src="/files/0e0cf3e1ca5f4912a5f8a2ce232268a76a19ea69" alt=""><figcaption></figcaption></figure>

Вы можете задать общее числовое значение для внутреннего отступа в карточках или, нажав на шестерёнку в правом углу строки, задать отдельное значение для верхней, нижней, левой и правой границ:

<figure><img src="/files/dbcf34295fc82d85559405b8caee8b07f79eec31" alt=""><figcaption></figcaption></figure>

#### Ориентация карточки

<figure><img src="/files/51aa416c4aaefee7846e70c0b4f1382cfb01bf12" alt=""><figcaption></figcaption></figure>

Ориентация карточки может быть горизонтальной, а также вертикальной.

#### Выравнивание

Оно может быть по центру, по левому или правому краю.

<figure><img src="/files/3d1d86dd27307227928365f2572d024ec556faad" alt=""><figcaption></figcaption></figure>

#### Настройки тени

Это поможет добавить карточкам глубину и выделить их на фоне раздела/страницы.

<figure><img src="/files/09ec1dfb7289b73a8b09545c85a2feed88e1b701" alt=""><figcaption></figcaption></figure>

## Настройки изображения

Настройки изображения также применяются ко всем изображениям, которые вы добавили в карточку.

<figure><img src="/files/ec9f93ced817f5e60566c9e5e089b562dc7f01b5" alt=""><figcaption></figcaption></figure>

В настройках изображения необходимо задать:

a) ширина изображения:

<figure><img src="/files/331d9ab663af2354116fc08ccac23072aa4aea89" alt=""><figcaption></figcaption></figure>

Поле принимает числовое значение в пикселях; если оно не указано, отображается автоматически в соответствии с фактической шириной изображения в пикселях.

b) высота изображения:

<figure><img src="/files/8c68a79fdb01121a27b3ebcd6d431ba45d081516" alt=""><figcaption></figcaption></figure>

Поле принимает числовое значение в пикселях; если оно не указано, отображается автоматически пропорционально фактической высоте изображения.

c) скругление:

<figure><img src="/files/ff8825ed91087394bc7a05fdc29d3fd58b312486" alt=""><figcaption></figcaption></figure>

Поле, принимающее числовое значение в пикселях, помогает скруглить углы изображения:

<figure><img src="/files/3058be58454b8a5a4884501608b3f72209cb5619" alt=""><figcaption></figcaption></figure>

d) размер изображения:

<figure><img src="/files/5a821deef5cf1f838ee20ec68df78983b90013b5" alt=""><figcaption></figcaption></figure>

Настройка применяется, если необходимо заполнить/растянуть/позиционировать изображение относительно заданных ширины и высоты изображения.

e) флажок «Изображение после текста»

Если вы поставите галочку, изображение будет располагаться под текстом в карточке.

## Как настроить кнопки

<figure><img src="/files/ec19f6e05a3e6fae1ab32d54c200f76a7abfd9c5" alt=""><figcaption></figcaption></figure>

Текст **,** а также **ссылка** на страницу, по которой должен перейти посетитель сайта, настраиваются в самой карточке:

<figure><img src="/files/a4b2a94b79881336e2d07bd26f9080a29f98121a" alt=""><figcaption></figcaption></figure>

Также, помимо текста и ссылки, вы можете задать иконку для кнопки, загрузив изображение в карточке:

<figure><img src="/files/61dd0f191e687d68a5805bb4ce974d9972cb98a4" alt=""><figcaption></figcaption></figure>

Чтобы задать цвет текста и фон кнопки, используйте настройки здесь:

<figure><img src="/files/aa3382ce3dff26b433abba2d6f29d75c760f01b3" alt=""><figcaption></figcaption></figure>

Далее вы можете настроить размер, ширину и отступы для кнопки:

<figure><img src="/files/7110d31a426560492409c2fb425105454372cc14" alt=""><figcaption></figcaption></figure>

1. **Ширина кнопки** - это поле, принимающее числовое значение как в пикселях, так и в процентах:

<figure><img src="/files/bd91e886e94ef3178545f0c8f407c6645c222415" alt=""><figcaption></figcaption></figure>

2. **Выравнивание кнопки** - помогает установить кнопку в карточке относительно правого или левого края, а также по центру.

<figure><img src="/files/0ae15e2c6870803c460cfaf2099b74a5ffeb58dc" alt=""><figcaption></figcaption></figure>

3. **Радиус границы кнопки —** это поле, принимающее числовое значение в пикселях, для скругления углов кнопки:

<figure><img src="/files/fdcc94cd36c8c983c8267e3aad97fa94f24d9172" alt=""><figcaption></figcaption></figure>

4. **Ширина границы —** это поле, принимающее числовое значение в пикселях, для задания толщины обводки кнопки:

<figure><img src="/files/b4ef0137756b553a98943235fe09d1ab6b8322c7" alt=""><figcaption></figcaption></figure>

5. **Внешний отступ**&#x20;

Он помогает настроить отступы для кнопки в карточке относительно верхнего, нижнего, левого и правого краёв.

<figure><img src="/files/e8a18a80c1376f24d8f8d6fe83c1d8f2a7bd8d7b" alt=""><figcaption></figcaption></figure>

6. **Внутренний отступ**

Он помогает настроить отступы внутри кнопки.

<figure><img src="/files/914bec44d91f820b387bc1a4a014be874a1dfa7c" alt=""><figcaption></figcaption></figure>

7. **Иконка**

Если вы загрузили иконку для кнопки в карточке, то иконку можно подогнать по размеру:

<figure><img src="/files/931348edf9a67e600d2abc0223291880afa67c8d" alt=""><figcaption></figcaption></figure>

А также задать положение иконки относительно текста слева или справа:

<figure><img src="/files/f9b6cb650b455a9d9de29514b51202c8646cf664" alt=""><figcaption></figcaption></figure>

8. **Тень для кнопки**

Тень можно задать не только для карточки, но и отдельно для кнопки. Для этого достаточно найти в настройках кнопки выпадающее поле с названием «Тень» и выбрать степень интенсивности тени: светлая или сильная:

<figure><img src="/files/29e477656bcbd06c89a16e2f5f29d65e808ffd7b" alt=""><figcaption></figcaption></figure>

9. **Анимация кнопки**

<figure><img src="/files/d9c1d0fcb94daa283d5c656ed624293b85d748d7" alt=""><figcaption></figcaption></figure>

Она помогает привлечь внимание клиентов (пользователей сайта) к целевому действию на кнопке и добавить динамики сайту:

1\) анимация кнопки вспышкой:

<figure><img src="/files/a8ad03c110130277280e733287e395b31ddc07a2" alt=""><figcaption></figcaption></figure>

2\) анимация кнопки риппер:

<figure><img src="/files/7bb64000dd2f886ce440ef0156756ebdae254a02" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Готово! \
Теперь вы знаете, как создавать и настраивать карточки на вашем сайте с нуля.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/ru/websites/saity/blocks/cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.