Editor X: использование контейнеров
5 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Создайте адаптивный и структурированный макет для страницы, используя боксы-контейнеры. После добавления элементов, таких как текст, изображения и кнопки, к контейнеру, вы можете легко убедиться, что их расположение остается одинаковым для каждого размера экрана.
Содержание:
Добавление контейнера
Выберите из множества боксов и перетащите понравившийся на свою страницу. Вы можете добавить пустые контейнеры или контейнеры с сетками, чтобы легко организовать контент.
Чтобы добавить контейнер:
- Нажмите Добавить элементы
в верхней части Editor X. - Нажмите Для лейаута.
- Выберите, какой тип контейнера вы хотите добавить:
- Пустые боксы: готовые контейнеры разных стилей и форм.
- Сетки: это боксы с сеткой, которую вы можете настроить позже.
- Перетащите контейнер на страницу.
- Добавьте элементы, перетащив их в контейнер.
- (Необязательно, из панели Инспектора
) Перейдите во вкладку Дизайн 
, чтобы настроить дизайн контейнера.
Подробнее
Прикрепление элементов к контейнеру
При размещении элементов внутри контейнера они автоматически присоединяются к контейнеру и становятся его дочерними элементами. Вы можете просмотреть все прикрепленные элементы в панели «Слои».
Это делает ваш контейнер адаптивным к различным вьюпортам; при изменении размера экрана присоединенные элементы изменяют размер таким же образом и в прямой зависимости от их контейнера.
Совет:
Добавьте изображение или видео к фону контейнера. Поместите элемент внутри контейнера, чтобы прикрепить его, затем нажмите значок Растянуть 
справа вверху.
справа вверху.
Применение сетки к контейнеру
В Editor X контейнеры имеют встроенную адаптивную сетку CSS с одной ячейкой (макет 1x1). Вы можете применить сетку с большим количеством строк и столбцов, чтобы структурировать элементы внутри контейнера.
Чтобы применить сетку к контейнеру:
- Нажмите на контейнер в Editor X.
- Отредактируйте сетку одним из следующих способов:
- Выберите предустановленную сетку: нажмите на раскрывающийся список 1x1 и выберите другую сетку (например, 2x2, 2x1)
- Настройте сетку на странице:
- Нажмите на значок Настройте сетку на холсте
. - Перетащите курсор от левого или верхнего края сетки, чтобы добавить новые линии.
- Нажмите на значок Настройте сетку на холсте
Настройка контейнера для каждого размера экрана
Настройте контейнер для разных размеров экрана, чтобы он выглядел и вел себя так, как вы хотите в каждом вьюпорте.
- Прикрепите элементы к контейнеру для определенного размера экрана, если они должны отображаться только в данном диапазоне размеров экрана.
- Создайте дизайн и измените положение элементов в контейнере, чтобы настроить их под определенный размер экрана.
- Настройте не вмещающийся контент для экранов разного размера, чтобы элементы не перекрывались при уменьшении размера экрана.
- Примените сетку, чтобы расположить элементы для определенного размера экрана. Подробнее об использовании сеток
Работа с экранами разных размеров:
- Изменения, которые вы вносите в определенный размер экрана, распространяются и на более маленькие размеры экрана. Однако эти изменения не влияют на большие размеры экрана.
- Присоединение или отсоединение элементов от их родительского контейнера применяется ко всем размерам экрана.
Настройка размера контейнера
Управляйте изменением размера контейнера и его элементов по отношению друг к другу, а также к изменением размера экрана. Нажмите значок Инспектор 
в правом верхнем углу, чтобы открыть панель инспектора, а затем отрегулируйте размеры в разделе Варианты размера.
в правом верхнем углу, чтобы открыть панель инспектора, а затем отрегулируйте размеры в разделе Варианты размера.Вы можете установить фиксированные размеры для контейнера, чтобы он оставался неизменным при любом размере экрана, или использовать гибкие измерения, чтобы сделать его адаптивным. Подробнее
Была ли статья полезна?
|