Редактор Studio Two: работа с панелью «Инспектор»

Изменяйте характеристики любого элемента, секции или страницы на панели «Инспектор». Здесь можно настроить изменение размеров элементов для разных размеров экрана, дизайн и анимацию, а также подключить контент к источнику данных.

На вкладке Дизайн можно управлять внешним видом и поведением элемента на экранах разных размеров. Это первая вкладка панели «Инспектор». Здесь можно настроить все параметры — от размера и интервалов до цвета, типографики и пользовательского CSS.

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

• Размер: настройте ширину и высоту элемента, а также изменение его размера на разных экранах.
• Дизайн элемента: настройте внешний вид элемента, включая цвета, границы, углы, тени и типографику. Если элемент состоит из нескольких частей, например меню, или имеет отдельные состояния при наведении и отключении, например кнопка, сначала выберите часть или состояние, которое хотите оформить.
• Макет (контейнеры и секции): настройте расположение элементов внутри родительского элемента. Выберите макет сетки, задайте отступы и определите, что будет происходить с контентом, выходящим за границы. Если изменить параметр Интервал по вертикали с Авто на Вручную, можно задать разные интервалы между элементами для каждого размера экрана.
• Положение: выберите тип положения, например фиксацию при прокрутке или закрепление, а затем настройте поля и фиксацию, чтобы элемент оставался на месте при изменении размера экрана.
• Внешний вид: настройте прозрачность и поворот элемента.
• Курсор: добавьте пользовательский курсор для элемента, секции или страницы.
• Якорь: добавьте якорь, чтобы создать прямую ссылку на элемент, и скопируйте URL якоря.
• Пользовательский CSS: добавьте собственный код CSS для выбранного элемента.

Добавляйте анимацию к элементам и секциям на вкладке Анимация. К одному элементу можно применить разные типы анимации. Например, элемент может плавно появляться при загрузке, реагировать на курсор посетителя и смещаться при прокрутке.

Выберите нужный тип анимации:

• Появление: добавьте анимацию при первой загрузке элемента. Например, элемент может увеличиваться, постепенно появляться или наклоняться под углом.

• Зацикленный повтор: добавьте непрерывно повторяющуюся анимацию элемента, которая не запускается определенным действием.

• Прокрутка: добавьте анимацию элемента при прокрутке страницы посетителем вверх и вниз.

• Эффекты мыши: добавьте анимацию, чтобы элемент реагировал на движение курсора.

• Нажатие: добавьте анимацию элемента при нажатии на него посетителем.

• При наведении: добавьте анимацию элемента при наведении на него курсора.
  Примечание: у некоторых элементов, например кнопок и меню, есть встроенное состояние при наведении, поэтому параметр добавления еще одной анимации при наведении не отображается. Чтобы настроить состояние при наведении, перейдите на вкладку Дизайн и выберите При наведении в разделе Состояние.

Настройте расширенные варианты поведения выбранного элемента на вкладке Настройки.

• Источники данных: подключите страницу, секцию или контейнер к источнику данных. После этого находящиеся внутри элементы смогут использовать данные, действия и функции этого источника. Нажмите Подключить источник, чтобы начать.

• Характеристики: измените контент и поведение выбранного элемента. Доступные параметры зависят от элемента. Например, выбрав кнопку, можно настроить ее текст и ссылку или отключить ее. Нажмите значок Подключить к данным рядом с полем, чтобы подключить его к источнику данных вместо ввода значения вручную, или Настроить с помощью ИИ, чтобы получить помощь от Aria.

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

• Дополнительно:

  • Условие видимости: скройте элемент, если условие из источника данных истинно или ложно.

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

Нажмите на вопрос ниже, чтобы узнать подробнее.