Как создать вкладки в WordPress для потрясающего контента с вкладками

Хотите научиться создавать вкладки в WordPress?

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

В этой статье мы покажем вам, как шаг за шагом добавлять вкладки в WordPress.

Зачем вам нужен контент WordPress с вкладками?

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

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

Вот некоторые другие способы использования вкладок:

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

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

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

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

Давайте начнем.

Метод 1: как сделать вкладки в WordPress с помощью компоновщика страниц

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

SeedProd — это мощный конструктор страниц с функцией перетаскивания, который позволяет создавать гибкие макеты WordPress без написания кода. С его профессиональными комплектами веб-сайтов, шаблонами целевых страниц и интерактивным визуальным редактором вы можете настроить каждую часть своего сайта и увидеть изменения в режиме реального времени.

Вы также можете использовать SeedProd для:

• Создание пользовательских тем WordPress
• Создавайте веб-сайты WooCommerce
• Создавайте целевые страницы с высокой конверсией
• Переведите свой сайт в режим обслуживания
• И многое другое

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

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

Шаг 1. Установите SeedProd Website Builder

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

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

После активации плагина перейдите в SeedProd »Настройки и введите лицензионный ключ плагина.

Вы можете найти свой лицензионный ключ SeedProd на панели управления вашей учетной записи в разделе « Загрузки ».

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

Шаг 2. Создайте тему WordPress или целевую страницу

Есть 2 способа использовать SeedProd для добавления вкладок на ваш сайт:

1. Используйте Theme Builder, чтобы создать пользовательскую тему WordPress и добавить вкладки на любую страницу WordPress.
2. Создайте отдельную целевую страницу с вкладками, используя конструктор страниц с функцией перетаскивания.

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

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

Шаг 3. Добавьте вкладки на свои страницы WordPress

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

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

Для этого перейдите в Страницы » Все страницы в панели администратора WordPress и найдите страницу, которую хотите отредактировать.

Поскольку вы используете набор веб-сайтов SeedProd, страницы с контентом, такие как страницы с информацией, контактами и услугами, создаются автоматически. Чтобы открыть их в визуальном редакторе, нажмите ссылку « Редактировать с помощью SeedProd» .

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

Также легко добавить дополнительные элементы на свою страницу, перетащив их с панели блоков на место. Итак, давайте сделаем это с блоком вкладок SeedProd.

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

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

Теперь вы можете найти блок « Вкладки » на левой панели и перетащить его в новый раздел на своей странице.

При нажатии на блок отображаются настройки его содержимого, где вы можете:

• Добавить несколько вкладок
• Показать или скрыть значок вкладки
• Изменить размер шрифта
• Увеличьте или уменьшите расстояние между вкладками
• Отрегулируйте выравнивание табуляции

Расширение каждой вкладки позволяет добавить заголовок вкладки и написать свой контент с помощью классического редактора с настройками «что видишь, то и получаешь» (WYSIWYG).

Вы также можете включить пользовательский значок, чтобы сделать ваши вкладки более интересными и выделить их. Просто переведите переключатель «Скрыть значок вкладки» в положение «Выкл.» и выберите собственный значок из библиотеки Font Awesome.

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

Вы также можете отобразить вертикальные вкладки или набор горизонтальных вкладок, щелкнув любой вариант макета.

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

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

Шаг 4. Опубликуйте свой контент с вкладками

После добавления вкладок на различные страницы WordPress вы готовы опубликовать их для посетителей вашего сайта.

Для этого перейдите на страницу SeedProd » Theme Builder и установите переключатель «Включить тему SeedProd» в положение «Вкл.».

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

Способ 2: как добавить вкладки с помощью плагина WordPress

Следующий метод является хорошей альтернативой, если вы не хотите менять тему WordPress или создавать целевую страницу. Мы будем использовать бесплатный плагин Tabs Responsive WordPress, чтобы добавить адаптивные вкладки на ваш сайт WordPress.

Во-первых, вам нужно установить плагин Tabs Responsive и активировать его в панели администратора WordPress.

Затем перейдите к «Отзывчивые вкладки » «Добавить новые вкладки» и дайте название набору вкладок.

Оттуда вы можете выбрать шаблон по умолчанию или, если вы используете версию Pro, вы можете выбрать один из 18+ стилей шаблона.

Следующим шагом будет добавление вкладок. Вы можете создать столько вкладок, сколько захотите, включая:

• Названия вкладок
• Описание вкладок
• Значки вкладок

Вы также можете изменить стиль каждой вкладки на правой боковой панели, выбрав собственные стили вкладок, цвета фона, цвета шрифта и многое другое.

Когда вы будете довольны своими вкладками, скопируйте шорткод вкладок и вставьте его в любое место вашей темы WordPress.

Например, вы можете вставить шорткод в запись или страницу WordPress следующим образом:

Вот как это будет выглядеть в интерфейсе вашего сайта:

Вы также можете добавить шорткод вкладок в область, готовую для виджетов, такую ​​как боковая панель WordPress или виджеты нижнего колонтитула, вставив шорткод в блок абзаца.

После этого вы увидите свой контент с вкладками в области боковой панели:

Вот оно!

В этом уроке вы узнали, как создавать вкладки в WordPress без написания кода. Готовы создать настраиваемые вкладки на своем веб-сайте?

Вам также могут понравиться эти другие полезные руководства по WordPress, пока вы здесь:

• Как создать текстовую анимацию в WordPress (простые шаги)
• Как создать необычные разделители разделов для веб-сайтов WordPress
• Как добавить поле автора в WordPress (без плагина)

Спасибо за чтение. Следите за нами на YouTube, Twitter и Facebook, чтобы получать больше полезного контента для развития вашего бизнеса.