Редактор Studio: работа с фиксацией, полями и отступами
8 мин. чтения
В постоянно развивающемся мире устройств важно контролировать положение элементов, чтобы они выглядели именно так, как вы хотите, на экранах разных размеров. В связи с этим в редакторе Studio элементы фиксируются автоматически.
Это дает вам свободу перемещать элементы, не беспокоясь о расположении на экранах всех размеров. Тем не менее, вы всегда можете самостоятельно задать расположение, фиксацию и поля в панели инспектора.
Посетите Академию Wix Studio, чтобы получить доступ к курсам, учебным пособиями и вебинарам о Wix Studio.
Содержание:
Расположение элементов на холсте
С помощью перетаскивания вы можете установить расположение элемента прямо на холсте, индивидуально для каждого экрана. Это позволяет убедиться, что элемент действительно на месте при просмотре на каждом экране.
Пока элемент остается в том же родительском элементе (например, секции, ячейке), вы можете перемещать его без влияния на другие размеры экрана. Если вы переместите элемент в другой родительский элемент, изменение будет применено ко всем размерам экрана.
![Скриншот перетаскиваемого элемента в другую родительскую ячейку и появляющееся уведомление о том, что это изменение повлияет на все размеры экрана.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/07/bb44e291-dc48-4c5c-8438-899773254e70/eb14b4df-3211-4468-8c39-7bfc1c258c4b.png)
Координаты X и Y в панели Инспектора
Чтобы увидеть точное расположение элемента на холсте каждого размера, вы можете проверить его координаты X и Y.
- X: горизонтальная плоскость от левого края до правого края родительского элемента (например, секции, контейнера, стека).
- Y: вертикальная плоскость, от верхнего края до нижнего края родительского элемента.
В приведенном ниже примере вы можете увидеть, как значение px* становится отрицательным при перемещении текстового элемента за пределы его родительского элемента - ячейки.
![GIF, показывающий, как текстовый элемент перемещен за пределы родительской ячейки, что создает отрицательное значение X в инспекторе.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/07/76be4ce7-3ccd-452c-ad40-54b4fadbc9b2/344fad9b-dd63-4c13-9428-3047e6ff46ab.gif)
Что такое px*?
px* — это единица измерения в редакторе Studio, показывающая «пиксели на холсте». Значение px*, которое вы видите, является пиксельным эквивалентом, относящимся к размеру холста, на котором вы находитесь. Переключитесь на другой размер экрана, чтобы увидеть, как значение px* автоматически меняется.
Автоматическая фиксация элементов и вручную
Новый добавленный элемент в редакторе автоматически фиксируется, чтобы оставаться на своем месте на всех экранах и устройствах. Однако вы всегда можете отключить автоматическую фиксацию и выбрать точки фиксации вручную.
Нажимайте на вопросы ниже, чтобы получить дополнительную информацию.
Автоматическая фиксация в редакторе
Настройка фиксации вручную
Использование полей при фиксации элементов
Когда элемент зафиксирован, поля помогают сохранить заданное расстояние между элементом и краями его родительского элемента. Вы можете добавить поля по бокам, которые также не закреплены. Поля действуют как буфер, предотвращая перекрытие с другими элементами.
В приведенном ниже примере текстовый элемент прикреплен к верхней и правой сторонам ячейки. Они выделяются на холсте при наведении курсора на поля в панели инспектора:
![GIF, показывающий курсор, наведенный над верхним и правым полями в инспекторе, которые также выделены на холсте.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/07/7431be07-d430-4952-b0ff-42f8ae2800e9/f12cad4f-031a-4af6-860b-c84e8a836439.gif)
Чтобы создать или изменить поле:
- Выберите нужный элемент.
- Нажмите на значок Открыть инспектор
в правом верхнем углу редактора.
![Скриншот открытия панели инспектора в редакторе Studio.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Прокрутите вниз до раздела Расположение.
- Нажмите на поле (например, верхнее, слева) в разделе Фиксация, поля и отступы.
- (Необязательно) Нажмите значок Редактировать по отдельности
, чтобы отредактировать только выбранную вами сторону.
- Введите значение поля.
Совет: нажмите на измерение (например, px*, %), чтобы изменить его.
![Скриншот поля](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/02/07/de018c26-bc84-4ff2-9386-f76b6a5d0db4/8948774f-ead5-4b28-b5bf-0f0355f514a4.png)
Единицы полей:
Поля можно установить в px*, пикс. (px) процентах (%), высоте вьюпорта (vh) и ширине вьюпорта (vw). У каждого будет свой результат при изменении размера экрана. Посмотрите на разницу в поведении элементов, перетащив холст, чтобы изменить его размер.
Добавление отступов вокруг адаптивных контейнеров
Вы можете добавлять отступы внутри контейнеров, чтобы увеличить расстояние между точками (верхней, нижней и боковыми) и содержимым внутри. Отступы можно добавить ко всем типам адаптивных контейнеров, включая базовые контейнеры, элементы в стеке, flex-контейнеры, репитеры, ячейки, секции и страницы.
Чтобы добавить отступы:
- Выберите нужный элемент.
- Нажмите на значок Открыть инспектор
в правом верхнем углу редактора.
![Скриншот открытия панели инспектора в редакторе Studio.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Прокрутите вниз до раздела Расположение.
- В зависимости от типа адаптивного контейнера, следуйте инструкциям, чтобы добавить отступы:
Страница, секция или ячейка
Другие контейнеры
![Добавление отступа 4% ко всем сторонам элемента в стеке в редакторе Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/07/03/d627715d-07cf-4bcd-8bb9-e8c2598cb883/17e59158-dace-4976-a582-0cfe9d92c30e.png)
Что дальше?
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/07/30/40c6aba0-25f1-4041-ae41-6878095847e1/a41a2e5c-2242-497f-91b8-dc8dc47091f9.gif)
Вы можете настроить отступы прямо на холсте с помощью перетаскивания. Выберите адаптивный контейнер и наведите курсор на отступ, чтобы увидеть этот параметр.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/07/30/40c6aba0-25f1-4041-ae41-6878095847e1/a41a2e5c-2242-497f-91b8-dc8dc47091f9.gif)
Предотвращение наложения элементов
При размещении элементов важно убедиться, что они не перекрываются на экранах меньших размеров. Чтобы этого не произошло, ознакомьтесь с нашими советами ниже.
Фиксация наверху
Добавление ячеек для организации макета
Соединение элементов в стек
Если в настоящее время вы видите нежелательные перекрытия элементов, посмотрите это видеоруководство, чтобы устранить проблему.