Центр поддержки Wix
    Главная
  1. Создание сайта
  2. Editor X
  3. Добавление элементов в Editor X
    4. Editor X: добавление и настройка аккордеона

Editor X: добавление и настройка аккордеона

5 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Используйте элемент «Аккордеон», чтобы показать большой объем контента на небольшом пространстве. Позволяя посетителям разворачивать и сворачивать элементы, они могут легко найти нужную информацию без необходимости прокручивать длинный список.
GIF, показывающий пример элемента Аккордеон на сайте Editor X.
Содержание:

Добавление аккордеона

Чтобы начать, выберите дизайн аккордеона, который вам нравится. Вы можете персонализировать каждый элемент аккордеона, чтобы отображать свой контент. Добавьте нужные элементы и расположите их внутри контейнера по своему усмотрению. 

Чтобы добавить аккордеон:

  1. Нажмите Добавить элементы  в верхней части Editor X.
  2. Нажмите Для лейаута.
  3. Выберите Аккордеон.
  4. Перетащите понравившийся аккордеон на страницу. 
  5. Отредактируйте содержимое каждого элемента в аккордеоне:
    1. Нажмите на аккордеон в редакторе.
    2. Нажмите Управление.
    3. Нажмите на элемент, который хотите отредактировать. Это откроет элемент, чтобы вы могли увидеть, что он показывает на данный момент.
    4. Добавьте к элементу нужные элементы и информацию.
Снимок экрана панели «Добавить элементы», где вы можете добавить новый элемент «Аккордеон».

Добавление элементов в аккордеон и управление ими

Управляйте элементами, которые отображаются в аккордеоне. Вы можете добавить больше элементов в контент, дать им новые названия и изменить их порядок отображения.

Чтобы добавить элементы в аккордеон и управлять ими:

  1. Нажмите на аккордеон в редакторе.
  2. Нажмите Управление.
  3. Наведите курсор на элемент и нажмите значок Дополнительные действия .
  4. Выберите, что делать с аккордеоном: Создать копию, Переименовать или Удалить.
Советы:
  • Нажмите Добавить элемент в нижней части панели, чтобы добавить новый пустой элемент.
  • Вы можете изменить порядок элементов. Удерживайте значок изменения порядка  рядом с элементом и перетащите его в нужное место.
Скриншот панели управления аккордеоном, где вы можете добавлять, переименовывать, дублировать, удалять и изменять порядок элементов

Выбор способа открытия и закрытия аккордеона

Решите, как будет выглядеть аккордеон, когда посетители загружают страницу. Вы можете открыть все элементы, чтобы информация была легко доступна, или закрыть для более лаконичного вида. Вы также можете выбрать, могут ли посетители открывать несколько элементов одновременно.  

Чтобы выбрать способ открытия и закрытия аккордеона:

  1. Нажмите на аккордеон в редакторе.
  2. Нажмите на значок Настроить .
  3. Выберите вариант в разделе Выберите состояние по умолчанию:
    • Все элементы закрыты: посетители сначала видят закрытые элементы аккордеона. Они выбирают, какой элемент раскрыть, чтобы прочитать больше.
    • Открыт первый элемент: посетители видят содержимое верхнего элемента, в то время как другие элементы закрыты.
    • Все элементы открыты: посетители видят содержимое всех элементов при загрузке страницы. 
  4. Нажмите переключатель Несколько открытых элементов:
    • Включено: посетители могут иметь столько открытых элементов, сколько захотят. 
    • Отключено: посетители могут открывать только один элемент за раз.
  5. (Необязательно) Добавьте эффект перехода, который появляется, когда посетители нажимают на элемент, чтобы открыть его.
Скриншот панели настроек аккордеона, где вы можете настроить способ ее открытия и закрытия.

Дизайн аккордеона

Вы можете настроить каждую часть аккордеона таким образом, чтобы она соответствовала остальной части страницы. Настройте заголовки элементов, контейнеры, которые показывают содержимое каждого элемента, или все пространство элемента (включая заголовок и контейнер).

Чтобы настроить дизайн аккордеона:

  1. Нажмите на аккордеон в редакторе.
  2. Нажмите на значок Инспектора в верхней части Editor X.
  3. Перейдите на вкладку Дизайн .
  4. Выберите, дизайн чего вы хотите настроить, из раскрывающегося списка:
    • Заголовки: это заголовки элементов. Вы можете настроить заголовки таким образом, чтобы они выглядели по-разному при наведении курсора на них. 
    • Контейнеры: это контейнеры, в которых отображается содержимое каждого элемента.
    • Элементы аккордеона: управляют всем пространством элемента (включая заголовок и контейнер).
  5. Используйте доступные параметры, чтобы выбрать различный фон, шрифты, углы, границы и многое другое.
Скриншот вкладки Дизайн в Инспекторе, где вы можете создать дизайн элемента Accordion

Настройка макета аккордеона

Настройте макет аккордеона по своему усмотрению. Вы можете выбрать выравнивание, отступы и положение заголовков элементов, а также значок, который отображается рядом с каждым заголовком.

Чтобы настроить макет аккордеона:

  1. Нажмите на аккордеон в редакторе.
  2. Нажмите значок Макет .
  3. Настройте макет аккордеона:
    • Выберите значок: выберите значок, который отображается рядом с названиями элементов: стрелка или плюс. 
    • Положение значка: решите, будет ли значок отображаться слева или справа от заголовков. 
    • Отступы заголовка: перетащите ползунки, чтобы добавить отступы по горизонтали и вертикали вокруг названий элементов. 
Скриншот панели макета аккордеона в Editor X
Совет:
Каждый элемент имеет встроенную сетку 1x1 , которую вы можете настроить. Добавьте больше строк и столбцов, чтобы создать идеальный макет.

Была ли статья полезна?

|
В этой статье
  • Добавление аккордеона
  • Добавление элементов в аккордеон и управление ими
  • Выбор способа открытия и закрытия аккордеона
  • Дизайн аккордеона
  • Настройка макета аккордеона