Возможности HTML-Редактора

Для работы с HTML-кодом добавьте секцию, окно или элемент из раздела Прочее.

HTML

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

Для вставки счетчиков и прочих виджетов на все страницы рекомендуем использовать раздел Настройки → Аналитика или Настройки → Вставка кода.

Избегайте написания JS кода в тегах <script>, используйте для этого вкладку JavaScript.

Будьте внимательны со структурой: незакрытый тег может сломать контент сайта под HTML-Секцией.

Видимость на устройствах

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

[data-hidden="desktop"] — скрывает контент на десктопе: отображать только на мобильных.

[data-hidden="mobile"] — скрывает контент на мобильных: отображать только на ПК.

[data-hidden="all"] — скрывает контент для всех устройств.

<div class="text" data-hidden="mobile">
    Hidden on Mobile
</div>

<div class="text" data-hidden="desktop">
    Hidden on Desktop
</div>

Как открыть окно, корзину, добавить товар, передавать цели в системы аналитики.

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

Для открытия окна, укажите ID окна в качестве якоря:

<a href="#form">Открыть окно с формой</a>

Для открытия корзины, используйте якорь #cart:

<a href="#cart">Открыть корзину</a>

Для перехода по якорю секции или ID элемента, используйте ссылку вида:

<a href="#about">Перейти к блоку "О нас"</a>

Вы можете влиять на поведение ссылок при помощи аттрибутов:

[data-goal="GOAL_NAME"] — название цели, которое будет передано в системы аналитики.

[data-action="ACTION_NAME"] — указывает на тип действия при нажатии на ссылку. Вызывает выполнение соответствующей цели для систем аналитики. Если атрибут не указан, то будет использовано значение link.

ACTION_NAME	Цель	Доп. атрибуты	Описание
link По умолчанию	link_open	href="URL" — Адрес ссылки target="_blank" — Открывать в новой вкладке	Открытие ссылки / Открытие окна / Открытие корзины / Переход к якорю
cart	add_to_cart	data-product-image="/img/2000018200_600.jpg" — Путь до изображения товара data-product-name="Название товара" — Название товара data-product-price="1000" — Цена за единицу товара data-product-count="1" — Количество товаров для добавления	Добавление в корзину
file	file_load	href="URL" — Путь к файлу download — Принудительно скачивать файлы, которые могут быть открыты в браузере (PDF, изображения)	Скачивание файла
modal	modal_open form_open done_open product_show quiz_start	data-modal-id="MODAL_ID" – ID окна для открытия	Открытие окна
close	modal_close	–	Закрытие окна (только для окон)
none	–	–	Не обрабатывать

Пример добавления в корзину:

<a 
    data-action="cart"
    data-product-image="/img/9512942_1150.webp"
    data-product-name="Чёрный свитшот"
    data-product-price="15990"
>
    Добавить товар в корзину
</a>

Пример открытия окна:

<a 
    data-action="modal"
    data-modal-id="form567"
>
    Показать форму
</a>

Пример срабатывания цели:

<a 
    data-action="none"
    data-goal="my_custom_goal"
    href="#anchor"
>
    Перейти по якорю и выполнить цель my_custom_goal
</a>

Открытие изображения в всплывающем окне

Вы можете открывать изображения в лайтбоксе всплывающих окон, для этого используйте атрибут [data-lightbox="IMAGE_URL"].
Указывайте alt атрибут для описания изображения.
По умолчанию все изображения с атрибутом data-lightbox будут объединены в карусель. Если вы хотите ограничить область поиска таких изображений, используйте класс .lightbox-container

Пример использования атрибутов:

<div class="lightbox-container">
    <img
        alt="Изображение #1"
        src="/img/2000018199_600.jpg" 
        data-lightbox="/img/2000018199_1920.jpg"
    >

    <img
        alt="Изображение #2"
        src="/img/2000018200_600.jpg" 
        data-lightbox="/img/2000018200_1920.jpg"
    >
</div>

LazyLoading изображений

Вы можете сделать Lazy Loading загрузку изображений.
Изображение начнет загружаться только при появлении на экране.

Для этого используйте атрибуты:

[data-lazy-bg="IMAGE_URL"] — в элемент будет вставлен inline-стиль background-image при появлении изображения на экране

<div data-lazy-bg="/img/2000018199_%optimalWidth%.jpg"></div>

[data-lazy-src="IMAGE_URL"] — в элемент будет вставлен src атрибут при появлении изображения на экране

<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">

[data-inline-bg="IMAGE_URL"] — в элемент будет вставлен inline-стиль background-image при загрузке страницы

<div data-inline-bg="/img/2000018199_%optimalWidth%.jpg"></div>

[data-inline-src="IMAGE_URL"] — в элемент будет вставлен src атрибут при загрузке страницы

<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">

Используйте переменную %optimalWidth% в пути файла чтобы код автоматически загружал оптимальную по ширине версию изображения.

Подробнее о формате путей до изображений в разделе Вкладка Файлы

Для корректной работы LazyLoading у изображения должна быть явно указана ширина и высота в CSS стилях.

CSS / LESS

Для вкладки CSS используется LESS-Препроцессор, вы можете использовать любой функционал описанный в документации LESS.

Область видимости

Область видимости стилей ограничивается селектором :scope или :host, однако если вы не укажете этот селектор, то весь код будет обернут в него автоматически. Таким образом оба примера ниже полностью идентичны:

:scope {
    color: red;
    
    &:hover {
    	color: blue;
    }
}

color: red;
    
&:hover {
    color: blue;
}

Учтите что :scope применяется к контентной части элемента, но в некоторых ситуациях вам может потребоваться задать стиль для основного контейнера элемента. В таком случае используйте селектор :host

:host {
    z-index: 2147483647;
}

Использование :root позволит вам выйти за пределы текущего элемента и применить стили ко всей странице, например:

:scope {
  /* Стили текущего элемента */
}

:root {
  /* Стили всей страницы */
}

Адаптив

Вы можете переопределить стили для мобильных, перейдя в режим редактирования мобильной версии в верхнем правом углу редактора HTML. Так же вы можете опираться на классы .adaptive-desktop , .adaptive-mobile применяемые к body.

Список классов, применяемых к body:

className	Описание
adaptive-desktop	Текущий режим отображения сайта - ПК
adaptive-mobile	Текущий режим отображения сайта - Мобильный
is-touch	Устройство с сенсорным экраном
is-pointer	Устройство с курсором
is-ios	iOS устройства (iPhone, iPad)
is-android	Android устройства
is-safari	Браузер Safari
is-chrome	Браузер Chrome
is-edge	Браузер Edge
is-firefox	Браузер Firefox

Пример работы с классами:

// В браузере Chrome на iPhone элемент красного цвета
body.adaptive-mobile.is-ios.is-chrome {
    :scope {
    	background: red;
    }
}

CSS-Переменные

Вы можете использовать системные CSS-переменные в ваших стилях. Список доступных переменных:

Переменная	Расшифровка
var(--currentColor)	Текущий цвет текста
var(--contrastColor)	Контрастный к текущему цвету текста
var(--bgContrast)	Контрастный к текущему цвету фона (отличается от --currentColor в случае если цвет текста не "Авто")
var(--lightColor)	Светлый цвет
var(--darkColor)	Тёмный цвет
var(--100vw)	100% ширины экрана
var(--100vh)	100% высоты экрана
var(--coverHeight)	Высота для полноэкранных секций (не меняется при небольшом изменении высоты окна) в отличии от 100vh
var(--scrollbarWidth)	Ширина скролбара на текущем устройстве
var(--containerWidth)	Ширина контейнера контента (1150px)
var(--containerMaxWidth)	Максимальная ширина контейнера контента (100%)

JavaScript

Используйте вкладку JavaScript для написания собственной логики.

⛳️ jQuery уже загружена.

⛳️ Код исполняется после события DOMContentLoaded

⛳️ Вы можете использовать верхнеуровневый await и ESM синтаксис

⛳️ Для доступа к свойствам текущего HTML элемента используйте объект elementApi

Загрузка зависимостей (ES Module Import)

Вы можете использовать ES Module Import синтаксис для подключения необходимых зависимостей в ESM формате:

import three from "https://esm.sh/three.js";

console.log('THREE.js loaded', three);

Рекомендуем использовать CDN https://esm.sh/

Так же вы можете подгружать любые CSS и JS файлы (в формате CJS) используя метод require.
Использование этого метода полностью аналогично вставке JS/CSS во вкладке HTML через теги script / link

Метод принимает два аргумента:
urls: string | string[] — путь или список путей для загрузки (CSS или JS файлы)
callback: () => void — функция, которая будет выполнена по окончанию загрузки

Метод возвращает Promise

Пример:

function main() {
    console.log('THREE.js loaded', THREE);
}

require(
    ['https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'], 
    main
);

JS Api

Появление элемента / секции на экране

Вам доступен объект elementApi для доступа к свойствам текущего HTML-Элемента.
Также доступен объект родителя, sectionApi или modalApi — в зависимости от того где находится элемент.

Доступные поля этих объектов:

Поле объекта	Описание
content	DOM элемент контейнера контента секции. Используйте для обращения к DOM элементу текущего HTML-Элемента
inScreen / wasScreen	Секция на экране / была на экране
inView / wasView	Секция видимая более чем на 25% / была видимая на 25%
inFocus / wasFocus	Секция в центре экрана / была в центре экрана
inBeside / wasBeside	Секция рядом с экраном / Находилась рядом с экраном
isVisible / wasVisible	Секция видимая или скрытая сейчас / была видимая хотя бы раз
id	Уникальный ID секции
is	Тип элемента (block, modal, element)
area	DOM элемент всего элемента/секции. Не рекомендуем изменять его свойства

Пример использования API:

В этом примере мы откроем окно с якорем #my_fancy_modal, как только пользователь доскролит до текущего HTML элемента и тот станет видимым на экране.

function triggerOnScreen() {
  if (!flexbe_cli.is_admin) {
    flexbe_cli.events.trigger('ui_modal_open', { id: 'my_fancy_modal' }); 
  }
}
    
// Если элемент уже на экране при загрузке страницы
if (elementApi.inScreen) {
    triggerOnScreen();
} 
    
// Подписываемся на событие появления на экране
elementApi.on('screen', ({ state, first }) => {
    if (state && first) {
        triggerOnScreen();
    }
});

Доступные события внутри элемента/секции:

Название события	Описание
beside	Секция скоро появится на экране
screen	> 1px секции виден на экране
view	> 25% секции видно на экране
focus	Секция пересекает центр экрана
visible	Секция становится видимой или скрытой (смена состояний display: none -> display: block). Применимо для модалов, элементов внутри табов и т.д
resize	Размеры элемента изменились
open	Открытие окна
close	Закрытие окна

Пример подписки на события:

elementApi.on('screen', ({ state, first }) => {
    console.log('Элемент появился или исчез с экрана', { state, first });
});

sectionApi.on('resize', () => {
    console.log('У секции изменилась ширина или высота');
});

Открытие / Закрытие окон или Корзины

// Для открытия окна modal96352 (можно использовать якорь)
flexbe_cli.events.trigger('ui_modal_open', { id: 'modal96352' });

// Для закрытия окна (открытого или конкретного)
flexbe_cli.events.trigger('ui_modal_close');
flexbe_cli.events.trigger('ui_modal_close', { id: 'modal96352' });

// Для открытия корзины
flexbe_cli.events.trigger('ui_cart_open');

// Для закрытия корзины
flexbe_cli.events.trigger('ui_cart_close');

Вкладка Файлы

Используйте эту вкладку для загрузки сопутствующих вашему коду файлов.

🚨 Файлы не удаляются после удаления HTML-Секции

🚨 Все файлы будут доступны на любых страницах проекта.

Опция Включить оптимизацию изображений влияет на отображение путей в списке. Если опция включена, то будут сформированы ссылки на изображения в оптимизированном формате в зависимости от настроек проекта в разделе Настройки → Оптимизация скорости

Вы можете сами сформировать путь до изображения.
Поддерживаемые форматы путей:
/img/{id}_{size}_q{quality}.{extension}
/img/{id}_{size}.{extension}
/img/{id}.{extension}

Переменная	Расшифровка
%id%	Уникальный идентификатор изображения
%size%	Ширина изображения. Если оригинальный размер меньше этого значения — изображение будет сгенерировано в оригинальном размере
%quality%	Качество изображения. Оптимальное значение в диапазоне 65-85 в зависимости от формата изображения.
%extension%	Формат изображения (avif, webp, jpg, png, gif)

Например:
/img/19790179_1280_q65.webp — HD изображение в формате webp с качеством 65 (1280x1021px, 250Kb)
/img/19790179_1920.jpg — FullHD изображение в формате jpg (1920x1532px, 460Kb)
/img/19790179.jpg — Оригинальное изображение (3024x2413px, 1558Kb)

Для ускорения работы ваших страниц старайтесь подбирать оптимальный размер для каждого изображения.