• Сайты
  • Квизы
  • Тарифы
  • Академия
  • Помощь
Войти
Создать сайт
Возможности 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
Пример использования атрибутов:
<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 — функция, которая будет выполнена по окончанию загрузки
Пример:
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}
Переменная
Расшифровка
%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)
Для ускорения работы ваших страниц старайтесь подбирать оптимальный размер для каждого изображения.

Конструктор сайтов

  • Сайты
  • Квизы
  • Тарифные планы
  • Помощь

Дополнительно

  • Домены
  • Академия Flexbe
  • Партнерская программа
  • Конструктор логотипов
  • API-документация

Компания

  • Контакты
  • Лицензионный договор
  • Правила использования
  • Обработка персональных данных

Контакты

8 (800) 555-45-12

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

© 2012 – 2023 ООО «Флексби»
ВКонтакте
YouTube
Загрузка...