Редактор Studio: работа с фиксацией, полями и отступами
8 мин. чтения
В постоянно развивающемся мире устройств важно контролировать положение элементов, чтобы они выглядели именно так, как вы хотите, на экранах разных размеров. В связи с этим в редакторе Studio элементы фиксируются автоматически.
Это дает вам свободу перемещать элементы, не беспокоясь о расположении на экранах всех размеров. Тем не менее, вы всегда можете самостоятельно задать расположение, фиксацию и поля в панели инспектора.
Посетите Академию Wix Studio, чтобы получить доступ к курсам, учебным пособиями и вебинарам о Wix Studio.
Содержание:
Расположение элементов на холсте
С помощью перетаскивания вы можете установить расположение элемента прямо на холсте, индивидуально для каждого экрана. Это позволяет убедиться, что элемент действительно на месте при просмотре на каждом экране.
Пока элемент остается в том же родительском элементе (например, секции, ячейке), вы можете перемещать его без влияния на другие размеры экрана. Если вы переместите элемент в другой родительский элемент, изменение будет применено ко всем размерам экрана.
Координаты X и Y в панели Инспектора
Чтобы увидеть точное расположение элемента на холсте каждого размера, вы можете проверить его координаты X и Y.
- X: горизонтальная плоскость от левого края до правого края родительского элемента (например, секции, контейнера, стека).
- Y: вертикальная плоскость, от верхнего края до нижнего края родительского элемента.
В приведенном ниже примере вы можете увидеть, как значение px* становится отрицательным при перемещении текстового элемента за пределы его родительского элемента - ячейки.
Что такое px*?
px* — это единица измерения в редакторе Studio, показывающая «пиксели на холсте». Значение px*, которое вы видите, является пиксельным эквивалентом, относящимся к размеру холста, на котором вы находитесь. Переключитесь на другой размер экрана, чтобы увидеть, как значение px* автоматически меняется.
Автоматическая фиксация элементов и вручную
Новый добавленный элемент в редакторе автоматически фиксируется, чтобы оставаться на своем месте на всех экранах и устройствах. Однако вы всегда можете отключить автоматическую фиксацию и выбрать точки фиксации вручную.
Нажимайте на вопросы ниже, чтобы получить дополнительную информацию.
Автоматическая фиксация в редакторе
Настройка фиксации вручную
, чтобы элемент всегда находился в центре.
Использование полей при фиксации элементов
Когда элемент зафиксирован, поля помогают сохранить заданное расстояние между элементом и краями его родительского элемента. Вы можете добавить поля по бокам, которые также не закреплены. Поля действуют как буфер, предотвращая перекрытие с другими элементами.
В приведенном ниже примере текстовый элемент прикреплен к верхней и правой сторонам ячейки. Они выделяются на холсте при наведении курсора на поля в панели инспектора:
Чтобы создать или изменить поле:
- Выберите нужный элемент.
- Нажмите на значок Открыть инспектор
в правом верхнем углу редактора.
- Прокрутите вниз до раздела Расположение.
- Нажмите на поле (например, верхнее, слева) в разделе Фиксация, поля и отступы.
- (Необязательно) Нажмите значок Редактировать по отдельности
, чтобы отредактировать только выбранную вами сторону. - Введите значение поля.
Совет: нажмите на измерение (например, px*, %), чтобы изменить его.
Единицы полей:
Поля можно установить в px*, пикс. (px) процентах (%), высоте вьюпорта (vh) и ширине вьюпорта (vw). У каждого будет свой результат при изменении размера экрана. Посмотрите на разницу в поведении элементов, перетащив холст, чтобы изменить его размер.
Добавление отступов вокруг адаптивных контейнеров
Вы можете добавлять отступы внутри контейнеров, чтобы увеличить расстояние между точками (верхней, нижней и боковыми) и содержимым внутри. Отступы можно добавить ко всем типам адаптивных контейнеров, включая базовые контейнеры, элементы в стеке, flex-контейнеры, репитеры, ячейки, секции и страницы.
Чтобы добавить отступы:
- Выберите нужный элемент.
- Нажмите на значок Открыть инспектор в правом верхнем углу редактора.
- Прокрутите вниз до раздела Расположение.
- В зависимости от типа адаптивного контейнера, следуйте инструкциям, чтобы добавить отступы:
Страница, секция или ячейка
.Другие контейнеры
Что дальше?
Вы можете настроить отступы прямо на холсте с помощью перетаскивания. Выберите адаптивный контейнер и наведите курсор на отступ, чтобы увидеть этот параметр.
Предотвращение наложения элементов
При размещении элементов важно убедиться, что они не перекрываются на экранах меньших размеров. Чтобы этого не произошло, ознакомьтесь с нашими советами ниже.
Фиксация наверху
Добавление ячеек для организации макета
Соединение элементов в стек
Если в настоящее время вы видите нежелательные перекрытия элементов, посмотрите это видеоруководство, чтобы устранить проблему.