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

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

Можно выбрать где данная секция будет отображаться (видна на устройствах). По умолчанию отображается на Сайте и в ВКонтакте. С помощью выпадающего меню можно выбрать один из вариантов отображения данного блока: или только на Сайте, или только в ВКонтакте.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc49q-rXaN6AoH6EbfruSCA7DShC_oQHt2XjswrKmK7V2fGuqiZIk_M1wYyn_jSMzcuPxF8UUvIMcRg3-D23KpknMaK_GY92oynar1pT4b_vgSjRuj0SDDEeUaOxCdaADW0eXVFmA?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="375"><figcaption></figcaption></figure>

Скругление границ:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdMbCCV4dL-l95IBWf4tKVrvM4Wycm4Yx8VbP5owsoMF61t2L_rhcBNRxqxE8ecYVo225lo5U06vRj5ckc8csxT44t8z7PxpfNbAV7_L8crajEucCW-ul-1Das36wPkVJtsgXBNLw?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="375"><figcaption></figcaption></figure>

Скругление границ указывается в пикселях - рх

Пример отображения секции с настройками скругления границ:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe-Br4H3m7fz7K4VaZV0J_yF38T2ZOjpNc_lueTlwirlb0GOJAeozh1LIJk1Al-NiohMAzYwt--DkQE6DJZBXp4FbMW0I_X1JjedGxAUnZJI29BqwIiw_f_tI2nQcZudifw7om7Ag?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

## Высота секции

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXemxU4xgLfh8XpV1XzMcO9pGbbq-kFlk7kVKHtOJxDqHqwh_FRpWRBjd2asG9ZjYEWNG1D_n9qgEy4Jm0OMKu_x5S5630SdZxtu-Uo5JzTRateL002rWZrvxNOgCP_FHEtzlLJYvQ?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="375"><figcaption></figcaption></figure>

Высоту секции можно указать:

* px - пиксели
* vh - высота экрана устройства (любой размер экрана).&#x20;

Пример 1. Отображение секции с настройками высоты по умолчанию, увеличивается по наличию контента внутри секции:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXelthk_hHDqdO9I7GzKMDjlNHgAP3hpRY7Xxy-mKSlF571YyQbFRDsPIBaVnIGC9UkfQe3wzErJOLelOQSDEybYbKEaiq0j36U1BfPyMf1LorBQjLgUzNnWob7wVCD2ZzYQ8EDu?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="563"><figcaption></figcaption></figure>

Пример 2. Высота секции = 100 vh (весь экран устройства). При пролистывании ниже, будет видна следующая секция:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfnQJce_NA6qMJ9FWj52eHkhNQl4017y2r0cb6ss_2Xy5ba1wn0qpzuHtznTjXb-VL2tLiJxvuV6PNmwkLAFC4CD1eoj87E9SqxKhkVws_sOtT1_66tycwaBRN8nbvv6zQCr9edhw?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="563"><figcaption></figcaption></figure>

Пример 3. Высота секции = 40 vh.  Размер от 40  единиц размера экрана, контент будет помещаться внутри секции. Размер секции будет увеличиваться, если контент не помещается в секцию. Если текст или медиа вложение  меньше заданного размера, то останется без изменений по указанным настройкам (40 vh).

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfioQxg0HNWkboNezTpqdFwfRD6l6vJNPdLP5Bmssj9G7VPM0cYqlD2uYYun04X3gGYOEOuZlHS01vGLZHlviXgXH7sw5d2J_WyoMLcK3ZEXyQJBtAv64A5Usa_HCPLSTV-xqWb?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="563"><figcaption></figcaption></figure>

## Ширина секции

Данная настройка не применяется в ВКонтакте из-за строгих требований со стороны ВКонтакте.

Ширина 1 колонки = 106  px

По умолчанию заданы параметры: ширина секции = на весь экран и отображение контента на 8 колонок секции.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfKAvWqqggwT-L5g9gijVGzR15gTSQiVhKCuP6MUNBaqYkeFdXTGPoNqmELEST2ER2Ble2Em0HN1ABYMEKIoix1so5GHj8O2lBx2frXG8FkCIm2ny7c0K29-_LQFrE7OjuJ2SMj?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Пример 1. Контент помещаем в центре секции и он занимает 5 колонок внутри секции:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcBloDxIU-AQ0HSxyPs2cr3o9zoJk1IJHfHzKfbB_x4i82XcfPRsjLBRuQ0I3rzQqZPnjzsAAdWaptzoGt5QaQ54rs0Eicvn8NrF8kz4yqlxNdL4dCpjnCcMyfCQSEPkC8J5mwLGQ?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Пример 2. Секция занимает 8 колонок, контент -на всю ширину секции:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd6H5hIvsK51qwHdtBXwHQqpQMt-4i7ZmtQMSERo8JUnYldDjMvyxArwWvHhK1gfc1JrBZYLRtHQrL-wYEt9Kk78PavV1KbvglvGx7F5_KSEGJVu2iTwhI1eU0eAVCBzmz-RrLpMA?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Эффект появления при скролле

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdV2xkhVwkLl3EarBFiRGXHexGvkBTSmb9rLgsyhqProlrVLWuVeaOU58-Z57oeu8VkRm82uGqXOdvgzHDY291g6ua9CrNRwBCf1A1j0lUsF4n4LO-oLXOCmfCtzFFxjMwmQYQY?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Включите этот переключатель, чтобы при скролле был эффект появления вашего контента. Можно сделать, чтобы контент появлялся снизу, сверху, слева, справа.

## Отображение контента

По горизонтали,  по умолчанию и по центру. Можно сместить к правому и левому краю страницы:

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

По вертикали по умолчанию сверху. Можно сместить вниз и в центр страницы:

Можно адаптировать текст на узких экранах согласно стилям SaleBot. Переключите этот ползунок:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXebT2XV-1i1yixTv5kCCqKAQ_EpH8FLoSELCJxWOYvrODDq1E44m7J1ol5GLDqfAJWmUKh-dt2kPRU2frQUAteGgnNAHBfDNTn781-umoVjyoAP_7c57agIIqXl4kruq9Uj599Kvw?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="375"><figcaption></figcaption></figure>

## Отступы (для секции)

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeOqO8PWlQbXlXfA9WNptuF0O_dg-JQ2evMiFLbxfsEjQXbDAkIpcrsEd-TSefsNZ7CcqXCnf10YXsEWLX8_ffi3Q317VR2VYxT-HCuvMDHOsqPGAjo8P9D452V08-i9C5CouKOgg?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="375"><figcaption></figcaption></figure>

### Внешние отступы

С помощью данных полей можно настраивать пустое расстояние между секциями. По умолчанию, внутренние отступы сверху/снизу/слева/справа - 0 px

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcRy58DkKZ_i4xk4Yx-DxTD3Tc4_FxPyjcTAxTPFzUHvIIF1gSDTCsRjWUVFdRIrqXiehA3aHkbQPMnfSO8hhmV4ax4DtiJKR8TbqdI7TyvZO4Qu-N-L8Buy9Dh0WyvQSEpSgbZQg?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="375"><figcaption></figcaption></figure>

Пример 1. Внешний отступ секции по умолчанию выглядит так:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf6Ghds1KyQ6ml41OOv2rPY2Zd0jPYi758GuDl46mnfK2SdD0L0x-QDDy3cgoWFqYTdRZjg54UrDQpTvazddRmHQoUWj-tbI_BMiiHwrAqu1S4tjWiiTBc9FaJnW21uRceaHi55CA?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Если вы хотите сделать равные отступы со всех сторон - внесите значение в окно, не открывая дополнительное окно настроек. Все позиции заполнятся автоматически:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe9CizHrmlziWYeK5KR6hakJA_cxqXfSB3oOKCxUkuxPRxMjZjqQfPaOWjuWemHo0qTXbJdVI5TobCmVhkwdroMgC09emaffBfgO2ENtP-KwqPprlEpZ5wAqorwSmYlWOq-5ArF?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="188"><figcaption></figcaption></figure>

Пример 2. Увеличиваем внутренний отступ до 32 px:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd2uCU1NEaNCGGH9bQWhkA4q_N-2e79hh5YettmjhxzT8RgIn4Gyp_UnCVUuIWg9_mzoL9vsUHtuWM3eEH22bdSFTJunMKl-vuDxSS7NNl-MXvAlXakEFMCw6TK5MgaXxca-lZ8NQ?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

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

Внутренние отступы

С помощью данных полей можно настраивать пустое расстояние контента внутри секции. По умолчанию, внутренние отступы сверху/снизу/слева/справа - 32 px

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfCKToGqdsfMcm6N45Jhoez-g-aub9UJm_Vo-TlZvumTAKXBEF8obHGnoGITes4sZ7_BZFaW0JOaUGWzImkbn2YjybUWdcj4QBg6RK1mybZDswFt14GsdVtew7y4tIJ3tkEKlCtRw?key=wvItsTVZeN1qx7iWn8-XSKvr" alt="" width="375"><figcaption></figcaption></figure>

Пример 1. Внутренний отступ секции по умолчанию выглядит так:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdXl3pA4bM3jetvCMpNtYJks5zNOWCMOou4AfGlNuaI_m2IylgcSBseqZRvoK3HJxYjl_29c769xz8kaPCxJ-z8RuIfBgxU74CkVJ1sH6NCqCD7_6AyTmB1rLCDVGfiY9R2gNj3?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Пример 2. Увеличиваем внутренний отступ до 100 px:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfgq61ZOZDR4XFWn89HgevaU785riCe9GcY9v4FTt_U9X9dcpNklz3Ted1fflsXlct9Hf4Q177LD8Fd-ZOsnmO-cjUc4O8ckPTCa6ZhBH8pngZUv5BC9hwC4O4ojYu9B3eyAhhaRA?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

## Диапазон видимости на устройствах

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

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

Зачем это нужно и как оно работает?

Если определенный блок (например, обложка) хорошо выглядит на компьютере, но на мобильном экране отображается не совсем правильно, вы можете определить, что этот блок будет виден только на устройствах с шириной экрана 960 пикселей и более. Это будет десктопная версия блока, и она не будет отображаться на мобильных телефонах.

Затем вам нужно скопировать этот блок и настроить его внешний вид специально для мобильных устройств (изменить фотографию, размер шрифта и т. д.). Для этого блока установите видимость в диапазоне от 0 до 960 пикселей. Это будет мобильная версия блока.

Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.

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

{% hint style="info" %}
По умолчанию секция отображается на устройствах любых размеров
{% endhint %}

#### Пример

Настроим разное изображение для устройств разных размеров.

Создадим 2 секции.&#x20;

* Первая для мобильных устройств и планшетов. Укажем диапазон от 0 до 640 рх:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXed_GYxfa_iKrCGPTkkUxZ0jh9t6husTRjbjiss62F3XpIL3uPSYZGFV-SEoiIvgXC1b6ip1LUi7xJsTtJHsRLAX9Ywdm2mJwHGP5RdC5zjBldYB6Vx0XKxcAnBvd3Srkp093S3EQ?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Вторая секция для ПК (ноутбуки). Укажем диапазон видимости от 640 до мах:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcqJ98KUijMf5XbtTR-tH-vFGID0d_Sc-uMo_sz8XBMHKcVsMyAmnvwyO7GeZ4JiC5GvuDq119Cz1HLB6_C7jtPYujtAs4fZ1NnjjUoAQ61OmER4PXeEy8BnlZvj7XkKIMCovBduw?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

* Сохраним изменения и перейдем на страницу редактирования. Для удобства выведена информация видимости  секции:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcsS0LGMxdy6cNBrSzG1Wo1ArQ7u-fvnOk8vlHygn6hHm92Yx0QS4ou8Vz9eoE7oLBdh8dPP46xCwbCUmBgE6RoLPyaXQ_r3r0yo8Uhyz6NFubWszXG5TiU5A6ujxjJiHx_P1PW?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdQ4LyzQCvgYkG6K37WwyjnivTBq0pXvXLyM-HVHAgIFuYwjvGZR3hZ-it1seLnpePA7YOmGv04la-Z8UEEE3vvTSwbnDKeGBEMgLm2Q4uxhZjSdMBzcESFEgZXhTbVXWR5cUjP?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

* Чтобы протестировать, как будут выглядеть секции на определенном устройстве, переходим на страницу предпросмотра сайта. Далее в Браузере переходим в Настройки, выбираем “Дополнительно” — “Инструменты разработчика”

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdeHzY_6SOoubKmhSfh2InHtrzglnb_CEOhdNTaPWa8rtiwQqPcVQlgtRdj-B-z4ZYVp3q7zKocUbrTPVykY9TigCRNXd6WT6E07ORi5DZo014QR2f58LDtl_cRflolyqnXiQ3zpQ?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc6WB1cxsHZYfiTQwVKDw0d_hv3P2U0MsNoKcJttliCSrer2R6rOfJ0olbYZcX6K_EtdOfr-zUutawa8z_YhOA8NuTO0zHkpVUetxRM-VJij--bJQUei0xrj6YuBwKj3lckee2zCQ?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Экран монитора 820 x 1180:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeAy1u63Bzj4JVQDkv6m832xK8uYzoEaxxKfmPO4v-XdxDRw5IUxoIH09zIuIKNcVMHPeEAVdSrKqPksRZjRJHGBPY7R2IxM8DSUaivzi80KiuogeT4Qmsj17t9LJCZkAlAAnDWug?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Экран Samsung Galaxy S8+ (360х740)рх

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcjMcPk6b66SO6AdaMYwFwD7WQwxiIkZ7ENmI9_eJbytNv8pWZNoYFuYKyrn9bhOdsSMt0EGNnI0ien_HkOyBtFtfhXhxdecKqWN0f9MUwjziEia739MhtsAawMgXFovgvxjPAFBg?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Экран iPhone 12 Pro (390 x 844) рх

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeYgkTKBFeMpD3YnyfQzWWXQXW8H6NHyIXpiV1t1H7IlKbyvDhiekUqx_dwHppRfO_6MDfoB78sitc2Q74CZZxuICJu5Yn_dBkCONHDoVI2oDoYAHtrrl7q6V6MKA7bLUc0Y6GpZA?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

Экран iPad mini  (768 x 1024) рх

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeR85W2612Tr6AsrG7WRH8Ldx9yKT_zgWEoWq-s9o3HtRMyDzh6cwoEcShnlyewYTQhe569zhnm-A7DU_mJ0gr1-6GVGJeEEV2GN3FSzg3RaS0JJpWkDzwKYduZJ_gWw8WTPieCrw?key=wvItsTVZeN1qx7iWn8-XSKvr" alt=""><figcaption></figcaption></figure>

## Время появления

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

С помощью этого поля можно настроить интервал появления секции в секундах или минутах.


---

# 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/universalnye-nastroiki-sekcii/nastroiki-otobrazheniya.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.