Вкладки є досить поширеною функцією на багатьох веб-сайтах, особливо в інтернет-магазинах. Власники магазинів електронної комерції зазвичай використовують вкладки для опису товару, де вони розміщують огляди, опис, технічні характеристики та інше.
Тим не менш, вкладки знайшли застосування і в багатьох інших типах веб-сайтів, а не тільки на веб-сайтах електронної комерції. Навіть офіційний сайт WordPress.org використовує вкладки на сторінках опису плагінів.
Однак, вкладки не слід плутати з акордеонами, які розширюються для розкриття інформації.
По суті, веб-власники використовують вкладки для поділу інформації, яка інакше зайняла б цілу сторінку чи пост. Це означає, що вкладки значно спрощують засвоєння інформації, не змушуючи користувачів натискати на колесо прокручування мільйон разів.
Іншими словами, вкладки підвищують зручність використання вашого веб-сайту. Тому, якщо ви хочете, щоб користувачі залишалися на вашому сайті довше, не стомлюйте їх довгими сторінками. Розгляньте можливість використання вкладок.
У сьогоднішньому пості ми покажемо, як саме додавати вкладки до постів та сторінок. До кінця цієї посади у вас будуть всі інструкції, необхідні для використання вкладок на WordPress.
Використовуйте конструктор сторінок
Якщо у вас вже встановлено компонувальник сторінок, вам пощастило – швидше за все модуль вкладок у вас під рукою. Більшість основних конструкторів сторінок пропонують вкладки як частину основного набору елементів.
Ось короткий огляд двох наших фаворитів:
- Безкоштовний Elementor Page Builder
Популярний конструктор сторінок Elementor включає вкладки як частину безкоштовної версії плагіна. Все, що потрібно зробити, це вставити елемент табуляції на свою сторінку, потім відредагувати заголовок, контент, стиль та інші опції.
- Преміум WPBakery Page Builder
Ви використовуєте преміум-тему, яка включає WPBakery Page Builder? Тоді вкладки вбудовані та прості у використанні.
Модуль вкладок WPBakery трохи відрізняється від попереднього прикладу, оскільки вкладки при їх додаванні спочатку порожні. Вам потрібно вставити додаткові елементи сторінки (текстову область, зображення, значки та інше) у вкладки, щоб додати свій контент. Але це дає безліч свободи для створення вкладок так, як ви хочете (на додаток до вбудованих параметрів стилів).
Дивіться також:
Корисні плагіни WordPress для контент-маркетологів
Плагін Tabs WordPress
Якщо ви не використовуєте конструктор сторінок, вам не потрібно використовувати його тільки для вкладок. Існує безліч чудових альтернатив. Наприклад, безкоштовний плагін WordPress, відомий як Tabs від WP Shop Mart. Tabs - це якісний плагін WordPress для створення необмеженої кількості красивих вкладок.
Так як він доступний в офіційному репозиторії плагінів WordPress, можна встановити плагін прямо з панелі адміністратора WordPress.
Є преміум версія, якщо ви хочете отримати додаткові функції. Можна оновитись до преміум версії у будь-який момент.
Установка плагіна Tabs
На панелі адміністратора WordPress перейдіть до «Плагіни»–> «Додати новий» і введіть "tabs wpshopmart" у полі пошуку за ключовими словами. Як тільки ви знайдете потрібний плагін, натисніть кнопку «Встановити зараз».
Після цього натисніть кнопку «Активувати». Ваш плагін WordPress для налаштування вкладок готовий до роботи. Тепер створимо кілька вкладок і дізнаємося, що пропонує цей плагін.
Налаштування адаптивних вкладок
Активація плагіна додасть новий пункт до вашого адмін-меню WordPress. Щоб створити нові вкладки, перейдіть до Адаптивні вкладці -> Додати нові вкладки:
Плагін направить вас до адаптивного виробника вкладок, який містить всі функції, необхідні для створення красивих вкладок. Нижче показані різні варіанти, пропоновані плагіном:
Досить довгий скрін, чи не так? Ви можете знайти більшість функцій на правій бічній панелі. Також зверніть увагу, що окремі вкладки мають налаштування. Можна використовувати редактори WYSIWYG на вкладках, тобто у вас буде багато можливостей при роботі з вкладками.
Наприклад створимо кілька вкладок і відобразимо їх на сторінці або в публікації.
Додати заголовок
Почніть з того, що дайте своїм вкладкам описовий заголовок, як показано на малюнку вище. Таким чином, ви можете легко ідентифікувати вкладки на панелі адміністратора WordPress пізніше, якщо вам потрібно щось редагувати. Для цього уроку вкладка названа «Тестування домашніх вкладок».
Виберіть шаблон дизайну вкладок
Як видно на скріншоті вище, наступний крок включає вибір шаблону дизайну для своїх вкладок. Безкоштовна версія плагіна пропонує лише один шаблон дизайну (але ви завжди можете оновити до преміум-версії за 19+ доларів).
Додати вкладки
Потім додайте стільки вкладок, скільки хочете:
Нумерований список нижче описує те, що можна зробити в розділі «Додати вкладки», як показано на малюнку вище. Пункти списку відповідають кожній області.
- Заголовок вкладки – додайте заголовок вкладки до цього поля, наприклад «Опис», «Технічні характеристики», «Деталі» та інше.
- Опис вкладки – поле дозволяє додавати вміст вкладки. Найприємніше, що ви можете використовувати редактор WYSIWYG (показаний у пункті 3 нижче), щоб додати у вкладки багатофункціональний контент, включаючи зображення, музику та відео.
- Використання WYSIWYG – якщо ви хочете використати знайомий W капелюх- Y оу- S е-е- I s- W капелюх- Y оу- G ЕТ – редактор для створення вмісту вкладки, не соромтеся натиснути на цю кнопку, щоб запустити його.
- Значок вкладки – плагін пропонує доступ до безлічі значків Font Awesome, що пожвавить ваші вкладки та зробить їх професійними.
- Відображати поряд із позначкою – якщо ви хочете відобразити заголовок вкладки поруч із позначкою, вам сподобається ця функція. Крім того, можна вимкнути значок, не торкаючись заголовка вкладки.
- видалити – натисніть цю кнопку, щоб видалити конкретну вкладку.
- Додати нові вкладки – натисніть цю кнопку та додайте більше вкладок.
- Видалити всі - Втомилися від усіх вкладок? Натисніть кнопку Видалити всі, щоб скинути всі вкладки.
Бонусні поради:
- Можна перетягувати вкладки, щоб змінити порядок та розташувати їх за власним бажанням.
- Не забувайте натискати кнопку «Зберегти чернетку» один або два рази при створенні вкладок, щоб не втратити зміни у випадку, якщо ви випадково вийдіть з розробника вкладок.
І нарешті, якщо вам потрібна підтримка, є велика синя кнопка.Отримати підтримку» трохи нижче розділу «Додати вкладки(і на більшості сторінок плагіна), яка веде на офіційний форум підтримки плагіна на WordPress.org.
Шорткоди плагіна Tabs
Після створення вкладок ви знайдете шорткод «Вкладки», який потрібно використовувати для додавання та відображення вкладок на будь-якій сторінці чи публікації. Наприклад, короткий код - [TABS_R id = 443]. Щоб відобразити вкладки, потрібно просто скопіювати цей шорткод на конкретну сторінку.
Віджет вкладок
Ви хочете додати вкладки в область віджетів сайту? Тоді вам сподобається підтримка віджетів, що постачається з плагіном Tabs WordPress.
Натиснувши на посилання Натисніть тут, Ви потрапите на екран віджетів WordPress, де можна додавати свої вкладки скрізь, де у вашій темі є область віджетів.
Користувальницькі CSS
У той час як плагін Tabs WordPress поставляється з безліччю параметрів налаштування вкладок (просто погляньте на цю праву бічну панель – вона сповнена параметрів стилів), Ви можете додати власні стилі CSS, як показано нижче.
Можна встановити свої налаштування в якості налаштувань за замовчуванням для всіх нових вкладок, просто натиснувши кнопку Оновити налаштування за замовчуванням.
Права бічна панель
Права бічна панель містить усі опції для стилізації вкладок під ваші бажання. Базові варіанти включають:
- Колір вкладки фону.
- Колір шрифту вкладки.
- Набір шрифтів та стиль.
- Параметри відображення заголовка та піктограми вкладки.
- Вирівнювання положення значка вкладки: до або після заголовка вкладки
- Межі вкладки.
- Анімація з кількома вкладками.
- І багато іншого.
Додайте свої вкладки на сторінку або пост WordPress
Після додавання вмісту та стилю вкладки прокрутіть вгору та натисніть кнопку «Опублікувати»:
Вкладки готові та їх потрібно додати на сторінку або пост WordPress. Скопіюйте шорткод вкладки, який ми бачили раніше.
Запустіть редактор записів та вставте шорткод у ваш запис/сторінку. Після цього натисніть кнопку «Опублікувати».
Приблизно через 5 хвилин налаштування вкладок у темі «Двадцять сімнадцять» ми отримали наступний результат:
Зверніть увагу, що кольори та інші опції у цьому прикладі не налаштовувалися. Чи правда просто, і гідно виглядає?
Додавання вкладок до ваших сторінок та постів у WordPress – це робота для чотирикласників. Впевнені, що у вас не виникнуть будь-які проблеми, особливо якщо ви використовуєте плагін Tabs від WP Shop Mart.
Джерело: wpexplorer.com
Коментарі до запису: 0