> For the complete documentation index, see [llms.txt](https://docs.salebot.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.salebot.pro/websites/builder/sekcii-bloki/sekciya-oblozhka.md).

# Секция "Обложка"

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

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

Чтобы добавить секцию на вновь созданной странице нажимаем на кнопку “+”

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdXgCenuH2X38s_BMDrDMbYikNDzXmCH1oneXPKduCLY6OrtZhMaHW36GbBnx8S8Q4QeZsVVriOq38V7pj8kqw3B-UEAIBtjCHZqPd1slfFHz55K6NMinW1PZlzkqqKUs_8CObBbg?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

После того как вы нажмете на значок «+», справа откроется меню. В нём выберите пункт «Обложка».

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfVV-YJ9DV7Rw24Cxkc2PwGQ8FFAk_FYT6JIfvfmzZhrXOHgGrEnfs96tKMbKN5Q3F1nkPmi7BCaC7C6HN9b6E9M2k_ZGg-KYaEoQ_Po56hgoR0zWbrk0Muv9ZlZ8TrrCwRvjLK1w?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXenAFe0ro6isxVhXZDLE_0WKCApzPwL-jrw0oMCjDGcxihL3aVui1zzM2xKqzG7mD-LNDgsayXz5j5kg_Uu5fQWBzXYQEFY9ziSJZSlDlV2Dlk-8Dd7c8JdxlzuVfBnTvKO8zxf5w?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

## Настройки

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeMsCf4FxVC9b-5bLQEZUjFND2-Qc_8iu7Sk4y9pZA7TfqCs2OAgV63KDNGvtqb2CGlqyS9xQXix-mRUgRgagyN5ewabAkWTFcQtcwFmchhWBBzKOnxTNvCw7iDAGDVFMNEw1p0rQ?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

Вы можете выбрать, как будет выглядеть вложение: изображение или видео. Заголовок страницы также будет отображаться в превью.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXecqWJmTkanjuCgDPeJtVskoJ0KFBpBMr9RdgKex4XfdoJlo2FvKAwe-b6cw7Ewu9XzRL0iIq_hnugm3eBnAjFtg5VAlfcoG1vrhv9RmjAL0mwwkfRxaiN-a3xjhZ4MX176DuYXOw?key=OkfAHeB9A9U9d-aQymLbvLv9" alt="" width="375"><figcaption></figcaption></figure>

Вложения можно добавить, используя файл или ссылку на него, в том числе с сайтов VK, YouTube, Vimeo и других.&#x20;

{% hint style="success" %}
Рекомендуемый размер фото - 1920px x 1080px. Рекомендуемое количество - не более 9.
{% endhint %}

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe37JCLidvTMkYVai58A5FuIqJjvMloRYXAQD3DZEAt8NfVKFPb4QmVqhwBINAsHIxtOlOZfP5Rly5uB0SntEtE9r19F3az1AOkIU0Gudx8O0ZZ2q2okIfaoTaJOO679OhCWuKm2Q?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

Можно установить ширину и высоту фона в любых значениях, что позволит увеличить размер фона в следующих единицах измерения:

px — в пикселях.

vw — объём, занимаемый на экране устройства. Например, 100 vh — вложение будет занимать весь экран на любом устройстве.

% — процент от ширины данной секции (блока).

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf-4mOwgOiK876J2lLiiGBmEL4NwNSCjMpXNbvR-m6wIpd0T4DSYibdTVBbZCxCdOqAVRnv96kwPrn4kBWijvSntF7DZODw23yy63-1OqZs9qHdhnm-ZaV6x0tX1Fsx7M2oKNGcjQ?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

### Настройки заголовка

Вы можете добавить заголовок, а также текст-подсказку над ним и полный текст под заголовком:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcjhtyatwRQ-wMajyQRwOh0HdW-RXx16Gwgv7tUWAlQBVbLvzRcXqXRcU8Z1ZS1_gKV_rLylLtUFx1TkpXp4vzCWKEgyC5TEtKXrzPSr7yIai4d5J105XOA9-uhAho_4mqyc6Br?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXecwH0kpOG-UQ-gr1tXO5DknldxnMR_YxJuUsZIJl-h8m3uObLhLlJb-fxLdEFsWwJzAao0yH9KiO8oZCWbbY4b0gdh2dlwQ8KxlaRb76R7eF5EJo0TnW7A-g9SbuSUEHdXdKBA?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe0xm5OEZdkeXqk6pp4dLhoAL_tU2ZD_ERgZVe-U-pTO_tLWSjQyqzR9Ko0gwGg7Bq3_AzRvHgjlp-_DWH7311SVXbRZ3cd1lAKVo17OVzsG8S2F-DqeMrYP18CBEr3fQq8L7HEoQ?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

Чтобы убрать выделение цветом нажмите "Убрать цвет".

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc6padNaNRwtVcccr3zTb3m2zhtEW1qGJ3i6loOokpUti1E2CnQEgrGZ2-Ri7jqQ-u0EJk5psgR12pLKXFy_cT78pqY78S0Z4KqSBcR4l8coUqRPT9q98lewwh0GkvN1GYzQWZBug?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

В заголовок, подсказку и текст под заголовком или в конкретный фрагмент текста можно добавить переменную:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdjtM-79qdeFfbh_5UnGkhezy7CSoFWNJ8fNEwZdqoHvXFmt91u34dsTTiPYH2IKqpWPc_iQ5tCm2wNLjNHWKze1sYj9aLjhz_s20C_mJvOkn-iungaYRi4gmAbBhlCRoxiWieEDg?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

Можете добавить стандартные переменные или переменные проекта:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcy19jEOxa5wzoMM8F278SMWsbg_hrfSJORvR6T-tJF8JRl24RBCWm3igC17YVzTJCCclX-ysvjjhRq4LObzhk4mZa4WhQDhhBbJx8OEJ9HvMVZZ_MiTrSu47XceI72F7RPMS5n?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

Пример стандартной переменной, которая отображает текущее время в формате hh:mm:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfpkdaM6ZvfwyOPvKydPYfmKVp5zXVxuY7avZTrQJZuPxoHvOfGo2myfX28jVv9n9jh9awBSKnxIIiuZgbtB7JQg1yyb6OXyzGQhpD_fwpYLp0HlgTuSHvLx0SH7JvAhMIU39Fh?key=OkfAHeB9A9U9d-aQymLbvLv9" alt=""><figcaption></figcaption></figure>

## Видео-инструкция

{% embed url="<https://youtu.be/uD6gKRl6124>" %}