Редактор Studio: Настройка размера элементов

При создании сайта необходимо убедиться, что он отлично выглядит на экранах любого размера. В редакторе Studio вы редактируете размер в пикселях, а адаптивное поведение позаботится обо всем остальном.

Большинство элементов имеют поведение по умолчанию (например, масштабировать пропорционально), которое контролирует способ изменения размера на других экранах. Вы всегда можете изменить поведение по умолчанию на то, которое лучше соответствует вашим потребностям.

Пиксель (px*) - это гибкая единица измерения, относительная к размеру редактирования страницы.

Содержание:

Совет:

Вы можете установить размер и адаптивность элемента для каждого размера экрана.

Изменение размера элемента

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

В панели инспектора вы можете проверить точную ширину и высоту элемента в пикселях. При необходимости вы можете ввести свои значения ширины / высоты.

Позвольте панели инспектора рассчитать для вас:

Для вашего удобства при вводе значений размера вы можете использовать сложение ( + ), вычитание ( - ), умножение ( * ) и деление ( / ). Например, сделайте элемент в 3 раза шире, добавив *3 рядом с текущей шириной.

GIF, показывающий, как использовать ручки перетаскивания для изменения размера элемента на холсте.

Возникли проблемы с изменением размера экрана?

Посмотрите видео по устранению неполадок, чтобы узнать, как решить проблемы с секциями и контейнерами, размер которых не изменяется.

Изменение размера медиа-элементов

При изменении размера медиа-элемента, например фото или видео, вы можете заблокировать пропорции, чтобы ширина и высота всегда оставались пропорциональными друг другу.

Какие медиа-элементы включают эту опцию?

Это означает, что при изменении ширины высота автоматически подстраивается (и наоборот), чтобы сохранить исходную форму элемента.

GIF, показывающий, как выглядит изменение размера элемента на холсте при блокировании пропорций

Чтобы заблокировать пропорции:

Выберите нужный медиа-элемент.
Нажмите стрелку Открыть инспектор в правом верхнем углу.

Стрелка «Открыть инспектор», на которую вы нажимаете в редакторе Studio, чтобы открыть панель

Нажмите значок Заблокировать пропорции в разделе Размер.

Скриншот значка блокирования пропорций для любого медиа-элемента в инспекторе.

Измените размер элемента одним из следующих способов:
- Введите значение ширины / высоты в инспекторе (другое значение подстраивается автоматически).
- Перетащите маркеры вокруг элемента на холсте.

Примечание:

Этот параметр недоступен в режиме дополнительной настройки.

Настройка размера в пикселях*

Пиксель (px)* - это единица измерения в редакторе Studio. Он позволяет редактировать размер, используя знакомые размеры (пиксели), в то время как фактические измерения являются адаптивными.

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

В приведенном ниже примере ширина контейнера на текущем холсте составляет 1000 пикселей*. Фактическая единица измерения - проценты, поэтому ширина указана относительно каждого экрана (80%).

Скриншот, показывающий, что при наведении курсора на px * в инспекторе открывается всплывающее окно с фактическим расчетом

В чем разница между px* и px?

Оба позволяют редактировать в пикселях, однако:

px * означает, что размер, который вы видите, соответствует размеру экрана, с которым вы работаете в данный момент.
px означает, что для разных размеров экрана размер фиксирован.

Выбор адаптивного поведения элемента

Когда вы добавляете элемент на страницу, он уже имеет встроенное адаптивное поведение. Это означает, что вам не нужно беспокоиться о том, как элемент будет выглядеть на разных экранах - адаптивное поведение гарантирует, что его размер будет изменен.

Однако вы можете переключить на адаптивное поведение, если видите поведение, которое больше подходит для вашего дизайна.

В чем разница между доступными поведениями?

Каждое адаптивное поведение имеет определенную автоматическую логику в зависимости от способа изменения размера элемента на разных экранах.

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

Сохранять пропорции: пропорции элемента (ширина и высота) сохраняются на всех экранах.
По ширине: ширина элемента изменяется автоматически относительно его родительского элемента.
Фиксированный размер: элемент всегда остается одного размера, его размер не меняется на экране.
Растянуть: элемент растягивается по размеру своего родительского контейнера на всех размерах экрана.
Объятие: между элементом и его ограничительной рамкой нет пробелов. Размер ограничительной рамки на каждом экране зависит от контента внутри.
Примечание: это также поведение по умолчанию для горизонтального стека.

Поведение секции:

Фиксировать высоту: секция всегда остается одинаковой высоты, независимо от размера экрана.
По размеру экрана: секция занимает всю высоту вьюпорта (100 vh). Вы можете настроить vh, чтобы она занимала меньше места.

Поведение текста:

Переносить по словам: размер шрифта остается одинаковым на всех экранах, но текст переносится по размеру его ограничительной рамки. Это добавляет больше строк для отображения текста.
Объятие: это не оставит пробелов между текстом и его ограничительной рамкой. Это также означает, что количество строк в тексте всегда остается одинаковым, независимо от размера экрана.

Примечание:

Выбранное адаптивное поведение влияет на используемый размер. Например, при выборе поведения «Фиксированный размер», измерение меняется с px* на px.

Чтобы выбрать другое адаптивное поведение:

Выберите соответствующий размер экрана.
Выберите элемент.
Нажмите значок Открыть инспектор в правом верхнем углу редактора.

Выберите вариант из раскрывающегося списка Адаптивное поведение.

GIF открытого раскрывающегося списка «Адаптивное поведение» с его доступными параметрами

Возникают нежелательные пробелы на опубликованном сайте?

Посмотрите видео об устранении неполадок, чтобы узнать, как адаптивное поведение может повлиять и решить эту проблему.

Использование дополнительных настроек измерения

Расширенные возможности настройки позволяют более глубокую настройку размера элемента для каждого размера экрана. Вместо того, чтобы использовать px* и выбирать адаптивное поведение, этот режим позволяет вам видеть измерения, используемые в фоновом режиме (например, px, %, vh) и настраивать их в соответствии со своими потребностями.

Какие параметры доступны?

Вы можете выбрать нужные:

Пиксели (px): если вы хотите, чтобы элемент оставался одинаковым на экране любого размера, вы можете просто установить его высоту и ширину в значениях в пикселях.
Процент (%): значение ширины / высоты элемента зависит от размеров его родительского элемента. Это гарантирует, что размер элемента изменится пропорционально его родительскому элементу.
- Например, вы можете прикрепить текстовый элемент (дочерний элемент) к контейнеру (родительский элемент) и установить его ширину на 50%. Таким образом, ваш текст всегда занимает 50% ширины контейнера независимо от размера экрана.
Ширина и высота вьюпорта (vw и vh): эти размеры представляют ширину и высоту данного вьюпорта (браузера).
- Например, 1vw по ширине = 1% от ширины браузера.
Макс. контент (max-c): вы можете использовать это значение, чтобы установить ширину элемента и сделать ее зависимой от размера его дочерних элементов - независимо от того, насколько велик контент или сколько слов он содержит. Родительский элемент соответствует контенту.
Рассчитать (calc): используя основные математические правила, вы можете написать «формулу», которая определяет ширину или высоту элемента. В этом расчете можно сочетать разные измерения (например, vh и px).
- Например, вы можете сделать так, чтобы хедер и секция занимали всю высоту вьюпорта (100vh). Если высота заголовка 100 пикселей, высота секции будет рассчитана так: (100vh - 100 пикселей). Это вычитает высоту хедера из вьюпорта.

Авто ширина и высота

Для некоторых элементов ширина или высота уже установлены на Авто. Это означает, что контент элемента определяет ширину / высоту, что позволяет добавлять или удалять контент, не беспокоясь о изменении размера.

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

Чтобы открыть и изменить дополнительные настройки:

Выберите соответствующий размер экрана в редакторе.
Выберите элемент.
Нажмите стрелку Открыть инспектор в правом верхнем углу.

Нажмите значок Другие действия рядом с пунктом Размер.
Активируйте переключатель Дополнительные настройки.
Измените размер при необходимости: ширину, высоту, а также минимальные и максимальные значения.
Совет: перейдите на другую единицу (например, с px на %), нажав на нее в инспекторе. Это откроет список доступных размеров элемента.

GIF, показывающий список результатов, который открывается при нажатии на него в инспекторе.

Настройка высоты секции:

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

Настройка размера

Выберите настройки размера для сайта, который вы создаете. Если вам нравится работать с расширенными измерениями CSS, вы можете включить дополнительные настройки в редакторе. Или же, если вы предпочитаете выбирать режим размера для каждого элемента, вы можете оставить все как есть.

Чтобы установить параметры размера сайта:

Нажмите значок Wix Studio в левом верхнем углу.
Наведите курсор на Вид.
Наведите курсор на Настройки размеров.
Выберите нужное:
- Всегда показывать дополнительные: размер в инспекторе всегда установлен на дополнительном уровне.
  Примечание: в этом режиме отключается возможность переключить определенные элементы из дополнительной настройки размера.
- Установить для каждого элемента: вы устанавливаете размер для каждого элемента.

Скриншот верхнего меню в редакторе Studio, где вы можете управлять настройками размера.

Часто задаваемые вопросы

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

Секции было задано поведение сохранять пропорции, но элементы не масштабируются. Почему?

Когда использовать дополнительную настройку?

Доступны ли все адаптивные поведения для элементов, связанных с приложениями Wix?