Как добавить содержимое с вкладками в сообщения и страницы WordPress

Опубликовано: 2022-11-29

Вы хотите разделить свои сообщения на вкладки, чтобы сэкономить место и облегчить пользователям поиск того, что они ищут?

Добавление контента с вкладками поможет вам добавить больше информации о ваших продуктах и ​​услугах. Это также позволяет пользователям находить все детали в одном месте, а не переходить на другую страницу.

В этой статье мы покажем вам, как добавлять содержимое с вкладками в сообщения и страницы WordPress.

Добавляйте содержимое с вкладками в сообщения и страницы WordPress.

Когда вы должны использовать контент с вкладками в WordPress?

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

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

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

Предварительный просмотр содержимого с вкладками

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

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

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

  • Добавление контента с вкладками с помощью конструктора целевых страниц
  • Добавление контента с вкладками с помощью плагина WordPress

Способ 1: добавление содержимого с вкладками с помощью конструктора целевых страниц

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

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

Во-первых, вам нужно установить и активировать плагин SeedProd. Если вам нужна помощь, ознакомьтесь с нашим руководством по установке плагина WordPress.

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

Лицензионный ключ СидПрод

Затем вы можете перейти в SeedProd » Landing Pages из панели администратора WordPress.

После этого просто нажмите кнопку «Создать новую целевую страницу».

Добавить новую целевую страницу SeedProd

Отсюда SeedProd покажет вам несколько шаблонов целевых страниц на выбор.

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

Выберите шаблон целевой страницы

Откроется всплывающее окно, в котором вам нужно будет ввести заголовок вашей страницы в поле «Имя страницы» и постоянную ссылку в поле «URL-адрес страницы».

После этого просто нажмите кнопку «Сохранить и начать редактирование страницы».

Введите имя для вашей страницы

Это запустит конструктор перетаскивания SeedProd. Теперь вы можете добавлять в шаблон различные блоки и редактировать существующие элементы.

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

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

Далее вы можете настроить блок вкладок в SeedProd.

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

Добавить новые элементы в блок вкладок

Затем вы можете щелкнуть любую вкладку, чтобы отредактировать ее и добавить детали.

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

Добавить содержимое и изменить метку вкладки

Кроме того, SeedProd также предоставляет расширенные возможности настройки.

Просто нажмите на вкладку «Дополнительно» в меню слева. Здесь вы можете изменить макет вкладки, типографику, цвет, цвет фона, границы и многое другое.

Изменить дополнительные настройки для блока вкладок

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

После этого вы можете перейти на вкладку «Настройки страницы».

Опубликуйте страницу с вкладками

Затем вы можете щелкнуть переключатель «Статус страницы» и изменить статус с «Черновик» на «Опубликовать».

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

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

Предварительный просмотр целевой страницы контента с вкладками

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

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

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

После активации вы можете перейти в Tabs Responsive »Добавить новые вкладки на панели инструментов WordPress и начать с ввода имени для ваших вкладок.

Введите имя для своей вкладки

Затем вы можете прокрутить вниз, чтобы добавить столько вкладок, сколько хотите, нажав красную кнопку «Добавить новые вкладки».

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

Изменить настройки вкладок и добавить детали

Кроме того, плагин также предлагает различные «Настройки вкладок» в меню справа от вас.

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

Изменить настройки вкладок и добавить детали

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

Просто нажмите кнопку «Опубликовать».

Опубликуйте свои вкладки

Затем вы можете добавить вкладки на любую страницу или запись, используя [TABS_R id=130] . Просто не забудьте заменить идентификационный номер в шорткоде на идентификационный номер вашей вкладки.

Вы можете легко найти идентификатор вкладки и шорткод, перейдя в « Отзывчивые вкладки» »Все вкладки и скопировав код в столбце Шорткод вкладки.

Найти идентификационный номер для содержимого с вкладками

Далее вам просто нужно либо добавить новый пост, либо отредактировать существующий.

Когда вы находитесь в редакторе контента, добавьте блок шорткода для ввода шорткода.

Добавьте блок шорткода

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

Теперь посетите свой веб-сайт, чтобы увидеть содержимое вкладок в действии.

Предварительный просмотр плагина контента с вкладками

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.