Длинная страница с характеристиками, отзывами и инструкцией: пользователь скроллит, теряется и уходит. Магазины эту проблему решили давно, разбили описание, параметры и обзоры на вкладки. Без перезагрузки, без скролла до нужного блока.

Но вкладки полезны не только интернет-магазинам. Посмотрите на страницу любого плагина на WordPress.org: информация, отзывы, установка, всё разнесено по закладкам. Пользователь видит структуру сразу и переключается туда, куда нужно.

Ниже, два рабочих способа добавить вкладки в записи и страницы WordPress. Первый, через конструктор страниц, если он уже стоит. Второй, через бесплатный плагин Tabs Responsive, если вам нужны вкладки без привязки к конкретному билдеру.

💡 Быстрый обзор:

• Проверьте, есть ли в вашем конструкторе страниц модуль вкладок
• Установите бесплатный плагин Tabs Responsive из каталога WordPress.org
• Создайте вкладки в drag-and-drop построителе и наполните контентом
• Вставьте сгенерированный шорткод на нужную страницу или в виджет

Чем вкладки отличаются от аккордеонов

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

По данным Nielsen Norman Group, аккордеоны уместны, когда пользователю нужен только один раздел из нескольких. Вкладки, когда посетитель, скорее всего, переключится между закладками за один визит. Для страницы продукта вкладки выигрывают: покупатель сравнивает характеристики и описание в одном окне, не теряя контекст.

Обратите внимание: если контента в закладке больше одного экрана, аккордеон может быть удобнее. Длинная вкладка заставляет скроллить так же, как обычная страница.

Способ 1: вкладки через конструктор страниц

Если вы уже пользуетесь конструктором страниц, повезло. У большинства популярных билдеров модуль вкладок идёт из коробки.

Elementor

🔗 Elementor на WordPress.org

Elementor, самый популярный конструктор страниц для WordPress: 10+ миллионов активных установок и 40-50% рынка page builder-ов, по данным Colorlib за 2026. Модуль вкладок входит в бесплатную версию. Перетащите элемент «Tabs» на страницу, отредактируйте заголовки и контент закладок, настройте стиль под дизайн сайта.

Плюс в том, что вкладки Elementor наследуют глобальные стили: шрифты, цвета и отступы подхватываются автоматически. Отдельно править CSS не нужно.

WPBakery

🔗 WPBakery, официальный сайт

WPBakery (ранее Visual Composer), премиум-конструктор, который часто поставляется с темами. В отличие от Elementor, модуль вкладок здесь изначально пуст: вы добавляете в каждую закладку отдельные элементы, текст, изображения, иконки, кнопки. Это даёт больше гибкости, но и чуть больше действий при настройке.

Если нужна подробная инструкция по WPBakery, у нас есть отдельное руководство.

Способ 2: плагин Tabs Responsive, пошаговая настройка

Конструктора страниц нет, а ставить билдер только ради вкладок, перебор. Tabs Responsive, бесплатный плагин из каталога WordPress.org, который делает ровно то, что обещает: добавляет вкладки в любую запись или страницу через шорткод или виджет.

🔗 Tabs Responsive на WordPress.org

Плагин жив и обновляется: 20 000+ активных установок, рейтинг 4,7 из 5, 500+ отзывов, последнее обновление, май 2026, совместимость с WordPress 6.8.3. Бесплатная версия включает один шаблон дизайна, горизонтальный и вертикальный стиль, поддержку иконок Font Awesome. Pro добавляет 20+ шаблонов, 500+ шрифтов Google и анимацию контента.

Шаг 1: установка

В админке WordPress перейдите в Плагины → Добавить новый, введите в поиске tabs responsive. Найдите плагин от wpshopmart, нажмите Установить сейчас, затем Активировать.

После активации в левом меню появится новый пункт «Tabs Responsive».

Шаг 2: создание первых вкладок

Перейдите в Tabs Responsive → Add New Tabs. Откроется drag-and-drop построитель.

Сначала дайте набору вкладок описательное название, например, «Характеристики товара» или «Вкладки главной». Пригодится, когда у вас будет несколько наборов для разных страниц.

Построитель выглядит внушительно, но логика простая:

Теперь заполните сами вкладки. В секции Добавить вкладки для каждой закладки настройте:

• Заголовок вкладки, то, что увидит пользователь на ярлычке: «Описание», «Характеристики», «Отзывы».
• Описание вкладки, контент закладки. Работает полноценный WYSIWYG-редактор: можно вставлять изображения, видео, музыку, другие шорткоды.
• Иконка вкладки, выберите значок из библиотеки Font Awesome, встроенной в плагин.
• Отображать над иконкой, опция размещает заголовок над значком или отключает иконку, оставляя только текст.
• Удалить, кнопка удаления конкретной закладки.
• Добавить новые вкладки, добавляет пустую закладку в набор.
• Удалить все, сбрасывает все закладки разом.

Закладки можно перетаскивать, меняя порядок. Нажимайте Сохранить черновик в процессе, если случайно уйти со страницы, изменения не потеряются.

Шаг 3: дизайн и стили

Внешний вид вкладок настраивается в правой боковой панели построителя.

Бесплатная версия предлагает один шаблон дизайна:

Pro-версия добавляет ещё 19 шаблонов. Но даже в бесплатной вы можете настроить: цвет фона и шрифта, семейство шрифтов, отступы, границы, выравнивание иконки, анимацию переключения.

Если стандартных настроек не хватает, в плагине есть поле для пользовательского CSS:

Здесь же кнопка Обновить настройки по умолчанию, нажмите её, чтобы все новые наборы вкладок создавались с текущими параметрами стиля.

Шаг 4: публикация вкладок на странице

Когда контент и стиль готовы, нажмите Опубликовать в верхней части экрана.

Плагин сгенерирует шорткод вида [TABS_R id=443]. Скопируйте его.

Откройте запись или страницу, куда нужно добавить вкладки, и вставьте шорткод в нужное место. Работает в любом редакторе, и в классическом, и в Gutenberg.

Если нужно добавить вкладки в сайдбар или футер, используйте виджет Tabs Responsive. Перейдите в Внешний вид → Виджеты:

Нажмите на ссылку «Click here», и вы попадёте на экран виджетов, где можно перетащить виджет в любую область:

Результат через 5-7 минут настройки выглядит так:

Цвета и стили здесь базовые, при желании докрутите их в правой панели построителя или через пользовательский CSS.

Посмотрите видео, чтобы увидеть весь процесс от установки до готовых вкладок на странице:

⁉️🤔 Частые вопросы

Работают ли вкладки на мобильных устройствах?

Да. Плагин Tabs Responsive построен на Bootstrap, поэтому вкладки адаптируются под любой экран. На узких экранах горизонтальные вкладки могут превращаться в вертикальный список или аккордеон, зависит от выбранного шаблона. Проверьте, как вкладки выглядят на телефоне после настройки: если текст закладок длинный, вертикальный стиль может оказаться удобнее горизонтального.

Можно ли добавить вкладки в тело записи без плагина?

Без плагина или конструктора, нет, если только вы не напишете собственный код на JavaScript и CSS. WordPress из коробки не даёт готового решения для вкладок в контенте. Плагин Tabs Responsive решает задачу без кода: установка и настройка занимают минуты, результат, через шорткод. Это компромисс между «не хочу ставить плагин» и «не хочу писать код с нуля».

Вкладки влияют на SEO?

При правильной реализации, нет. Контент всех вкладок загружается в HTML страницы при первом рендеринге, Google его видит и индексирует. Плагин Tabs Responsive отдаёт весь контент в исходном коде, а не подгружает асинхронно, это безопасно для SEO. Проблемы могут возникнуть только с вкладками на AJAX-подгрузке (контент закладки загружается только по клику), такие решения используйте с осторожностью.

Что делать, если вкладки конфликтуют с темой?

Конфликт стилей, самая частая проблема. Сначала попробуйте поле пользовательского CSS в настройках плагина: обычно хватает пары строк, чтобы поправить цвет фона или отступы под тему. Если не помогло, переключитесь с горизонтального стиля на вертикальный в настройках шаблона, иногда проблема только в одном из режимов. Крайний случай, форум поддержки плагина на WordPress.org: разработчик отвечает и помогает с конфликтами.

Чем Tabs Responsive отличается от вкладок в конструкторе?

Плагин не привязан к конкретному билдеру. Если вы решите сменить конструктор или перейти на нативный редактор блоков, вкладки через шорткод продолжат работать. С вкладками Elementor или WPBakery такой гибкости нет: при смене конструктора вкладки исчезают вместе с ним. Кроме того, Tabs Responsive умеет вертикальный стиль, виджет и иконки, не каждый билдер даёт это в бесплатной версии.

Что ставить под вашу задачу

Если конструктор страниц уже установлен, берите его модуль вкладок. Это быстрее: один drag-and-drop, и вкладки на странице.

Если конструктора нет, плагин Tabs Responsive. Он бесплатный, обновляется и не привязывает вас к конкретному билдеру. Шорткод и виджет работают в любой теме и любом редакторе.

Для интернет-магазинов на WooCommerce плагин добавляет отдельную вкладку с описанием в карточку товара, этого нет у вкладок Elementor.

Попробуйте Tabs Responsive на тестовом сайте: установка занимает минуту, а первые вкладки вы соберёте за 5 минут. Если застряли на каком-то шаге, загляните в видео выше или напишите в комментариях, разберёмся.