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

Але вкладки корисні не лише інтернет-магазинам. Подивіться на сторінку будь-якого плагіна на 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 хвилин. Якщо застрягли на якомусь кроці, зазирніть у відео вище або напишіть у коментарях, розберемося.