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






# Кастомные секции

<!-- source: ru/_includes/custom-beta.md -->
{% note info %}

Бета‑тестирование кастомных секций в Яндекс KITᵝ завершено: теперь они доступны всем пользователям.

{% endnote %}
<!-- endsource: ru/_includes/custom-beta.md -->

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

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

## Как добавить кастомную секцию {#add}

1. Перейдите в **Редактор сайта** → **Секции** → **Создать секцию**.
1. Создайте кастомную секцию в редакторе кода с помощью HTML, CSS и шаблонизатора [Handlebars](https://handlebarsjs.com/).

    {% cut "Пример шаблона для секции **Полка товаров и изображение**" %}

    ```html

    <ya-kit-section-layout palette="{{settings.palette}}">
        <ya-kit-section-layout-row>
            <ya-kit-section-title text="{{settings.titleText}}" align="left" />
    </ya-kit-section-layout-row>
    <ya-kit-section-layout-row>
        <ya-kit-v-stack gap="700" align-items="stretch">
            <div class="content">
                <div class="{{cn 'content__cover' (skin-rounded '150')}}">
                        <ya-kit-image class="img" sources="{{ (sources settings.cover.media) }}" />
                        <ya-kit-button class="button" to="{{settings.cover.url}}">
                        {{settings.cover.buttonText}}
                    </ya-kit-button>
                </div>
            <ya-kit-products-collection-extractor data-source="{{settings.dataSource}}" count="6" as="products">
                <div class="items">
                    {{#each products.payload as |product|}}
                         <ya-kit-product-snippet product="{{product}}" />
                    {{/each}} 
                </div>
                    </ya-kit-products-collection-extractor>
                </div>
            </ya-kit-v-stack>
        </ya-kit-section-layout-row>
    </ya-kit-section-layout>

    
    ```


    {% endcut %}


    {% note info %}

    Если у вас нет опыта работы с HTML и CSS, рекомендуем использовать стандартные секции. Внешний вид секций можно изменять с помощью соответствующих настроек — для этого выберите секцию и нажмите **Редактировать код**.

    {% endnote %}



## Интерфейс редактора кода {#interface}

![](../../_images/code-editor.png)

![image.png](../../_images/num-1.svg) **Название секции**

Задайте название секции.

![image.png](../../_images/num-2.svg) **Рабочие вкладки**

Отредактируйте секцию с помощью [HTML и CSS](#work).

Чтобы настраивать созданные секции, используйте [JSON Schema](*json). Задавайте настройки, добавляя или редактируя секции в редакторе сайта.

![image.png](../../_images/num-3.svg) **Режимы отображения**

Переключите предпросмотр внешнего вида секции на мобильную или полную версию.

![image.png](../../_images/num-4.svg) **Документация и выгрузка кода**

Чтобы перейти к документации по написанию кода, нажмите **Документация**.

![image.png](../../_images/num-5.svg) **Кастомные настройки**

Настройка полей, которые вы задали для секции.


## Работа в редакторе кода {#work}

#|
||

### ![](../../_images/clip.svg) [Шаблоны](https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/index.md)

Инструменты для создания и настройки структуры и внешнего вида секций.

|

### ![](../../_images/clip.svg) [Утилиты](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/index.md)

Вспомогательные инструменты для работы с данными, логикой и настройками.

||
||

### ![](../../_images/clip.svg) [Примеры](https://yandex.ru/support/kit/ru/site-editor/custom-sections/example/index.md)

Примеры кастомных решений для интернет-магазина.

|

### ![](../../_images/clip.svg) [JSON-схема](https://yandex.ru/support/kit/ru/site-editor/custom-sections/json-shema.md)

Стандарт для описания структуры JSON-данных.

||
|#

[*json]: Стандарт для описания структуры JSON-объектов: поля, типы полей, какие обязательные, допустимые значения, форматы и т. д.