#Визуальный редактор

Кнопка «Визуальный редактор» стоит у каждого поля с разметкой: в виде модуля — у всех четырёх окон, в форме записи — у полей типа «HTML».

Окно открывается на весь экран: слева список того, что можно вставить, справа — страница, собранная по-настоящему.

#Главное: правится сам HTML, а не его пересказ

Отсюда важное следствие: чужую вёрстку редактор открывает как свою. Тему от дизайнера, вёрстку решения, разметку, написанную вами руками, — всё можно править мышью.

#Что можно вставить

Элемент вставляется нажатием или перетаскиванием в нужный блок.

#Вставка модуля сайта

Отдельная возможность, ради которой редактор и нужен нетехническому владельцу: выбрать блок из списка и получить готовый вызов.

Список показывает модули с их видами — модуль без вида вставить можно, но показать нечем. У настоящего вида работает предпросмотр.

Вставится метка вида:

{module.portfolio:view=moya.portfolioGrid}

#Что видно на полотне

Наведите на элемент — он обведётся, а его родитель подсветится пунктиром. Сетки прямоугольников поверх вёрстки больше нет: видно ровно то, на что смотрите.

Над выбранным элементом появляется подпись с именем тега и действиями: дублировать, удалить, выше, ниже.

Куда можно вставить новый элемент, показывают точки «+» до и после элемента. У блока это замощённое поле, в сетке — ячейка, у строки flex — кружок в конце.

Текст правится прямо на полотне: двойной щелчок или кнопка «Править на холсте».

#Настройки блока

Настройки открываются плавающей панелью сбоку — её можно перетащить за шапку, если она закрывает нужное место. Сверху панели — дерево предков вида SECTION › DIV › H1: по нему видно, где вы находитесь, и можно подняться к родителю.

Ниже — содержимое элемента, складные разделы свойств и список своих свойств CSS.

#Содержимое зависит от того, что выбрано

Картинка фона тоже выбирается файлом, а не пишется руками как url(...).

#Тег обёртки

Список не произвольный — это теги, означающие раздел страницы:

#Свойства

Свойства названы по-человечески: «Внутренние отступы», а не padding.

Настройки сетки показываются при сетке, строки — при строке: лишние поля не мешают.

#Ширины экрана — свои

Вверху настроек — вкладки ширин. Раньше их было три и они были зашиты в код; теперь список ведёте вы сами, а рядом с вкладками стоит шестерёнка, которая его правит.

Это три, которые заведены при обновлении — с прежними условиями, чтобы ничего не поехало. Добавьте свою: название и ширина, с которой правило начинает действовать. Условие media строится само.

Рядом — выбор устройства для просмотра: iPhone, Pixel, Galaxy, iPad, MacBook и прочие. Он меняет только ширину полотна, чтобы посмотреть; правила при этом пишутся в выбранную вкладку ширины, а не в устройство.

#Куда уходят стили

/* ==== визуальный редактор: правила ниже он переписывает сам ==== */
.wb-a3f9c1 { padding: 40px }
/* ==== конец правил визуального редактора ==== */

Так стили остаются там, где им место: их видно в поле CSS, они уходят отдельным файлом и кешируются браузером. Инлайновые стили ничего этого не умеют.

#Почему полотно — отдельный документ

Показывать надо с настоящими стилями страницы, а стили страницы написаны для страницы: правило section { padding: 80px } внутри панели разъехало бы саму панель. Отдельный документ — единственная граница, которая держит чужой CSS и чужой JS.

#Окно кода

Внизу — окно с разметкой, которую редактор пишет в поле. Оно нужно, чтобы видеть результат правки мышью и при желании подправить руками.

#Что чаще всего идёт не так

«Перетащил элемент — он лёг не туда». Элемент кладётся в ближайший блок под курсором. Если блока нет, сначала вставьте «Блок / Секцию» — в корень редактор кладёт только блоки: страница собирается из секций.

«Правил стили руками — редактор их стёр». Значит, правки были внутри пометок визуального редактора. Пишите своё выше или ниже них.

«Настройки блока не открываются». Настройки — по двойному нажатию: одиночное занято выбором.

«В списке модулей пусто». Список берётся с сервера один раз за сеанс. Если модули заводились в соседней вкладке, перезагрузите страницу.