Вкладки – довольно распространенная функция на многих веб-сайтах, особенно в интернет-магазинах. Владельцы интернет-магазинов обычно используют вкладки в области описания продукта, где они разбивают обзоры, описание, технические характеристики и т.д. На несколько вкладок.

Тем не менее, вкладки нашли применение на многих других типах веб-сайтов, а не только на сайтах электронной коммерции. Даже официальный сайт WordPress.org использует вкладки на страницах описания плагинов. См. Изображение ниже, чтобы увидеть выделенные вкладки на WP.org.

Многие другие владельцы веб-сайтов используют вкладки на разных типах веб-сайтов. Однако вкладки не следует путать с аккордеонами, которые расширяются для отображения информации. Ниже, пожалуйста, посмотрите, как я использовал аккордеоны на своем веб-сайте.

Но если оставить в стороне аккордеоны, мы здесь, чтобы поговорить о вкладках, так что давайте не будем терять фокус; Мне просто нужно было четко различать вкладки и аккордеоны. Теперь я надеюсь, что мы на одной странице ?

По сути, веб-владельцы используют вкладки для разделения информации, которая в противном случае заняла бы целую страницу или публикацию. Это означает, что вкладки значительно упрощают усвоение информации, не заставляя пользователей нажимать на колесо прокрутки миллион раз.

Другими словами, вкладки улучшают удобство использования вашего веб-сайта, особенно в мире более коротких интервалов внимания. Итак, если вы хотите, чтобы пользователи дольше оставались на своем сайте, не утомляя их до смерти длинными страницами, вам следует подумать об использовании вкладок.

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

Используйте конструктор страниц

Если у вас уже установлен конструктор страниц, вам повезло – у вас, вероятно, уже есть модуль вкладок под рукой. Большинство основных конструкторов страниц предлагают вкладки как часть своего основного набора элементов конструкторов страниц. Вот краткий обзор двух наших фаворитов.

Elementor Бесплатный конструктор страниц

Информация и Скачать Посмотреть демо

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

Конструктор страниц WPBakery Premium

Информация и Скачать Посмотреть демо

Используете премиальную тему, которая включает в себя конструктор страниц WPBakery (например, нашу собственную тему Total )? Большой! Вкладки встроены и просты в использовании.

Модуль вкладок WPBakery немного отличается от предыдущего примера, поскольку вкладки изначально пусты, когда вы их добавляете. Вам нужно будет вставить дополнительные элементы страницы (текстовую область, изображения, значки и т.д.) Во вкладки, чтобы добавить свой контент. Но это дает вам массу свободы для создания вкладок, как вы хотите (в дополнение к встроенным параметрам стилизации). Мы уже рассказывали об этом конструкторе страниц в блоге, поэтому, если вы хотите получить более подробные инструкции, ознакомьтесь с нашим руководством по WPBakery (обратите внимание – этот плагин ранее назывался Visual Composer, заранее извините за любую путаницу).

Установите плагин Tabs WordPress

Информация и Скачать Посмотреть демо

Если вы не используете конструктор страниц, нет необходимости использовать его только для вкладок. Существует множество отличных альтернатив, таких как бесплатный плагин WordPress, известный просто как Tabs от WP Shop Mart. Tabs – это отличный плагин для WordPress, который поможет вам без труда создавать неограниченное количество красивых вкладок.

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

Мы используем бесплатную версию, но есть и премиум-версия, если вы позже захотите обновить ее для получения дополнительных функций.

Установка плагина Tabs WordPress

Войдите в панель администратора WordPress и перейдите в раздел «Плагины»> «Добавить новый» и введите «tabs wpshopmart» в поле поиска по ключевым словам. Найдя нужный плагин, нажмите кнопку «Установить сейчас», как показано ниже.

После этого нажмите кнопку Активировать. Вот и все, ваш плагин Tabs Responsive WordPress готов к использованию. Теперь давайте создадим пару вкладок, чтобы узнать, что может предложить этот плагин.

Настройка адаптивного плагина WordPress для вкладок

Активация плагина добавит новый элемент в ваше административное меню WordPress. Чтобы создать новые вкладки, перейдите в раздел «Адаптивные вкладки»> «Добавить новые вкладки», как показано на скриншоте ниже.

Это приведет вас к адаптивному конструктору вкладок, в котором есть все функции, необходимые для создания красивых вкладок, как босс. Посмотрите на изображение ниже, чтобы увидеть, чего ожидать.

Довольно свиток, не так ли? Что ж, вы можете найти большинство функций на правой боковой панели. Также обратите внимание, что отдельные вкладки имеют свои настройки. Вы даже можете использовать редакторы WYSIWYG на вкладках, что означает, что у вас есть полный контроль над своими вкладками.

Теперь давайте создадим несколько примеров вкладок и отобразим их на странице или в публикации.

Добавить заголовок

Начните с присвоения вкладкам описательного заголовка (как и в случае с меню навигации ), как показано на изображении выше. Таким образом, вы можете позже легко идентифицировать свои вкладки на панели администратора WordPress, если вам нужно что-то отредактировать. Для целей этого руководства я назвал свои вкладки «Тестовые вкладки на главной странице».

Выберите шаблон дизайна вкладок

Как видно на скриншоте выше, ваш следующий шаг включает выбор шаблона дизайна, который вы хотите использовать для своих вкладок. Бесплатная версия плагина Tabs WordPress предлагает вам только один шаблон дизайна, но вы всегда можете перейти на премиум-версию и получить еще 19. Разговор о свободе дизайна.

Добавить вкладки

Затем добавьте столько вкладок, сколько хотите, как показано ниже.

Мы создали нумерованный список с подробным описанием того, что вы можете делать в разделе «Добавить вкладки », показанном выше. Цифры соответствуют каждой области.

Заголовок вкладки – добавьте в это поле заголовок вкладки, например Описание, Технические характеристики, Детали и т.д.
Описание вкладки – добавьте сюда описание вкладки. Это поле позволяет вам добавлять содержимое вашей вкладки. Самое приятное, что вы можете использовать редактор WYSIWYG (показан под номером 3 ниже), чтобы добавлять на свои вкладки богатый контент, включая изображения, музыку и видео.
Использование WYSIWYG – Если вы хотите использовать знакомый W hat- Y ou- S ee- I s- W hat- Y ou- G ЕТ – редактор для создания содержимого вкладки, не стесняйтесь попасть на эту кнопку, чтобы запустить поп- окно вверх
Значок вкладки – это поле помогает выбрать значок для использования на вкладке. Плагин Tabs WordPress предлагает вам доступ к множеству значков Font Awesome, чтобы оживить ваши вкладки, как профессионал.
Отображать над значком – если вы хотите отображать заголовок вкладки рядом со значком, вам понравится эта функция. Кроме того, он позволяет отключить значок, не касаясь заголовка вкладки.
Удалить – нажмите эту кнопку, чтобы удалить определенную вкладку.
Добавить новые вкладки – нажмите эту кнопку, чтобы добавить больше вкладок.
Удалить все – Устали от всех вкладок? Просто нажмите кнопку Удалить все, чтобы все сбросить

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

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

Наконец, если вам нужна поддержка, есть большая синяя кнопка «Получить поддержку» чуть ниже раздела «Добавить вкладки» (и на большинстве страниц плагина), которая ведет вас на официальный форум поддержки вкладок на WordPress.org. Не стесняйтесь нажимать кнопку поддержки, если вам понадобится помощь в любое время.

Шорткод вкладок

Затем вы найдете шорткод вкладок, который вы используете для добавления и отображения вкладок на любой странице или публикации, которую вы хотите. Например, наш шорткод – [TABS_R id = 443]. Чтобы отобразить вкладки на странице, я бы просто скопировал и вставил указанный выше шорткод на эту конкретную страницу.

Виджет вкладок

Вы хотите добавить свои вкладки в область виджетов на своем веб-сайте? Если да, то вам понравится поддержка виджетов, которая есть в плагине Tabs WordPress.

Нажав на ссылку «Щелкните здесь» на изображении выше, вы попадете на экран виджетов WordPress, где вы можете добавить свои вкладки в любое место, где есть область виджетов в вашей теме.

Пользовательские CSS

Хотя плагин Tabs WordPress поставляется с множеством параметров настройки вкладок (просто взгляните на эту правую боковую панель; она полна вариантов стилей!), Вы можете добавить свои собственные стили CSS, как показано ниже.

Кроме того, вы можете установить свои собственные настройки в качестве настроек по умолчанию для всех новых вкладок, просто нажав кнопку «Обновить настройки по умолчанию», как показано на изображении выше.

Правая боковая панель

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

Цвет фона вкладки
Цвет шрифта вкладки
Семейство и стиль шрифтов
Параметры отображения заголовка вкладки и значка
Выравнивание положения значка вкладки, т.е. до или после заголовка вкладки
Границы вкладки
Анимация описания нескольких вкладок
И многое другое

Добавьте свои вкладки на страницу или публикацию WordPress

После добавления содержимого вкладки и параметров стиля прокрутите вверх и нажмите кнопку «Опубликовать», как показано ниже.

На данный момент ваши вкладки готовы. Вам просто нужно добавить вкладки на страницу или сообщение WordPress. Просто скопируйте шорткод вкладок, который мы видели ранее. Наш – [TABS_R id = 443].

Запустите редактор сообщений (даже если вы используете Gutenberg) и вставьте шорткод в свой пост / страницу. После этого нажмите кнопку «Опубликовать», как показано ниже.

Примерно через 5 минут настройки; Я использую тему Twenty Seventeen и много Lorem Ipsum, и получил следующий результат.

Обратите внимание, что я не настраивал цвета или что-то еще. Скажи мне, что ты думаешь; это было не просто?

Добавление вкладок на ваши страницы и записи WordPress – дело четвероклассников. Я не ожидаю, что у вас возникнут какие-либо проблемы, особенно если вы используете такой плагин, как Tabs от WP Shop Mart.

Как вы добавляете вкладки на свои страницы и записи WordPress? Какой ваш любимый плагин для вкладок WordPress? Поделитесь своими мыслями в комментариях. Удачного творчества!

Источник записи: https://www.wpexplorer.com