Раздел FAQ живет или умирает по аккордеону: вопросы остаются компактными, ответы появляются нажатием, и страница никогда не кажется длинной. Бесплатный Расширенный виджет Accordion в Мастер-аддоны для Elementor строит этот шаблон. каждый элемент содержит типизированный ответ, и с помощью Master Addons Pro элемент может вместо этого загрузить сохраненный шаблон Elementor, поэтому ответом может быть контактная форма, таблица цен или даже другой аккордеон.
Это руководство проходит через виджет в реальном разделе часто задаваемых вопросов, от списка элементов до стилизованного аккордеона на странице в реальном времени.
Ищете, что делает виджет, а не как его настроить? Обзор виджета Elementor Accordion на одной странице представлены функции, варианты стиля и цены.
Что делает виджет Advanced Accordion #
Виджет отображает стопку складных элементов. в каждой строке есть заголовок, область контента и значок переключения, который переключается между состояниями расширения и свертывания.The Тип аккордеона dropdown выбирает поведение: Аккордеон держит один элемент открытым за раз, закрывая последний, когда открывается новый; Переключить позволяет посетителям держать открытыми несколько предметов одновременно.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Виджет Advanced Accordion включен на панели параметров "Мастер-аддоны" в разделе "Базовые виджеты".
- Опционально: Master Addons Pro и сохраненный шаблон Elementor, если вы хотите загрузить его внутрь предмета аккордеона.
Добавляйте и управляйте предметами аккордеона #
В Содержание вкладка, список элементов содержит одну запись на вопрос. Щелкните элемент, чтобы расширить его настройки, продублируйте или удалите строки со значками рядом с каждым, и нажмите Добавить элемент чтобы расширить список. демо работает из пяти вопросов FAQ по сантехнике.
Под списком расположены общие элементы управления:
- Показать активный/неактивный значок?: переключает значки расширения и свертывания справа от каждого заголовка.
- Разверните значок и сверните значок: две вкладки, по одному пиктограмме. подробнее об этом ниже.
- Скорость переключения (мс): как быстро предметы открываются и закрываются, 300 миллисекунд по умолчанию. Этот дефолт кажется резким; после 600 аккордеон начинает чувствовать, что он буксует.
- Название HTML Тег: разметка вокруг каждого вопроса, по умолчанию div. выберите H3, если вопросы должны соответствовать структуре заголовков страницы.
Вставьте текст или целый шаблон внутрь элемента #
Откройте один элемент и появятся элементы управления для каждого элемента: Активен по умолчанию запускает страницу с открытым элементом, Включить пользовательский значок дает ему собственный значок переключения, и Включить цвет фона (Про) оттеняет только эту строку.
Тот, кого следует помнить Тип контента. Сохраните его на Содержимом для обычного типизированного ответа. с помощью Master Addons Pro вы можете установить его на Сохраненный раздел, сохраненный виджет или сохраненный шаблон страницы и выберите шаблон из вашей библиотеки Elementor. демо загружает раздел контактов, в комплекте с рабочей формой, внутри первого элемента аккордеона:
Так же работают вложенные аккордеоны в Pro: сохранить аккордеон как шаблон, затем загрузить его внутрь предмета другого аккордеона Категории с подвопросами, модули курса с уроками, такого рода структура Два уровня - практический предел; глубже этого и посетители теряют из виду, где они находятся.
Установите значки расширения и свертывания #
The Развернуть значок и Значок свернуть вкладки открывают каждую библиотеку значков Elementor Значок расширения отображается на закрытых элементах, значок свертывания - на открытом.
Лучше всего читают подходящие пары: осторожно, с помощью каретки, плюс с минусом, шеврон с шевроном. Демо-версия оседает на каретках.
Стиль названий #
The Стиль вкладка взламывается Предметы, Название, Содержаниеи Переключить значки. Раздел "Заголовок" содержит Нормальный, Наведите курсори Активный государства, поэтому открытый вопрос может выглядеть иначе, чем остальные.
- Тип фона и цвет: заполнение строки заголовка для каждого штата.
- Цвет текста и типографика: текст вопроса.
- Название Выровнять: слева, в центре или справа.
- Тип границы, радиус границы, тень коробки, набивка: в демо-версии используется радиус 8 пикселей и набивка 20 на 16 для мягких, просторных баров.
Демо-версия придает заголовкам светло-серый фон и синий текст, а обновления холста выполняются вживую, пока сборщик цветов открыт:
Стиль области контента #
The Содержание раздел стилизует панель ответов: Цвет фона, Цвет текста, Типографика, Набивкаи Текстовая тень. Держите фон ответа светлее, чем строки заголовка, чтобы открытые элементы читались как связанные, но отчетливые.
Стиль значков переключателя #
The Переключить значки раздел завершает концы строк.
- Положение значка: слева от заголовка, справа от него или нет.
- Размер значка, расстояние, подкладка: демоверсия работает с 18 пиксельными значками.
- Цвета значков: Нормальное, наведение и активное состояния, каждое из которых имеет цвет фона и значка.
Результат на странице #
На странице в реальном времени аккордеон ведет себя точно так же, как настроено: по одному вопросу, открывающемуся за раз, переворачивающимся кареткам, когда элементы переключаются, и стилизованным заголовкам, сохраняющим сканируемость раздела.
Обычные случаи использования #
- Разделы FAQ на целевых страницах, страницах цен и страницах продуктов.
- Контактные формы или формы котировок внутри ответа, используя тип содержимого Pro Saved Section, например демо-версию.
- Вложенные аккордеоны (Pro) для наборов вопросов категорий и подкатегорий.
- Наброски курса или документации где каждый модуль расширяется на свои уроки.
- Объявления вакансий с ролью названия и подробностями на панели.
Советы по лучшему аккордеону #
- Выберите тип аккордеона для часто задаваемых вопросов. Один открытый ответ помогает посетителям сосредоточиться; Переключить костюмы эталонного контента, который люди сравнивают рядом.
- Откройте по умолчанию самый задаваемый вопрос. Установите "Активно" по умолчанию для лучшего вопроса, чтобы раздел никогда не начинался полностью закрытым.
- Используйте H3 в качестве HTML-тега заголовка на страницах часто задаваемых вопросов. Поисковые системы читают вопросы как правильные заголовки.
- Сохраняйте пары значков согласованными. Каретка, которая меняет направление, мгновенно передает состояние; несовпадающие значки заставляют посетителей задуматься.
- Вес шаблона разума в сохраненных разделах. Форма или таблица внутри предмета великолепны; разрез во всю ширину с тяжелыми изображениями будет загружаться даже в сложенном состоянии.
Видео Учебники #
Если вы лучше посмотрите Advanced Accordion в действии, то в этом видео пройдёт, как легко кто-то может его построить, начните до конца:
А на этом показано, как добавить вложенный аккордеон, загрузив один аккордеон в другой с типом содержимого сохраненного раздела:
Часто задаваемые вопросы #
Что такое виджет Advanced Accordion в Master Addons?
Это виджет Elementor для сворачиваемых разделов контента. вы добавляете элементы с заголовками и ответами, выбираете поведение аккордеона или переключателя, устанавливаете значки расширения и свертывания, а также создаете стилистику заголовков, контента и значков для каждого состояния. Элементы содержат текст или полностью сохраненный шаблон с помощью Master Addons Pro.
В чем разница между типом Accordion и Toggle?
Аккордеон сохраняет один элемент открытым одновременно, закрывая предыдущий элемент, когда открывается новый Переключение позволяет посетителям открывать несколько элементов одновременно и закрывать каждый независимо. оба установлены из раскрывающегося списка Тип Аккордеона на вкладке Содержимое.
Могу ли я поместить форму или шаблон внутрь предмета аккордеона?
Да, с Master Addons Pro. Установите Тип содержимого элемента в Сохраненный раздел и выберите любой шаблон из вашей библиотеки Elementor. демо-версия загружает полный контактный раздел с рабочей формой внутри элемента аккордеона, и любой другой сохраненный шаблон работает таким же образом.
Как создать вложенный аккордеон в Elementor?
Для этого нужны Master Addons Pro.Сначала сохраните аккордеон в качестве шаблона Элементора. Затем в родительском аккордеоне установите тип содержимого элемента в сохраненный раздел и выберите этот шаблон. внутренний аккордеон загружается внутрь внешнего элемента, давая вам два уровня складного содержимого.
Может ли один элемент оставаться открытым по умолчанию?
Да. разверните элемент на вкладке Содержимое и включите Active as Default.Этот элемент начинает открываться при загрузке страницы, что хорошо работает для вопроса, который посетители задают больше всего.
Завершая #
Виджет Advanced Accordion обрабатывает стандартный шаблон часто задаваемых вопросов, а затем идет дальше: значки и фоны для каждого элемента, стиль из трех состояний и, с помощью Pro, тип контента сохраненного раздела, который помещает формы, таблицы или целые вложенные аккордеоны внутри любого элемента. Просмотрите полный набор Виджеты и расширения Master Addgets чтобы увидеть, что еще поставляется с плагином, и посмотреть Страница расширенного виджета Accordion для демо и сравнения с собственной Accordion от Elementor. обратите внимание, что этот виджет не выводит схему часто задаваемых вопросов.
