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

1. HTML

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

Для вставки счетчиков используйте раздел Настройки → Вставка кода. Для вставки кода счетчиков на отдельную страницу используйте раздел Код. Подробнее о правильном размещении стороннего кода написали по ссылке.

Избегайте написания JS-кода в тегах <script>. Для добавления JS-кода используйте вкладку JS/TCX.

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

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

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

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

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

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

Для открытия окна, укажите 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>

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

Вы можете открывать изображения в лайтбоксе всплывающих окон, для этого используйте атрибут [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-стилях.

2. CSS / LESS

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

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

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

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

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

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

:host {
    z-index: 2147483647;
}

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

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

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

2.2 Адаптив

Вы можете переопределить стили для мобильных, перейдя в режим редактирования мобильной версии в верхнем правом углу редактора 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;
    }
}

2.3 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%)

3. JS / TSX

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

Убедитесь, что:

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

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

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

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

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

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

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

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

Рекомендуем использовать сеть доставки контента 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
);

3.2 JS Api

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

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

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

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

Пример использования 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('У секции изменилась ширина или высота');
});

3.3 Программное открытие / закрытие Окон или Корзины

// Для открытия окна 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');

Открытие/закрытие окна или корзины порождает событие, на которое также можно подписаться

// Открылось окно
flexbe_cli.events.on('modal_opened', (payload) => {
  console.log('Открылось окно ', payload.id);
});

// Закрылось окно
flexbe_cli.events.on('modal_closed', (payload) => {
  console.log('Закрылось окно ', payload.id);
});

// Открылась корзина
flexbe_cli.events.on('cart_opened', () => {
  console.log('Открылась корзина');
});

// Закрылась корзина
flexbe_cli.events.on('cart_closed', () => {
  console.log('Закрылась корзина');
});

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

Используйте эту вкладку для загрузки файлов, на которые вы планируете ссылаться из кода.

Учитывайте, что:

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

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

🚨 Вес одного файла не должен превышать 15 МБ.

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

Вы можете сами сформировать путь до изображения.

Поддерживаемые форматы путей:
/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)

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

Звонок по России бесплатный

8 (800) 555-45-12

Обработка персональных данных

Правила использования

Лицензионный договор

Контакты