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

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

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

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

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. Задавайте настройки, добавляя или редактируя секции в редакторе сайта.

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

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

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

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

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

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

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

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