---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.2
alternate:
  - https://yandex.ru/support/kit/ru/site-editor/sections/image.md
  - href: ru/site-editor/sections/image.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/kit/ru/llms.txt

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

Секция позволяет добавить на сайт блок с произвольным изображением и текстом.

## Настроить секцию {#set-section}

1. Нажмите на секцию **Изображение и текст**.

1. В панели справа настройте отображение секции:
 

   #|
   ||
   
   **Настройка**

   |
   
   **Описание**

   ||
   ||
   
   **Заголовок секции**

   |
   
   Введите заголовок секции.

   ||
   ||
   
   **Расположение заголовка**

   |
   
   Выберите, где будет располагаться заголовок:

   * **Слева** — в левой части.

   * **По центру** — в центральной части.

   * **Как в теме** — использовать настройки вкладки **Тема**.

   ||
   ||
   
   **Палитра цветов**

   |
   
   Выберите палитру цветов, которая будет использоваться для секции.

   Палитры цветов настраиваются на вкладке [Тема](https://yandex.ru/support/kit/ru/site-editor/themes.md#settings).

   ||
   ||
   
   **Вертикальное выравнивание**

   |
   
   Выберите расположение текста секции по вертикали:

   * **Сверху**

   * **По центру**

   * **Снизу**

   ||
   ||
   
   **Текст**

   |
   
   Введите и отредактируйте текст с помощью кнопок:

   * ![](../../_images/text-edit/b.svg) — выделить текст жирным шрифтом.

   * ![](../../_images/text-edit/i.svg) — выделить текст курсивом.

   * ![](../../_images/text-edit/u.svg) — выделить текст подчеркиванием.

   * **H** — выделить текст в заголовок и выбрать его размер. Доступно 6 размеров заголовков.

   * ![](../../_images/text-edit/list.svg) — оформить нумерованный или маркированный список.

   * ![](../../_images/text-edit/link.svg) — вставить ссылку в текст.

   * ![](../../_images/text-edit/open.svg) — открыть поле **Текст** на весь экран.

   ||
   ||
   
   <span style="font-size: 20px; font-weight: 600;">Изображение<span>

   |
   
   >

   ||
   ||
   
   **Соотношение сторон изображения**

   |
   
   Выберите соотношение сторон изображения внутри секции:

   * **3:4**

   * **1:1**

   * **4:3**

   * **2:1**

   * **5:2**

   * **7:2**

   * **7:3**

   * **5:1**

   * **7:1**

   * **10:1**

   ||
   ||
   
   **Расположение изображения**

   |
   
   Настройте расположение изображения внутри секции:

   * **Слева** — в левой части.

   * **Справа** — в правой части.

   ||
   ||
   
   **Изображение**

   |
   
   Загрузите файл с изображением.

   ||
   ||
   
   <span style="font-size: 20px; font-weight: 600;">Размеры секции</span>

   |
   
   >

   ||
   ||
   
   **Растянуть секцию на весь экран**

   |
   
   Настройте расположение секции:

   * **Как в теме** — секция будет расположена в соответствии с настройкой на вкладке **Тема**.
   
   * **Да** — секция займет всю ширину экрана.

   * **Нет** — секция будет расположена ближе к центру экрана.

   ||
   ||
   
   **Отступ по краям на десктопе**

   |
   
   Настройте отступ секции от краев экрана для полной версии сайта:

   * **Как в теме** — секция будет расположена в соответствии с настройкой на вкладке **Тема**.
   
   * **Своё значение** — выберите значение для отступа. 

   ||
   ||
   
   **Отступ по краям на телефоне**

   |
   
   Настройте отступ секции от краев экрана для мобильной версии сайта:

   * **Как в теме** — секция будет расположена в соответствии с настройкой на вкладке **Тема**.
   
   * **Своё значение** — выберите значение для отступа. 

   ||
   ||
   
   **Отступ над секцией**

   |
   
   Выберите отступ над секцией:

   * **Двойной** — рекомендуется добавить, если сверху находится секция с фоном или нет секции.

   * **Обычный** — стандартный отступ между секциями.

   * **Нет** — секция соединяется вплотную с предыдущей.

   ||
   ||
   
   **Отступ под секцией**

   |
   
   Выберите отступ под секцией:

   * **Двойной** — рекомендуется добавить, если снизу находится секция с фоном.

   * **Обычный** — стандартный отступ между секциями.

   * **Нет** — секция соединяется вплотную со следующей.

   ||
   |#
&nbsp;
   
<!-- source: ru/_includes/support.md -->
<!-- стили желтой кнопки-ссылки: -->


## Обратиться в службу поддержки

<!-- желтая кнопка-ссылка: -->
[Написать в чат](https://yandex.ru/chat/#/user/6c041b05-07a4-99cc-79be-8670b7aff93d){.button}


<!-- желтая кнопка-ссылка: -->
[Написать письмо](https://yandex.ru/support/kit/ru/feedback.md){.button}
<!-- endsource: ru/_includes/support.md -->