Редактор Studio: добавление и настройка аккордеона
5 мин.
Используйте элемент «аккордеон», чтобы показать большой объем контента на небольшом пространстве. Позволяя посетителям разворачивать и сворачивать пункты, вы помогаете им легко находить нужную информацию без необходимости прокручивать длинный список.
Добавление элемента «Аккордеон»
Для начала выберите дизайн аккордеона, который вам нравится. Вы можете персонализировать каждый пункт в аккордеоне для отображения контента вашего клиента. Добавьте необходимые элементы и расположите их внутри контейнера так, как вам удобно.
Чтобы добавить элемент «Аккордеон»:
- Нажмите Добавить элементы
в левой части редактора. - Нажмите Инструменты макета.
- Нажмите Аккордеоны.
- Перетащите понравившийся аккордеон на страницу.
- Отредактируйте содержимое пунктов аккордеона:
- Выберите элемент «аккордеон», который вы только что добавили.
- Нажмите Управлять пунктами.
- Нажмите на пункт, который хотите отредактировать.
Совет: при этом пункт откроется на холсте, чтобы вы могли видеть, что в нем отображается в данный момент. - Добавьте в пункт соответствующие элементы и информацию.
Добавление элементов аккордеона и управление ими
Управляйте пунктами, которые отображаются в элементе «аккордеон». Вы можете добавить больше пунктов для контента вашего клиента, дать им новые заголовки и изменить порядок их появления.
Чтобы добавить элементы аккордеона и управлять ими:
- Выберите элемент «аккордеон».
- Нажмите Управлять пунктами.
- Наведите курсор на пункт и нажмите на иконку Другие действия
. - Выберите, что сделать с этим пунктом аккордеона: Создать копию, Переименовать или Удалить.
Советы:
- Нажмите Добавить пункт в нижней части панели, чтобы добавить новый пустой пункт.
- Вы можете изменить порядок пунктов. Удерживайте иконку Изменить порядок
рядом с пунктом и перетащите его в нужное местоположение.
Выбор способа открытия и закрытия аккордеона
Решите, как будет выглядеть ваш аккордеон при загрузке страницы. Вы можете оставить все пункты открытыми, чтобы информация была легко доступна, или закрытыми для более минималистичного вида. Вы также можете выбрать, могут ли посетители открывать несколько пунктов одновременно.
Чтобы выбрать, как открывается и закрывается аккордеон:
- Выберите элемент «аккордеон».
- Нажмите на иконку Настройки
. - Выберите вариант в разделе Выберите состояние по умолчанию:
- Все пункты закрыты: посетители сначала видят пункты аккордеона закрытыми. Они сами выбирают, какой пункт развернуть, чтобы прочитать больше.
- Первый пункт открыт: посетители видят содержимое верхнего пункта, в то время как остальные пункты закрыты.
- Все пункты открыты: посетители видят содержимое всех пунктов при загрузке страницы.
- Нажмите на переключатель Разрешить несколько открытых пунктов:
- Включено: посетители могут открывать в аккордеоне столько пунктов, сколько захотят.
- Выключено: посетители могут открывать только один пункт за раз.
- (Необязательно) Примените эффект перехода, который появляется, когда посетители нажимают на пункт, чтобы открыть его.
Примечание:
Возможность разрешить открытие нескольких пунктов в аккордеоне недоступна, если вы выбрали Все пункты открыты в качестве состояния по умолчанию.
Дизайн аккордеона
Вы можете настроить дизайн каждой части аккордеона так, чтобы он соответствовал остальной части страницы. Настройте заголовки пунктов, контейнеры, в которых отображается содержимое каждого пункта, или все пространство пункта (включая заголовок и контейнер).
Чтобы настроить дизайн аккордеона:
- Выберите элемент «Аккордеон».
- Нажмите на иконку Открыть инспектор
в правом верхнем углу редактора.
- Выберите в выпадающем списке то, что вы хотите настроить:
- Заголовки: это заголовки ваших пунктов. Вы можете настроить заголовки так, чтобы они выглядели иначе при наведении курсора.
- Контейнеры: это контейнеры, в которых отображается содержимое каждого пункта.
- Пункты аккордеона: этот параметр управляет всем пространством пункта аккордеона (включая заголовок и контейнер).
- Используйте доступные параметры, чтобы выбрать различные фоны, шрифты, углы, границы и многое другое.
Настройка макета аккордеона
Настройте макет элемента «аккордеон» в соответствии со своими задачами. Вы можете выбрать выравнивание, отступы и положение заголовков пунктов, а также иконку, которая отображается рядом с каждым заголовком.
Совет:
Вы можете применить сетку CSS к каждой отдельной позиции, чтобы создать свой идеальный макет.
Чтобы настроить макет аккордеона:
- Выберите элемент «аккордеон».
- Нажмите на иконку Макет
. - Настройте макет элемента «аккордеон»:
- Выберите иконку: выберите иконку, которая будет отображаться рядом с заголовками пунктов: Стрелка или Плюс.
- Положение иконки: решите, где будет отображаться иконка — слева или справа от заголовков.
- Расстояние между пунктами: перетащите ползунок, чтобы уменьшить или увеличить расстояние между пунктами.
- Отступы заголовка: перетащите ползунки, чтобы добавить горизонтальные и вертикальные отступы вокруг заголовков пунктов.
- Форматирование: выберите направление и выравнивание пунктов аккордеона.
