Редактор Studio: управление и настройка flex-контейнеров
Управляйте своими flex-контейнерами и настраивайте их, чтобы создать уникальный интерфейс для посетителей. Вы можете изменять размер элементов в соответствии со структурой страницы, настраивать параметры отображения, а также добавлять, удалять и менять порядок элементов в процессе работы.
Studio Editor: Управление элементами Flex-контейнера
Управляйте элементами flex-контейнера, чтобы персонализировать контент и поддерживать его в актуальном состоянии. Вы можете скрывать элементы на определенных размерах экрана, менять их порядок и многое другое.
Чтобы управлять элементами flex-контейнера в инспекторе:
- Выберите нужный flex-контейнер.
- Нажмите на иконку Открыть инспектор
в правом верхнем углу редактора.
- (В Инспекторе) Нажмите Управлять рядом с количеством элементов.
- Выберите, что вы хотите сделать с элементами:
- Изменить порядок: удерживайте значок Изменить порядок
рядом с нужным элементом и перетащите его на новую позицию. - Управление:
- Нажмите на значок Другие действия
рядом с нужным элементом. - Управляйте элементами, используя следующие параметры:
- Создать копию: создание копии определенного элемента.
- Переименовать: присвойте каждому элементу понятное имя.
- Удалить: полное удаление элемента.
- Скрыть: скройте этот элемент на конкретном размере экрана, с которым вы работаете.
- Нажмите на значок Другие действия
- Изменить порядок: удерживайте значок Изменить порядок
Studio Editor: Настройка отображения Flex-контейнера
Выберите тип отображения flex-контейнера, который дополнит структуру страницы. Измените тип отображения прямо на холсте или перейдите в панель инспектора, если хотите настроить такие параметры, как отступы, направление и ширина.
Чтобы настроить отображение:
- Выберите нужный flex-контейнер.
- Нажмите на иконку Открыть инспектор в правом верхнем углу редактора.
- Прокрутите вниз до раздела Макет.
- (Необязательно) Нажмите Тип отображения и выберите тип из выпадающего списка.
- Настройте flex-контейнер в зависимости от выбранного типа отображения:
- Направление: определите, как будут организованы элементы: слева направо или справа налево.
- Пропорции элементов: нажмите Выровнять, чтобы задать всем элементам flex-контейнера одинаковые параметры размера.
- Ширина элемента: выберите ширину элементов flex-контейнера в процентах или установите для всех максимальную ширину.
- Разрывы: введите значение (в пикс., vh, vw или в масштабе) для горизонтальных и вертикальных отступов между элементами flex-контейнера. Примечание: если вы выбираете отображение в виде слайдера или слайдов, доступные параметры (горизонтальные или вертикальные) зависят от выбранного направления слайдера.
- Выравнивание элементов: выберите способ выравнивания и позиционирования элементов. В зависимости от желаемого вида вы можете выровнять элементы по краям flex-контейнера (в начале или в конце) или создать пространство между элементами или вокруг них.
- Переполнение контента: выберите, скрывать или отображать контент, выходящий за границы.
- Направление слайдера: отображайте элементы в горизонтальном или вертикальном слайдере.
- Привязка прокрутки: нажмите переключатель, чтобы включить эту функцию. При прокрутке слайдов flex-контейнера он «примагничивается» к каждому элементу (слайду), чтобы посетители ничего не пропустили.
- Элементов на слайд: установите количество элементов, отображаемых при одном действии прокрутки.
- Навигация: добавьте стрелки, кнопку или текст, чтобы помочь посетителям перемещаться по элементам.
- Показать полосу прокрутки: покажите или скройте полосу прокрутки для перемещения по элементам.
Примечания:
- Доступные настройки зависят от выбранного макета.
- Некоторые старые браузеры не поддерживают разрывы (например, Chrome 76-83, Safari 12-14 и Edge 79-83). Это означает, что посетители, которые заходят на сайт вашего клиента из этих браузеров, не увидят разрывы, установленные между элементами flex-контейнера.
Работа с размерами экрана:
- Вы можете установить свой макет flex-контейнера для каждого размера экрана.
- Мы рекомендуем использовать макет в виде секции или слайдера на экранах меньшего размера, таких как смартфоны.
Studio Editor: Изменение размера элементов Flex-контейнера
Вы можете изменить размер каждого отдельного элемента flex-контейнера, чтобы сделать его больше или меньше остальных. Используйте панель Инспектора, чтобы настроить ширину и высоту каждого элемента, а также горизонтальные и вертикальные поля вокруг них.
Чтобы изменить размер элемента:
- Выберите нужный flex-контейнер.
- Выберите элемент, размер которого нужно изменить.
- Нажмите на иконку Открыть инспектор в правом верхнем углу редактора.
- Выберите способ настройки элемента:
- Размер: введите выбранный размер в поля в верхней части панели Инспектора. Вы можете нажать на текущую единицу измерения, чтобы изменить ее.
- Поля: прокрутите вниз до раздела Позиция в панели Инспектора, чтобы установить верхнее, нижнее и боковые поля для этого конкретного элемента.
