Как создать содержимое с вкладками в Elementor с помощью надстроек PowerPack

Хотите знать, как создать контент с вкладками в Elementor?

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

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

Виджет PowerPack Advanced Tab — Обзор

PowerPack Addons for Elementor — одно из лучших дополнений для конструктора страниц Elementor. Он имеет более 150 уникальных и стильных шаблонов и более 80 удобных виджетов, включая виджет «Расширенные вкладки» для создания контента с вкладками в Elementor.

Виджет Advanced Tabs — лучший виджет вкладок для создания контента с вкладками на любом веб-сайте WordPress. Давайте посмотрим на возможности виджета PowerPack Advanced Tabs для Elementor:

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

Создавайте содержимое с вкладками в Elementor с помощью надстроек PowerPack

Перед началом убедитесь, что вы установили и активировали конструктор страниц Elementor и надстройки PowerPack для Elementor.

После того, как вы активировали оба плагина на своем веб-сайте WordPress, откройте страницу с помощью редактора Elementor.

Затем найдите « Расширенные вкладки » в области виджетов и перетащите виджет на страницу.

Не забудьте проверить PowerPack " ПП ” в правом верхнем углу виджета.

Вкладка «Содержимое» виджета вкладки «Дополнительно»

Вкладка содержимого виджета «Дополнительные вкладки» включает два раздела:

1. Дополнительные вкладки
2. Макет

Рассмотрим эти разделы подробно.

Дополнительные вкладки

Давайте посмотрим на доступные функции в этом разделе:

• Вы можете добавить столько « Вкладок », сколько хотите. Просто нажмите « Добавить элемент », чтобы создать дополнительные вкладки.
• Каждую вкладку можно настроить индивидуально.
• Тип контента: этот параметр позволяет выбрать несколько типов контента, таких как контент, изображение, ссылка (видео/изображение), сохраненный раздел, сохраненный виджет и сохраненный шаблон страницы.

«Контент» как тип контента

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

1. Заголовок: Напишите заголовок для контента, используя эту опцию.
2. Содержимое: в этом разделе вы можете добавить содержимое на вкладку с такими функциями, как числовой список, маркерный список, ссылка, полужирный шрифт, курсив, подчеркивание и многие другие функции для стилизации текста. Кроме того, вы также можете добавить изображение из медиатеки.

«Изображение» как тип контента

Если вы хотите отобразить изображение, вы можете настроить следующие параметры:

1. Выберите изображение: выберите изображение из библиотеки изображений, используя эту опцию.
2. Размер изображения: этот параметр позволяет выбрать желаемый размер изображения.

Если вы хотите отобразить ссылку, вы можете перетащить ссылку на опцию «Ссылка». И если вы выберете сохраненный раздел, сохраненный виджет или сохраненный шаблон страницы, вы можете выбрать их соответствующим образом.

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

Особенности раздела значков:

1. Тип значка: вы можете выбрать тип значка, либо значок, либо изображение. Это может быть логотип вашего бренда или любая другая вещь.
2. Значок: Вы можете выбрать значок из библиотеки значков.

Макет

Давайте посмотрим на доступные функции в этом разделе:

• Макет: вы можете выбрать макет как горизонтальный или вертикальный шаблон.
• Адаптивная поддержка: виджет Advanced Tabs поддерживает адаптивный режим на всех устройствах, будь то настольный компьютер, планшет или мобильный телефон.
• Выберите стиль: выберите стиль вкладки с помощью этой опции.
• Прокрутить вверх: вы можете выбрать «да» или «нет» в зависимости от того, хотите ли вы прокручивать вкладки вверх при нажатии на заголовок.

[ Примечание: этот параметр будет доступен, только если вы выберете вертикальный макет для вкладок.]

• Индекс активной вкладки по умолчанию: этот параметр позволяет установить активную вкладку по умолчанию. Так что всякий раз, когда вы посещаете свой веб-сайт, выбранная вами вкладка будет отображаться по умолчанию.
• Пользовательский префикс идентификатора: вы можете добавить собственный префикс идентификатора, который будет применяться к атрибутам идентификатора вкладки в HTML.

Примените эти изменения к виджету «Расширенные вкладки», чтобы увидеть наилучшие результаты.

Вкладка «Стиль» виджета вкладки «Дополнительно»

Вкладка стилей виджета расширенных вкладок включает два раздела:

1. Вкладки
2. Заголовок
3. Содержание

Рассмотрим эти разделы подробно.

Вкладки

Давайте посмотрим, какие все функции включены в этот раздел:

• Горизонтальное или вертикальное выравнивание: выберите выравнивание вкладок с помощью этой опции, но сначала выберите макет.
• Расстояние между вкладками: с помощью этой опции настройте расстояние между вкладками.
• Цвет фона: с помощью этой опции вы можете выбрать цвет фона для вкладок.
• Радиус границы: примените радиус границы, если вы хотите отобразить изогнутые края на границе вкладки.
• Отступы: отрегулируйте отступы для вкладки, чтобы сохранить расстояние между границей вкладки и содержимым.

Заголовок

Давайте посмотрим, какие все функции включены в этот раздел:

• Положение значка: выберите положение значка сверху, снизу, справа или слева.
• Размер значка: отрегулируйте размер значка с помощью этой опции.
• Ширина изображения значка: отрегулируйте ширину изображения значка с помощью этой опции.
• Радиус границы: примените радиус границы, если вы хотите отобразить изогнутые края на границе заголовка вкладки.
• Отступ: отрегулируйте отступ для вкладки, чтобы сохранить расстояние между границей заголовка вкладки и содержимым.
• Типографика заголовка: настройте типографику текста заголовка с помощью этой опции.
• Цвет значка: выберите цвет значка с помощью этой опции.
• Цвет заголовка: настройте цвет текста заголовка, используя параметр цвета заголовка.
• Цвет фона заголовка: если вы хотите отобразить цвет фона заголовка, вы можете выбрать цвет фона, используя эту опцию.
• Эффект наведения: этот параметр дает вам возможность включать или отключать эффект наведения.

Содержание

Давайте посмотрим, какие все функции включены в этот раздел:

• Выравнивание: установите выравнивание содержимого, отображаемого на вкладках, с помощью этой опции.
• Тип фона: вы можете выбрать классический или градиентный тип фона.
• Цвет текста: выберите цвет текста для содержимого, которое вы хотите отображать на вкладках.
• Типографика текста: с помощью этой опции вы можете настроить типографику текста содержимого.
• Тип границы: выберите тип границы для содержимого из доступных вариантов, таких как сплошная, двойная, пунктирная, пунктирная или канавка.
• Ширина границы: с помощью этой опции можно настроить ширину границы, применяемую к содержимому.
• Отступы: отрегулируйте отступы, чтобы между текстом содержимого и его границей оставался интервал, чтобы он выглядел упорядоченным и чистым.
• Цвет границы: с помощью этой опции можно настроить цвет границы содержимого.
• Радиус границы: если вы применили рамку к части содержимого, вы можете настроить ее радиус с помощью этой опции.

Итак, это все, что касается настройки вкладки содержимого и стиля виджета «Расширенные вкладки» для Elementor с помощью PowerPack Addons.

Установите, активируйте и внесите некоторые изменения по вашему выбору; это так просто.

Получите расширенные вкладки PowerPack для конструктора страниц Elementor

Узнав обо всех функциях виджета «Расширенные вкладки», предоставляемого PowerPack Elementor Addons, мы уверены, что вам понравится использовать его на своем веб-сайте.

Мы надеемся, что это руководство помогло вам создать стильные «вкладки» для вашего веб-сайта с помощью виджета PowerPack Advanced Tabs.

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

Нажмите здесь, чтобы получить виджет PowerPack Advanced Tabs и улучшить внешний вид вашего веб-сайта и удобство для пользователей.

Если вам понравилось читать эту статью, вы также хотели бы испытать другие наши элементы PowerPack.

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