Правая панель “Название блока и состояние”

Данный интерфейс в правой панели редактора содержит следующий набор функций:

1 - Название выбранного элемента - каждый элемент в редакторе имеет свое название, которое вы можете изменить в любой момент. Так же это поля показывает то, какой элемент вы редактируете с помощью правой панели в данный момент. Если выбран один из виджетов, то название будет белым цветом, если вы выбрали для редактирования CSS класс элемента, то оно будет оранжевым. Название элемента отображается в дереве, для последующей удобной навигации старайтесь давать короткое уникальное название каждому элементу.

2 – Список всех свойств элемента - данная функция показывает все свойства, которые применены к элементу. В сплывающем окне вы увидите список свойств и сможете при необходимости удалить каждое отдельное из них. Данный функционал крайне полезен при использовании классов. Свойства, заданные блоку всегда приоритетней заданных CSS классом и что бы один параметр не перекрывал другой, необходимо удалить его с помощью этого окна.

3 – Состояния - это одна из важнейших функций редактор, которая отвечает за то, при каком состоянии вы в данный момент редактируете элемент. Чаще всего эта функция необходима для создания динамического изменения визуального оформления контента вашего сайта. Она позволяет изменить вид элемента при различных действиях пользователя и тем самым “оживить” ваш сайт и сделать его более удобным. Данный функционал лучше всего использовать в совокупности с анимацией. Всего существует 4 состояния: Без состояния – в этом случае вы редактируете элемент в обычном состоянии, когда пользователь просто просматривает страницу вашего сайта. Состояние при наведении – используйте данный режим, когда хотите изменить вид элемента после наведения на него курсором мыши. Это может быть не обязательно кнопка, а так же любой другой блок. Состояние при клике – в данном режиме вы сможете изменять внешние оформление элемента, когда пользователь кликнет по нему мышью, чаще всего используется для кнопок. Состояние при скроле – в этом режиме отредактированные элементы, будут видны пользователю в тот момент, когда он “прокрутит” до них страницу. Наиболее часто данный функционал применяется, когда необходимо сделать анимацию. Например, плавное появление контента на сайте.

4 – Кнопка “clear” - данная кнопка предназначена для очистки стилей при состоянии отличного от первоначального. Данную кнопку рекомендуется использовать тогда, когда вы случайно забыли переключить режим состояния в “Без состояния” и продолжили редактировать элементы в каком-либо другом режиме. В результате, что бы в ручную не изменять назад параметры CSS свойств элемента, просто выделите его и нажмите на эту кнопку. После чего стили во всех состояниях элемента отличных от режима “Без состояния” приобретут тот же набор CSS свойств, что и в первоначальном режиме.