# Секция "Настраиваемые карточки"

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

<figure><img src="/files/Z7ylKx7enzyXIo8pwJg4" alt="" width="563"><figcaption></figcaption></figure>

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

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

Чтобы добавить секцию "Настраиваемые карточки", нажмите на "+" в режиме редактирования вашего сайта:

<figure><img src="/files/5864MkYmoW7zaOwfG679" alt=""><figcaption></figcaption></figure>

Далее найдите в открывшемся меню секцию "Настраиваемые карточки" и кликните на него, чтобы секция добавилась на сайт. Секция будет добавлена на сайт, а для вас откроется меню настроек контента:

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

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

В меню редактировании секции "Настраиваемые карточки" контента вы увидите различные разделы для настроек: и стиля карточек, и изображений, кнопок и пр.&#x20;

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

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

<figure><img src="/files/yjjo0Ou32IrGDocbExES" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/rRWO1fHuFq4RrNbkVkTF" alt="" width="375"><figcaption></figcaption></figure>

Поля настроек карточки не являются обязательными: то есть вы можете пропустить, например, загрузку изображения для самой карточки или для иконки кнопки, не вставлять текст - все по вашему усмотрению.&#x20;

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

<figure><img src="/files/fnwzCVFwOixiUv8uA1tN" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/MghoPk8UMj6aYiglxuz4" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/MI0JYf8Ukdhsve3gznEi" alt="" width="375"><figcaption></figcaption></figure>

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

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

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

В конструкторе сайтов Сейлбот существует два стиля для карточек: простой и в виде слайдера.&#x20;

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

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

При применении стиля "Слайдер" карточки будут в виде карусели, тем самым вы добавите  больше динамичности сайту:&#x20;

<figure><img src="/files/i25Xjk1er1przBZ45Byl" alt="" width="375"><figcaption></figcaption></figure>

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

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

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

<div><figure><img src="/files/59puEUcJsmhnheGQiPtt" alt="" width="485"><figcaption></figcaption></figure> <figure><img src="/files/qGHrkEO6BlIvKLNEX5nc" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div><figure><img src="/files/PrhBBNFMIISNEEO5EvCN" alt="" width="479"><figcaption></figcaption></figure> <figure><img src="/files/3YveMUXgVhEtMeEfa2vC" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

Время задается в миллисекундах, где одна миллисекунда равна 0.001 секунды. Это значит, если вам необходимо задать 7 секунд, то вводите значение в поле 7000.&#x20;
{% endhint %}

Также можно выбрать вид карточки:&#x20;

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

а) стандартный вид без заголовка внутри карточки:

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

б) вид с заголовком внутри карточки:&#x20;

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

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

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

<figure><img src="/files/WOqBAavMmiz3EQNPxISL" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/EiipjAqy3dThtZNlfOAO" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/IqKr2cVeHj7kXox3mhCM" alt="" width="326"><figcaption></figcaption></figure>

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

<figure><img src="/files/EeZ5x7DT9ePlKJbGFSms" alt="" width="563"><figcaption></figcaption></figure>

1. **Количество карточек в строке** - текстовое поле, которое поможет установить необходимое количество карточек в одну строку (страницу):

<figure><img src="/files/FZ7sXXD4cgjnocJvw85k" alt="" width="254"><figcaption><p>Заданное количество карточек</p></figcaption></figure>

<div><figure><img src="/files/LQhcmUbguO8xEFPJ7vrL" alt=""><figcaption><p>Стиль "Простые карточки"</p></figcaption></figure> <figure><img src="/files/xVADUkxCVZYbZJTatEUS" alt=""><figcaption><p>Стиль "Слайдер" </p></figcaption></figure></div>

2. **Отступы  -** поля для ввода числовых значений, которые помогут увеличить или уменьшить горизонтальные/вертикальные отступы между карточек,  а также отступы внутри карточек,&#x20;

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

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

<figure><img src="/files/Hf9wrfKQrEv56CV2bpZc" alt="" width="393"><figcaption></figcaption></figure>

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

<figure><img src="/files/2pnTHC7jolz4vKG9ggCY" alt="" width="399"><figcaption></figcaption></figure>

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

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

А также вертикальной:

<figure><img src="/files/u14IVcFtf3Cf4cqr4iXu" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/IrYO55YcsVrhRJ3EzbE4" alt="" width="404"><figcaption></figcaption></figure>

а) по центру:

<figure><img src="/files/4s7EjSXJofHSFBPnSFWz" alt="" width="375"><figcaption></figcaption></figure>

б) по левому краю:

<figure><img src="/files/9KJgJYjyhnHy7PwWOPYI" alt="" width="375"><figcaption></figcaption></figure>

в) по правому краю:

<figure><img src="/files/ValzdMkhC1wEMaXtBN9T" alt="" width="375"><figcaption></figcaption></figure>

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

Поможет придать карточкам глубины и выделить их на фоне секции/страницы.&#x20;

<figure><img src="/files/dzRiXLfzB6b91UZYg9lc" alt="" width="563"><figcaption></figcaption></figure>

а) без тени:

<figure><img src="/files/7wudYBTfr518U7Aw8Pre" alt="" width="563"><figcaption></figcaption></figure>

б) легкая тень:

<figure><img src="/files/wcFFUrFkLuQZcJGolzGq" alt="" width="563"><figcaption></figcaption></figure>

в) сильная тень:

<figure><img src="/files/cVGWJr3YpMkKYP6sB3By" alt="" width="563"><figcaption></figcaption></figure>

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

Настройка изображений также применяется относительно всех изображений, которые вы добавили в карточку:&#x20;

<figure><img src="/files/MwjnoBtL0vKTbgplWclS" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/rpD7E3XX985BvzGRLf8h" alt="" width="396"><figcaption></figcaption></figure>

Поле принимает числовое значение в пикселях, если не задано, то отображается автоматически соразмерно настоящей ширине изображения в пикселях.&#x20;

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

<figure><img src="/files/hOJ4OmxycHNL8bI5dU3y" alt="" width="405"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/LnYFhhvfJSS2xAmIn3zr" alt="" width="393"><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/z50ry8xJo2M5UjDwTNaw" alt="" width="438"><figcaption></figcaption></figure>

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

д) чекбокс "Картинка после текста"&#x20;

<figure><img src="/files/epfzC26YU7TuNbzQhv7u" alt="" width="563"><figcaption></figcaption></figure>

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

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

## Настройка кнопок

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

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

<figure><img src="/files/t5A4MmOffhYu9PjN1oqJ" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/XDmyjEZDmyuKgDq2HVQU" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/NRJV0LNxbAic6hboSFWt" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/xe28TwaMBCqrnQjePvMp" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/u6zpV3wJEMhrwvKoGvvy" alt="" width="435"><figcaption></figcaption></figure>

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

<figure><img src="/files/zoS4Gvjby6QFGdDr7Whp" alt="" width="441"><figcaption></figcaption></figure>

а) по центру:

<figure><img src="/files/NUHp8b6O67clBim4aeud" alt="" width="375"><figcaption></figcaption></figure>

б) по левому краю:

<figure><img src="/files/9gfGzXOQ8P5rOg8jogV4" alt="" width="375"><figcaption></figcaption></figure>

в) по правому краю:

<figure><img src="/files/jDoQw50DeUDmPY0bS0KZ" alt="" width="375"><figcaption></figcaption></figure>

3. **Скруление кнопки -** поле, принимающее числовое значение в пикселях, для скругления углов кнопки:

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

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

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

5. **Отступы снаружи**&#x20;

Поможет настроить отступы для кнопки в карточке относительно верхнего, нижнего, левого и правого края:&#x20;

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

6. **Отступы внутри кнопки**

Поможет настроить отступы внутри кнопки:

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

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

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

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

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

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

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

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

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

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

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

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

1\) flash анимация кнопки:

<figure><img src="/files/X7gm82ocMAWq9AXmVf5p" alt="" width="251"><figcaption></figcaption></figure>

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

<figure><img src="/files/ixD1VHbYiV2JZK2uDa26" alt="" width="251"><figcaption></figcaption></figure>

{% hint style="success" %}
Готово! \
Теперь вы знаете, как создавать и настраивать карточки на своем сайте с нуля.&#x20;
{% 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.salebot.pro/websites/builder/sekcii-bloki/sekciya-nastraivaemye-kartochki.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.