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