Редактор Studio: Добавление и настройка flex-контейнеров
2 мин.
Используйте Flex-контейнеры, чтобы оптимизировать то, как вы представляете контент. Эти расширенные инструменты макета состоят из адаптивных контейнеров, которые плавно подстраиваются под любой размер экрана. Выбирайте из множества типов отображения, таких как Секции, Мозаика и Слайдер, чтобы улучшить стиль и функциональность сайта клиента.
Шаг 1 | Добавление flex-контейнера
Чтобы начать, перейдите в панель «Добавить элементы», выберите пресет flex-контейнера и перетащите его на страницу. Вы сможете изменить число элементов и способ их отображения позже.
Чтобы добавить flex-контейнер:
- Нажмите Добавить элементы
в левой части редактора. - Нажмите Инструменты макета.
- Нажмите Flex-контейнеры.
- Перетащите выбранный flex-контейнер на страницу.
Посмотрите, как это работает:
Перетаскивайте ползунки на холсте, чтобы увидеть, как содержимое Flex-контейнера плавно перестраивается на разных экранах.
Шаг 2 | Добавление элементов в flex-контейнер
Flex-контейнер состоит из нескольких пунктов, которые являются адаптивными контейнерами. Вы можете изменить число пунктов в Flex-контейнере, и он автоматически изменит их размер, чтобы подогнать под доступное пространство.
Чтобы добавить новый элемент, вы можете нажать Добавить элемент или использовать панель «Управление элементами» в Инспекторе.
Шаг 3 | Добавление элементов в flex-контейнер
Выберите, что вы хотите отображать в Flex-контейнере, добавив элементы в его пункты. Вы можете скрыть или показать элементы на разных экранах, чтобы создать уникальный интерфейс для посетителей на любом устройстве.
Чтобы добавить элементы в позицию:
- Нажмите Добавить элементы в левой части редактора.
- Выберите тип элемента, который вы хотите добавить.
- Нажмите на выбранный элемент, чтобы добавить его на страницу.
- Перетащите элемент в позицию flex-контейнера и отпустите, когда увидите надпись Прикрепить.
Что дальше?
Настройте свой flex-контейнер и управляйте им, чтобы отображать нужный контент так, как вам хочется.