Ключевые выводы
- Вкладки предназначены для нескольких параллельных разделов, которые выбирает посетитель. Гармошка предназначена для списка, в котором большинство элементов пропускаются.
- Табы замыкают около четырех или пяти наименований, потому что полоса заканчивается в ширину. аккордеон принимает двадцать без жалоб.
- Аккордеон может иметь несколько панелей, открытых сразу, и может сравнивать их на экране. вкладки показывают ровно одну.
- Аккордеоны были построены для узких экранов. вкладки Elementor обрабатывают телефоны, переходя на гармошку ниже заданной вами точки останова, что является намеком на то, какой шаблон там побеждает.
- Ни скрывает контент от Google Оба виджета помещают каждую панель на страницу HTML и скрывают закрытые с помощью CSS.
Оба шаблона делают одну и ту же работу: сверните длинную страницу, чтобы посетитель прочитал ту часть, за которой пришел. Разница в том, что свернутые предметы друг для друга.
На вкладках написано “выберите один из этих”. аккордеон говорит “здесь список, откройте то, что вам нужно”. Получите это назад, и страница будет бороться с посетителем, что делает это стоит двух минут размышлений.
Оглавление
Фактическая разница
| Вкладки | Аккордеон | |
|---|---|---|
| Названия сидят | В строке или боковом столбце | Сложены друг на друга, каждый над своей панелью |
| Открыть сразу | Один | Один или несколько, ваш выбор |
| Удобный подсчет предметов | Три-пять | Пять-двадцать |
| Все заголовки видны | Да | Да |
| Высота страницы при закрытии | Фиксируется самой высокой панелью | Растет по мере открытия панелей |
| Читает как | “Выберите one” | “Сканировать список” |
| Узкие экраны | Нужен запасной вариант | Работает как построено |
Строка, которая приводит в движение большинство решений, - это количество элементов. полоса вкладок ограничена горизонтальным пространством, а гармошка ограничена только терпением.
Когда вкладки правы
Вкладки подходят, когда разделы являются одноранговыми и посетитель прочитает один из них Три сигнала:
- Три-пять секций, достаточно мало, чтобы вместить полосу.
- Параллельный контент, такой как описание, спецификация, обзоры и доставка на странице продукта: одно и то же, другой срез.
- Каждый посетитель хочет одну из них Никто не читает все четыре, каждый читает одну.
Вкладки также сохраняют предсказуемую высоту страницы, что имеет значение, когда что-то находится прямо под ней и вы не хотите, чтобы оно скакало по экрану.
Когда аккордеон прав
Аккордеон подходит, когда элементы представляют собой список, а не набор вариантов:
- Шесть или более пунктов. часто задаваемые вопросы с двенадцатью вопросами не имеют работающего макета вкладки.
- Большинство предметов пропускают, потому что посетитель открывает два вопроса, которые к ним относятся.
- Предметы очень разной длины, где один ответ - предложение, а другой - пять абзацев. вкладки будут иметь размер до самого длинного.
- Панели, которые посетитель хочет открыть одновременно, чтобы прочитать две политики рядом.
Часто задаваемые вопросы - это самый очевидный случай, поэтому большинство разделов часто задаваемых вопросов, которые вы встречаете, - это гармошки. политики ценообразования, действия по устранению неполадок и разделы документации ведут себя одинаково.
В бесплатном плагине Elementor есть виджет Accordion. The Расширенная гармоника Master Addons добавляет несколько вещей сверху: элемент управления типом гармошки, который переключается между поведением аккордеона (одна панель за раз) и поведением переключения (независим от каждой панели), специальные значки расширения и свертывания, активный по умолчанию для каждого элемента, скорость переключения за миллисекунды и HTML-тег заголовка.
Какие телефоны решают
Гармошка - это уже вертикальный стек из строк во всю ширину, поэтому экран с разрешением 390px ничего в нем не меняет. вкладки - это тот шаблон, который должен адаптироваться.
Виджет Elementor Tabs переключается на вертикальную компоновку аккордеона ниже выбранной вами точки останова, по умолчанию используется мобильная панель. вкладки Addon укладывают свои заголовки в столбец полной ширины с панелью под списком.
Исправление для вкладок на телефоне, другими словами, стать гармошкой. если большая часть вашего трафика мобильная, построение гармошки с самого начала пропускает макет, который когда-либо существует только на рабочем столе.
Вопрос SEO
Свернутый контент индексируется Оба виджета помещают каждую панель на страницу HTML и скрывают неактивные с помощью CSS, поэтому сканер Google читает все это Вы можете подтвердить это на собственной странице, просмотрев исходный код и выполнив поиск текста с закрытой панели.
Действительно стоит позаботиться о двух вещах:
- Не скрывайте, о чем страница. Если посетителю нужно нажать, чтобы узнать, что вы продаете, этот контент не принадлежит третьей вкладке, что бы сканер ни мог прочитать.
- Часто задаваемые вопросы структурированные данные поступают из вашего плагина SEO, а не из любого виджета. Rank Math и Yoast создают разметку FAQPage из своего собственного поля блока или схемы, поэтому аккордеон - это представление, а схема устанавливается отдельно.
Где подходит Toggle
В этом сравнении Toggle появляется потому, что раньше у Elementor был виджет Toggle, а также потому, что “toggle” означает две разные вещи.
Старый виджет Toggle от Elementor был аккордеоном под другим названием: стек расширяемых строк Он устарел с версии 3.15, а редактирование одного теперь показывает уведомление, говорящее вам перетащить в виджет Accordion вместо. Итак, при текущей установке вопрос tabs versus accordion уже поглотил его.
Другое значение - переключатель с двумя состояниями, при котором один элемент управления переворачивает страницу между двумя версиями одного и того же контента. Вот что Мастер-аддоны Переключить контент виджет делает: два ярлыка, переключение между ними и блок контента за каждым. Ежемесячный против годовых цен - очевидный случай, а показатель против имперских единиц - еще один.
Это третий шаблон, а не вариация первых двух. Используйте его, когда есть ровно два состояния и посетитель переключается между ними. Три или более опции означают вкладки, а список для сканирования означает аккордеон. Если вам нужен аккордеон, панели которого открываются и закрываются независимо, то есть элемент управления типом аккордеона, установленный на Toggle.
Используя оба вместе
Они хорошо сочетаются, потому что отвечают на разные вопросы.
Страница сравнения планов может использовать вкладки для Monthly и Yearly, с гармошкой деталей функций внутри каждой вкладки Внешний уровень - это выбор между двумя одноранговыми устройствами; внутренний уровень - это список для сканирования. Вложенные вкладки делают это простым, поскольку каждая панель представляет собой контейнер, принимающий виджет аккордеона.
Вкладки внутри вкладок - это комбинация, которая не работает, поскольку она просит посетителя запомнить, какую пару заголовков он выбрал.
Что дает вам Элементор за каждого
Оба виджета находятся в бесплатном плагине, и оба являются вложенными виджетами, поэтому панели содержат контейнеры.
Вкладки добавляют Направление для горизонтальной или вертикальной, Горизонтальная прокрутка для длинной строки заголовка, и Точка останова, которая переключается на гармошку Виджет Accordion имеет Max Items Expanded, который решает, закрывает ли открытие одной панели другие Виджет Master Addons выполняет эту работу с его управлением Accordion Type.
Виджеты аддонов расширяют оба. на стороне вкладок вы получаете предустановки стиля, заголовки изображений и переключение наведения, описанные в расширенные вкладки пост. На стороне аккордеона вы получаете элементы управления значками, режим переключения и состояние по умолчанию для каждого элемента.
Часто задаваемые вопросы
Гармошка лучше вкладок?
Для шести и более пунктов, для часто задаваемых вопросов и для страниц с большим количеством мобильных устройств да. Для трех-пяти параллельных разделов на странице рабочего стола вкладки читаются лучше.
Индексирует ли Google контент внутри вкладок и аккордеонов?
Да. панели находятся в HTML, открытые или закрытые, поэтому сканер их читает.
Можно мне положить аккордеон внутрь вкладки?
Да. Каждая панель вложенных вкладок - это контейнер, поэтому виджет гармошки падает прямо внутрь.
Сколько вкладок слишком много?
Пять - практичный потолок, и меньше, если названия длинные или несут значки. за этим полоса обертывается и гармошка является лучшим узором.
А виджет Toggle?
Виджет Toggle от Elementor устарел с 3.15 и указывает на виджет Accordion.Toggle в смысле switch, переключаясь между двумя версиями одного и того же контента, представляет собой отдельный шаблон и нуждается в созданном для него виджете.
Какой из них мне следует использовать для часто задаваемых вопросов?
Аккордеон. Вопросы представляют собой список для сканирования, а не набор вариантов, и макет остается читаемым при двенадцати вопросах, которыми не управляет ни одна полоса табуляции.
Заключительные мысли
Посчитайте предметы, затем спросите, что они друг для друга Короткий набор пиров, где каждый читает один является вкладками Длинный список, где большинство пунктов пропускается является гармошкой Мобильный решает любые оставшиеся сомнения, так как вкладки на телефоне превращаются в аккордеон в любом случае.
Связанное чтение
