Редактор Studio: использование контейнеров
4 мин.
Контейнеры — это инструменты адаптивного макета, которые помогают упорядочить и структурировать контент сайта. Вы можете настроить их в соответствии с дизайном сайта и прикрепить такие элементы, как текст, медиафайлы и кнопки.
Добавление контейнеров на сайт
Начните с добавления контейнера, который соответствует дизайну и контенту клиента. Вы можете выбрать один из готовых вариантов или контейнеров с эффектом при наведении, либо создать свой дизайн с нуля.
Чтобы добавить контейнер:
- Нажмите Добавить элементы
в левой части редактора. - Выберите Контейнеры.
- Выберите стиль контейнера (пустой, с дизайном или с эффектом при наведении).
- Перетащите выбранный контейнер на страницу.
Дизайн контейнеров
Настройте дизайн контейнера в соответствии с эстетикой сайта. Вы можете изменить цвет фона, установить радиус и многое другое.
Чтобы настроить дизайн контейнера:
- Выберите нужный контейнер.
- Нажмите на иконку Открыть Инспектор
в правом верхнем углу редактора.
- Выберите способ настройки контейнера в разделе Дизайн:
- Фон: настройте фон и его прозрачность:
- Цвет: выберите цвет из палитры стиля сайта или создайте свой оттенок.
- Градиент: примените градиент или линейный градиент к контейнеру. Вы можете выбрать цвета, углы и другие параметры.
- Эффект стекла: примените эффект матового стекла к контейнеру и настройте интенсивность размытия.
- Граница: добавьте границу к контейнеру и используйте настройки, чтобы задать ее размер, цвет и прозрачность.
- Углы: отрегулируйте радиус углов контейнера (в пикс.), чтобы сделать их более округлыми или квадратными.
- Тень: добавьте и настройте эффект тени для контейнера.
- Фон: настройте фон и его прозрачность:
Прикрепление элементов к контейнерам
При размещении элементов внутри контейнера они прикрепляются автоматически. Это означает, что вы можете перемещать контейнер вместе с прикрепленными элементами как единое целое и просматривать их вместе на панели Слои.
Чтобы прикрепить элемент к контейнеру:
- Нажмите на нужный элемент.
- Перетащите его в нужное место в контейнере.
- Отпустите элемент, когда увидите сообщение Прикрепить.
Настройка адаптивности контейнера
При добавлении контейнера на страницу он уже имеет встроенное адаптивное поведение. Это означает, что вам не нужно беспокоиться о том, как элемент выглядит на разных экранах — адаптивное поведение обеспечивает изменение его размера.
Однако вы можете изменить адаптивное поведение, если найдете вариант, который больше подходит для вашего дизайна.
Чтобы настроить адаптивность контейнера:
- Выберите нужный контейнер.
- Нажмите на иконку Открыть Инспектор в правом верхнем углу редактора.
- Нажмите на выпадающий список в пункте Адаптивность и выберите нужный вариант:
- Пропорциональный масштаб: пропорции контейнера (ширина и высота) сохраняют одинаковое соотношение сторон на всех экранах.
- По ширине: ширина контейнера изменяется автоматически относительно родительского элемента.
- Неизменный: ширина и высота контейнера всегда остаются прежними и не меняются в зависимости от размера экрана.
- Растянуть: контейнер растягивается, чтобы заполнить родительский элемент (например, ячейку или раздел), на каждом размере экрана.
Применение сетки к контейнеру
Примените расширенную сетку CSS к контейнеру, чтобы структурировать его макет. Вы можете выбрать необходимое число строк и секций, а также задать их размер с помощью адаптивных единиц измерения (например, fr, Min/max, %)
Чтобы применить сетку к контейнеру:
- Выберите нужный контейнер.
- Нажмите на иконку Другие действия
. - Нажмите Применить расширенную сетку CSS.
- Выберите макет в выпадающем списке 1x1.
Совет: выберите Другое, если хотите установить собственное число строк и секций.
