# Налаштовувані картки

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

<figure><img src="/files/9a059bb633fd91b94bc04239c7ce4db3dd54030c" alt=""><figcaption></figcaption></figure>

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

## Як додати блок?

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

<figure><img src="/files/088d152df659d0b0eb60f34fcdc27f057a48156c" alt=""><figcaption></figcaption></figure>

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

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

## Як додати картку?&#x20;

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

Для вашої зручності ви можете спочатку додати картки, щоб побачити, як налаштування стилю застосовуються до карток.

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

<figure><img src="/files/76154936e27343419896decaeed19e6195b3d25d" alt=""><figcaption></figcaption></figure>

Натиснувши кнопку «Додати картку», ви побачите налаштування картки з порожнім текстовим полем, панеллю для завантаження зображення для картки та для іконки кнопки, а також для тексту самої кнопки:

<figure><img src="/files/36cc328c77b8370bf9bd449ab93993eb51f2114e" alt=""><figcaption></figcaption></figure>

Поля налаштування картки є необов’язковими: це означає, що ви можете, наприклад, пропустити завантаження зображення для самої картки або для іконки кнопки, не вставляючи текст — усе на ваш розсуд.

Якщо, наприклад, вам не потрібна кнопка з посиланням у картці, залиште поля «Назва кнопки» і «Посилання» порожніми: тоді кнопки не відображатимуться в картці.

<figure><img src="/files/306f32b402607078c4db98f05b2dee65be4eaa36" alt=""><figcaption></figcaption></figure>

Для тексту картки доступні різні налаштування, подібні до будь-якого текстового редактора, де ви можете змінювати розмір шрифту, накреслення шрифту, колір, виділення, а також додавати посилання та інше.

Для цього виділіть текст (частину тексту) і застосуйте до нього необхідні налаштування:

<figure><img src="/files/6992e7b04264a13d92fd5ef78c0e05ab2b395429" alt=""><figcaption></figcaption></figure>

Після того як ви повністю налаштували першу картку, додайте наступні: для цього натисніть кнопку «Додати картку», яка розташована під панеллю налаштувань першої доданої картки:

<figure><img src="/files/656677b9511ae4ee7e651f27dec0ea3b3ec4541d" alt=""><figcaption></figcaption></figure>

## Налаштування карток

{% hint style="info" %}
Картки налаштовуються в єдиному стилі: усі налаштування, які ви використовуєте в цьому розділі, будуть застосовані до всіх карток у цьому ж розділі.
{% endhint %}

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

У конструкторі сайтів Mavibot є два стилі карток: простий і у формі слайдера.

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

<figure><img src="/files/8970541a7b9c8f57f0dbbfce3a84cf31806a0f0a" alt=""><figcaption></figcaption></figure>

При використанні стилю «Слайдер» картки будуть у вигляді каруселі, що додасть сайту більшої динамічності:

Для стилю слайдера ви можете вибрати, де будуть розташовані стрілки та точки картки:

<figure><img src="/files/56f5b25e44ab03cdee5f158df9b095e2ffdb826d" alt=""><figcaption></figcaption></figure>

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

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

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

Щоб автоматично прокручувати картки, встановіть часовий інтервал для відображення однієї сторінки:

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

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

{% hint style="warning" %}
Зверніть увагу!&#x20;

Час задається в мілісекундах, де одна мілісекунда дорівнює 0,001 секунди. Це означає, що якщо вам потрібно встановити 7 секунд, то введіть значення 7000 у поле.
{% endhint %}

Ви також можете вибрати тип картки:

<figure><img src="/files/9d5f2f211e8ab7b40e70dbc18616022c194e0091" alt=""><figcaption></figcaption></figure>

#### Налаштування кольору елементів картки

Щоб налаштувати картки під ваш стиль, використовуйте налаштування кольору:

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

Налаштування кольору застосовуються до всіх карток одночасно. Якщо вам потрібно, щоб колір тексту в кожній картці був різним, тоді використовуйте налаштування в текстовому полі.

Для налаштування кольору доступна широка палітра кольорів:

<figure><img src="/files/1471178d728c221de5c4d3c8272b19314a3d3565" alt=""><figcaption></figcaption></figure>

І ви можете застосувати налаштування кольору до будь-якого елемента картки.

#### Налаштування меж і відступів

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

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

<figure><img src="/files/773afa641cad0418f05a73d658eb8a733217c8e9" alt=""><figcaption></figcaption></figure>

Ви можете встановити спільне числове значення для відступу всередині карток або, натиснувши на шестерню в правому куті рядка, задати окреме значення для верхньої, нижньої, лівої та правої межі:

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

#### Орієнтація картки

<figure><img src="/files/529879484fe400aef3fdbaec410a9d2a7bfc87c2" alt=""><figcaption></figcaption></figure>

Орієнтація картки може бути горизонтальною, а також вертикальною.

#### Вирівнювання

Може бути по центру, по лівому або правому краю.

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

#### Налаштування тіні

Це допоможе додати карткам глибини та виділити їх на тлі розділу/сторінки.

<figure><img src="/files/6831ab85a226b1638e63230990eb03a61cca10db" alt=""><figcaption></figcaption></figure>

## Налаштування зображення

Налаштування зображення також застосовуються до всіх зображень, які ви додали в картку.

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

У налаштуваннях зображення потрібно задати:

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

<figure><img src="/files/31c22fe2fdf54fbb4cac57231d862fbfd7de7990" alt=""><figcaption></figcaption></figure>

Поле приймає числове значення в пікселях, якщо не вказано, воно відображається автоматично відповідно до фактичної ширини зображення в пікселях.

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

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

Поле приймає числове значення в пікселях, якщо не вказано, воно відображається автоматично пропорційно фактичній висоті зображення.

c) заокруглення:

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

Поле, яке приймає числове значення в пікселях, допомагає заокруглити кути зображення:

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

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

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

Налаштування застосовується, якщо необхідно заповнити/розтягнути/розташувати зображення відносно заданої ширини та висоти зображення.

e) прапорець «Зображення після тексту»

Якщо ви встановите прапорець, зображення буде розташоване під текстом у картці.

## Як налаштувати кнопки

<figure><img src="/files/206818e75b237e31c02bb908dd4a7005e12a0964" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/62ad4fee9161b0e33a9e47d2c26b357e2514ac07" alt=""><figcaption></figcaption></figure>

Також, окрім тексту та посилання, ви можете встановити іконку для кнопки, завантаживши зображення в картці:

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

Щоб встановити колір тексту та фону кнопки, використовуйте налаштування тут:

<figure><img src="/files/2c2799a20dfc0cb7c29aa28494a45fc31d42870d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/6ccb25c3aa3931da553a5aae45efbbeb1b91da63" alt=""><figcaption></figcaption></figure>

1. **Ширина кнопки** - це поле, яке приймає числове значення як у пікселях, так і у відсотках:

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

2. **Вирівнювання кнопки** - допомагає встановити кнопку в картці відносно правого або лівого краю, а також по центру.

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

3. **Радіус межі кнопки -** це поле, яке приймає числове значення в пікселях для заокруглення кутів кнопки:

<figure><img src="/files/73c0c9d501a42f56e9e5d8c6d95a0cb2e8ee741e" alt=""><figcaption></figcaption></figure>

4. **Ширина межі -** це поле, яке приймає числове значення в пікселях для встановлення ширини обведення кнопки:

<figure><img src="/files/53323c02b7d82e66e545b10e08465aa95accaab4" alt=""><figcaption></figcaption></figure>

5. **Зовнішній відступ**&#x20;

Це допомагає вам налаштувати відступи для кнопки в картці відносно верхнього, нижнього, лівого та правого краю.

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

6. **Внутрішній відступ**

Це допомагає вам налаштувати відступи всередині кнопки.

<figure><img src="/files/69d19f4618f123f58c44ef89c135c762689d54f9" alt=""><figcaption></figcaption></figure>

7. **Іконка**

Якщо ви завантажили іконку для кнопки в картці, то іконку можна налаштувати під:

<figure><img src="/files/33868b6e1c62a30cf9dd87b91f9a31c135bcce24" alt=""><figcaption></figcaption></figure>

А також встановити положення іконки відносно тексту ліворуч або праворуч:

<figure><img src="/files/11d6af53609472574683a23f2532a10bbafa28ae" alt=""><figcaption></figcaption></figure>

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

Тінь можна встановити не лише для картки, а й окремо для кнопки. Для цього достатньо знайти спадне поле з назвою «Тінь» у налаштуваннях кнопки та вибрати ступінь інтенсивності тіні: легка або сильна:

<figure><img src="/files/66a1ba9f5766299655cf913b07e029f8eabbe1ff" alt=""><figcaption></figcaption></figure>

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

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

Це допомагає привернути увагу клієнтів (користувачів сайту) до цільової дії на кнопці та додати сайту динамічності:

1\) анімація кнопки спалаху:

<figure><img src="/files/28225647f554a89f9058992fca673ecc677d1219" alt=""><figcaption></figcaption></figure>

2\) анімація кнопки ripper:

<figure><img src="/files/3e8c778dd3df9ebc35d08d01286965ad275fe477" 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/uk/websites/saiti/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.