Не зависимо от способа разработки сайта (самописный, CMS или конструктор), принцип разметки используется один. Если следуя инструкции что-то не получится, пишите в техподдержку, поможем!
Добавление элементов разных типов
После добавления страниц или групп похожих страниц, их необходимо разметить, т.е. указать системе какой тип контента к какому элементу на сайте относится. Для разметки, на данный момент, доступно 7 типов:
Текст. Любой текст на странице, в том числе и внутри большинства кнопок (сделанных тегами: a, button)
Изображение. Все изображения, которые НЕ заданы как бэкграунд (фон сайта)
Фоновое изображение. Которые заданы как бэкграунд (фон сайта)
Элемент формы. Для заполнения текстом атрибута value у элемента input
Цвет заливки. Для любых элементов со сплошной заливкой (кнопки, фоны, какие-либо карточки и т.д.)
Цвет текста. Изменение цвета текста в тех случаях, когда сам текст менять не планируется, а нужно изменить только цвет
Ссылка. Для разметки элемента содержащего ссылку (например, текстовая ссылка, кнопка, изображение)
Назначение названия элементам
После добавления нужных типов элементов, для упрощения идентификации можно задать им удобные и понятные названия. Например: “Заголовок”, “Подзаголовок”, “Изображение товара”, “Главная кнопка” и т.п.
Разметка элемента
Правее каждого типа элемента есть столбец “Элемент (XPath, id, class)”, базовое содержимое этих полей (что-то типа “.dycont-XXX“) нужно удалить и сразу вставить новый путь (при пустом пуле будет отображаться ошибка), либо выделить всё содержимое поля и заменить (то есть, не стирая, произвести вставку нового содержимого) на соответствующий ему путь до элемента вашего сайта XPath (рекомендуется). Также это может быть id или class (если вы их знаете или планируете сами задать на сайте). Указывается в поле только что-то ОДНО - XPath, id или class.
Получить XPath можно с помощью консоли любого браузера. Чтобы узнать путь до элемента, кликаем правой кнопкой мыши по элементу, путь до которого нам нужен (например, заголовку), и в выпадающем меню выбираем (в зависимости от браузера):
- Просмотреть код - если Google Chrome;
- Исследовать элемент - если Яндекс.Браузер;
- Исследовать - если Firefox;
- Проверить - если Microsoft Edge;
- Просмотреть код элемента - если Opera.
Далее вновь правой кнопкой кликаем по УЖЕ ВЫДЕЛЕННОЙ системой строке в консоли, наводим курсор мыши на “Copy/Копировать”, и в выпадающем списке кликаем по “Copy XPath/Копировать XPath” (в редких случаях может потребоваться копировать full XPath - пробуйте такой вариант, если первый не сработал). То что скопируется вам нужно вставить в поле напротив размечаемого типа элемента.
Видео “Как разметить страницу?”: Смотреть (50 секунд начиная с 1:39). Внимание! В видео показано копирование selecror'а - это устаревший вариант, для более точной разметки используйте XPath.
После того, как добавили и разметили все необходимые элементы, можно переходить к следующей вкладке. Все изменения сохраняются автоматически, индикатор расположен в левом верхнем углу, возле логотипа.