Кастомные секции (β)

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

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

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

1. Перейдите в Редактор сайта → Секции → Создать секцию.

2. Создайте собственную секцию в редакторе кода с помощью HTML, CSS и шаблонизатора Handlebars.

   Пример шаблона для секции Полка товаров и изображение

   
   <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>
   
   
   

   Примечание

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

Интерфейс редактора кода

 Название секции

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

 Рабочие вкладки

Отредактируйте секцию с помощью HTML и CSS.

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

Режимы отображения

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

 Документация и выгрузка кода

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

Чтобы скачать файл с кодом, нажмите .

Кастомные настройки

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

Работа в редакторе кода