Настройка атрибутов в визуальной среде
В визуальной среде каждый элемент можно гибко настраивать под задачи проекта, в том числе управлять его идентификаторами и дополнительными параметрами. Атрибуты позволяют использовать элементы в скриптах, стилизовать через CSS или передавать данные для логики сайта: например, чтобы контроллер считал из них настройки или Яндекс Метрика фиксировала событие с понятным идентификатором.
Как открыть панель атрибутов и задать базовые настройки
Шаг #1. В визуальном редакторе кликните по любому элементу.
Шаг #2. На появившейся панели настроек нажмите кнопку «Атрибуты».
Шаг #3. В модальном окне с настройками укажите уникальный id элемента в поле «Идентификатор (id)».
Внимание! Идентификатор должен быть единственным на странице: дублирование id приведёт к некорректной работе скриптов и селекторов.
Шаг #4. В поле «Название на панели слоёв» задайте понятное имя элемента — оно не влияет на фронтенд, но упрощает навигацию по слоям при работе с визуальной версткой.
Как добавлять и управлять data‑атрибутами
Шаг #5. Перейдите в блок настроек «Data‑атрибуты» → заполните два поля: «Ключ» и «Значение». Например, в «Ключ» введите key, в «Значение» — value.
Шаг #6. Нажмите кнопку «+» («Добавить»). Система сформирует атрибут в формате data-se-key="value". Такой префикс (data-se-) помогает отличать служебные атрибуты среды от пользовательских и избегать конфликтов.
Шаг #7. При необходимости добавьте несколько data‑атрибутов — каждый новый будет отображаться отдельным пунктом в списке.
Внимание! Помните, что избыток data‑атрибутов увеличивает размер HTML и может усложнить поддержку кода. Добавляйте только те атрибуты, которые реально используются в скриптах или стилях.
Шаг #8. Чтобы удалить лишний атрибут, найдите его в списке и нажмите на иконку «-» («Удалить») рядом с ним.
Шаг #9. После внесения всех изменений нажмите «Сохранить». Атрибуты сразу применятся к элементу в визуальной среде и будут доступны в DOM для JS и CSS.
Поздравляем, вы настроили атрибуты элемента и можете использовать их в дальнейшей разработке!
