# Редактор Studio Two: настройка размера элемента Source: https://support.wix.com/ru/article/studio-two-editor-setting-the-elements-size-ru (updated 2026-10-28) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt > Эта статья посвящена новому редактору Studio Two, выпущенному в ноябре 2026 года. Если вы не уверены, какой редактор используете — Studio или Studio Two, [подробнее об этом можно узнать здесь](https://support.wix.com/ru/article/studio-two-editor-the-difference-between-studio-editor-and-studio-two-editor). В редакторе Studio Two можно задать точный размер каждого элемента, чтобы дизайн автоматически адаптировался к любому устройству. Измените размер на холсте или на панели «Инспектор», чтобы задать точные размеры элемента. При изменении размера отображается единица измерения px\*, указанная в пикселях. Она масштабируется для каждого размера экрана в соответствии с адаптивным поведением элемента. Если поведение по умолчанию не подходит для дизайна, измените его или включите дополнительные настройки, чтобы напрямую управлять шириной и высотой. --- ## Изменение размера элементов Выберите удобный способ изменения размера элементов: * **На холсте:** нажмите на элемент, чтобы выбрать его на странице, и перетаскивайте боковые маркеры, пока элемент не достигнет нужного размера. Во время перетаскивания отображается точный размер элемента в пикселях. ![Dragging the side handle of a selected text element on the canvas to resize it](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/c52717a5-047a-43db-a88d-8a13342b135d/size-1a-canvas.png) * **На панели «Инспектор»:** нажмите на элемент и откройте панель «Инспектор», чтобы посмотреть и изменить его точную ширину и высоту. ![Selected text element on the canvas, with its width and height shown in the Inspector Size section](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/ae5095b5-f39b-42ac-b6f3-db0f30b260d1/size-1b-canvas-and-inspector.png) --- ## Использование px* как единицы измерения В разделе «Размер» на панели «Инспектор» доступна относительная единица измерения, которая используется только в редакторе Studio Two, — **px\***. Звездочка (\*) рядом с «px» означает, что размер зависит от размера экрана, с которым вы сейчас работаете. Например, если перейти с компьютера на смартфон, ширина и высота элемента в px\* соответственно уменьшатся. ![Раздел «Размер» на панели «Инспектор», где значения X, Y, W и H указаны в px*](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/3e5b196c-eac4-4cff-9294-08d474fd25b4/size-2-px-fields-1x.png) > **Полезно знать:** px\* обозначает значение в пикселях, однако фактический размер адаптируется автоматически. Наведите указатель на px\* на панели, чтобы увидеть расчет и используемую адаптивную единицу измерения, например проценты или соотношение сторон. > > ![Hovering over px* next to width in the Inspector panel, the popup reads that the actual unit is percentage](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/56f2b60e-fd1e-4f39-b14d-1221ad7b0104/size-3-px-tooltip-1x.png) --- ## Выбор адаптивного поведения Настройте адаптивное поведение, которое определяет, будет ли элемент менять размер на разных экранах и каким образом. Для каждого элемента изначально задано поведение по умолчанию, но его можно изменить на более подходящее для дизайна. **Чем отличаются типы адаптивного поведения?** У каждого типа адаптивного поведения есть своя автоматическая логика изменения размера элемента на разных экранах. Доступные типы поведения зависят от элемента. Наиболее распространенные из них: * **Пропорциональный масштаб:** пропорции элемента (соотношение ширины и высоты) сохраняются на всех экранах. * **По ширине:** ширина элемента автоматически изменяется относительно родительского элемента. * **Фиксировано:** размер элемента всегда остается неизменным на всех экранах. * **Растянуть:** элемент растягивается по размеру родительского контейнера на каждом размере экрана. * **Адаптировать по содержимому:** между элементом и его ограничивающей рамкой нет отступов. Размер ограничивающей рамки на каждом размере экрана зависит от содержимого (например, от количества символов и размера шрифта текста кнопки). **Примечание:** это также поведение по умолчанию для горизонтальной стопки. **Поведение секции:** * **Автоматическая высота:** высота секции автоматически подстраивается под содержимое на экране любого размера. * **Фиксированная высота:** высота секции всегда остается неизменной независимо от размера экрана. * **Под размер экрана:** секция занимает всю высоту области просмотра (100 vh). При необходимости можно уменьшить значение vh, чтобы секция занимала меньше места. ### Чтобы изменить адаптивное поведение элемента: 1. [Перейдите в редактор](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Выберите нужный элемент. 3. Нажмите значок **Открыть Инспектор** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png) в правом верхнем углу редактора. ![Стрелка, открывающая панель Инспектора в редакторе Studio Two](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/18/464a146e-ac9f-495f-be67-560b93fdb995/open-inspectornew.png) 1. Откройте вкладку **Дизайн**. 2. Откройте раскрывающийся список **Адаптивное поведение** в разделе **Размер**. 3. Выберите новый тип адаптивного поведения. ![Открытый раскрывающийся список «Адаптивное поведение» в Инспекторе с анимированным превью выделенного варианта](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/99fd2586-7b18-487e-9012-0bc47a5f4972/size-4-responsive-dropdown-1x.png) > **Полезная информация:** Наведите указатель на варианты в раскрывающемся списке, чтобы посмотреть анимацию их поведения. --- ## Использование дополнительных настроек размера Используйте дополнительные настройки, если хотите напрямую управлять размерами элемента (например, в пикс., % или vh), а не полагаться на px\* и адаптивное поведение. > **Полезно знать:** Дополнительные настройки применяются к выбранному элементу на всех размерах экрана. Для удобства этот режим остается активным для элемента, но его можно отключить в любое время. ### Чтобы включить дополнительные настройки: 1. [Перейдите в редактор](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Выберите нужный элемент. 3. Нажмите значок **«Открыть Инспектор»** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png) в правом верхнем углу редактора. ![Нажатие стрелки, открывающей панель «Инспектор» в редакторе Studio Two](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/18/464a146e-ac9f-495f-be67-560b93fdb995/open-inspectornew.png) 1. В Инспекторе нажмите значок **«Другие действия»** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/05/00f6b671-6132-4bc1-9610-b17a2af28697/more-actions-black-bg.png) в правом верхнем углу. 2. Активируйте переключатель рядом с пунктом **«Дополнительные настройки»**. ![Активированный переключатель «Дополнительные настройки» на панели «Инспектор» в редакторе Studio Two](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/05/4e7f19bb-54f1-4d9c-b945-61607d943fb4/advanced-settings-on.png) 1. Настройте размеры: ширину, высоту, а также минимальные и максимальные значения. **Совет:** Чтобы выбрать другую единицу измерения (например, сменить пикс. на %), нажмите текущую единицу в Инспекторе. Откроется список доступных для элемента единиц измерения. ![Раздел «Размер» в Инспекторе с включенными дополнительными настройками, где указаны ширина, высота, а также минимальные и максимальные значения](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/9b64d910-3f63-4a5f-b53d-4fc8d04cf077/size-5-advanced-settings.png)