Возможности 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="#about">Перейти к блоку "О нас"</a> Для открытия окна, используйте аналогичную нотацию, указав ID окна в качестве якоря:
<a href="#form">Открыть окно с формой</a> Для открытия корзины, используйте якорь #cart:
<a href="#cart">Открыть корзину</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
Указывайте 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 загрузку изображений. 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
Для вкладки CSS используется LESS-Препроцессор, вы можете использовать любой функционал описанный в документации LESS.
Область видимости
Область видимости стилей ограничивается селектором :scope, однако если вы не укажете этот селектор, то весь код будет обернут в него автоматически. Таким образом оба примера ниже полностью идентичны:
:scope {
color: red;
&:hover {
color: blue;
}
}color: red;
&:hover {
color: blue;
}Использование :scope позволит вам выйти за пределы текущего элемента и применить стили ко всей странице, например:
:scope {
/* Стили текущего элемента */
}
/* Стили всей страницы */ Адаптив
Вы можете переопределить стили для мобильных, перейдя в режим редактирования мобильной версии в верхнем правом углу редактора 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 {
color: red;
}
}
CSS-Переменные
Вы можете использовать системные CSS-переменные в ваших стилях. Список доступных переменных:
Переменная | Расшифровка |
|---|---|
var(--currentColor) | Текущий цвет текста |
var(--contrastColor) | Контрастный к текущему цвету текста |
var(--bgContrast) | Контрастный к текущему цвету фона (отличается от --currentColor в случае если цвет текста не "Авто") |
var(--lightColor) | Светлый цвет |
var(--darkColor) | Тёмный цвет |
var(--100vw) | 100% ширины экрана |
var(--100vh) | 100% высоты экрана |
var(--coverHeight) | Высота для полноэкранных секций (не меняется при небольшом изменении высоты окна) |
var(--scrollbarWidth) | Ширина скролбара на текущем устройстве |
var(--containerWidth) | Ширина контейнера контента (1150px) |
var(--containerMaxWidth) | Максимальная ширина контейнера контента (100%) |
Вкладка JavaScript
Используйте вкладку JavaScript для написания собственной логики.
⛳️ jQuery уже загружена.
⛳️ Код исполняется внутри события DOMContentLoaded
Загрузка зависимостей
Вы можете подгружать любые JS/CSS файлы используя метод require. Использование этого метода полностью аналогично вставке JS/CSS во вкладке HTML
Метод принимает два аргумента:
urls: string | string[] — путь или список путей для загрузки (CSS или JS файлы)
callback: () => void — функция, которая будет выполнена по окончанию загрузки
Метод принимает два аргумента:
urls: string | string[] — путь или список путей для загрузки (CSS или JS файлы)
callback: () => void — функция, которая будет выполнена по окончанию загрузки
Пример:
function main() {
console.log('THREE.js loaded', THREE);
}
require(
['https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'],
main
); Появление элемента / секции на экране
Вам доступны объекты sectionApi, modalApi, elementApi в зависимости от того, используете вы HTML-Секцию, HTML-Окно или HTML-Элемент. Для элементов также доступен объект родителя, то есть sectionApi или modalApi — в зависимости от того где находится элемент.
Доступные поля объектов:
Поле объекта | Описание |
|---|---|
id | Уникальный ID секции |
is | Тип элемента (block, modal, element) |
content | DOM элемент контейнера контента секции. |
area | DOM элемент секции. Рекомендуем использовать content вместо этого. |
inBeside / wasBeside | Секция рядом с экраном / Находилась рядом с экраном |
inScreen / wasScreen | Секция на экране / была на экране |
inView / wasView | Секция видимая более чем на 25% / была видимая на 25% |
inFocus / wasFocus | Секция в центре экрана / была в центре экрана |
isVisible / wasVisible | Секция видимая или скрытая сейчас / была видимая хотя бы раз |
Пример использования API:
function triggerOnScreen() {
const images = elementApi.content.querySelectorAll('img');
console.log('Элемент на экране, изображения внутри:', images);
}
// Если элемент уже на экране при загрузке страницы
if (elementApi.inScreen) {
triggerOnScreen();
}
// Подписываемся на событие появления на экране
elementApi.on('screen', ({ state }) => {
if (state) {
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('У секции изменилась ширина или высота');
});
Вкладка Файлы
Используйте эту вкладку для загрузки сопутствующих вашему коду файлов.
🚨 Файлы не удаляются после удаления HTML-Секции
🚨 Все файлы будут доступны на любых страницах проекта.
Опция Включить оптимизацию изображений влияет на отображение путей в списке. Если опция включена, то будут сформированы ссылки на изображения в оптимизированном формате в зависимости от настроек проекта в разделе Настройки → Оптимизация скорости
Вы можете сами сформировать путь до изображения.
Поддерживаемые форматы путей:
/img/{id}_{size}_q{quality}.{extension}
/img/{id}_{size}.{extension}
/img/{id}.{extension}
Поддерживаемые форматы путей:
/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)
/img/19790179_1280_q65.webp — HD изображение в формате webp с качеством 65 (1280x1021px, 250Kb)
/img/19790179_1920.jpg — FullHD изображение в формате jpg (1920x1532px, 460Kb)
/img/19790179.jpg — Оригинальное изображение (3024x2413px, 1558Kb)
Для ускорения работы ваших страниц старайтесь подбирать оптимальный размер для каждого изображения.