Виджет "Дополнительные вкладки Elementor": бесплатные горизонтальные, вертикальные вкладки и вкладки изображения
Виджет Advanced Tabs в Master Addons разделяет длинный контент на чистые, кликабельные вкладки, и он бесплатен. выберите горизонтальный, вертикальный или левый активный предустановленный бордюр, добавьте значок или изображение в каждый заголовок вкладки, и выберите, переключаются ли вкладки при щелчке или при наведении на курсор. заполните каждую вкладку текстом из редактора, или, с Master Addons Pro, загрузите сохраненный раздел, виджет или шаблон страницы. хорошо работает для функций продукта, часто задаваемых вопросов, планов и пошаговых руководств.
Смотрите виджет вкладок в действии
Блок ниже - это виджет, а не скриншот Четыре вкладки, значки на заголовках, и первый, который должен открыться по умолчанию Щелкните заголовок, чтобы переключить панель.
- Обзор
- Спецификация
- Доставка
- Гарантия
Один блок, четыре панели
Вкладки держать длинную страницу короткой Все ниже сидит в том же блоке, и только панель, которую вы выбираете, находится на экране, поэтому спецификация, накладная и гарантийная страница перестают конкурировать за тот же свиток.
Это сам виджет. щелкните заголовок выше, чтобы переключить панель.
Спецификация
Каждая панель принимает обычный контент редактора: заголовки, абзацы, списки и изображения. Здесь нет ничего, что является скриншотом.
- Заголовки вкладок только со значком, изображением или текстом
- Горизонтальные, вертикальные или левые активные пограничные настройки
- Переключиться на щелчок или на наведение
Доставка
Панель доставки или доставки - это классическая вторая вкладка на странице продукта, потому что люди ищут ее, и никто не хочет ее в основном описании.
Установите, какая вкладка открывается первой, с помощью "Установить по умолчанию" для элемента.
Гарантия
Последняя панель - хороший дом для условий, возврата и всего остального, что важно для покупателя, но не принадлежит ему.
Как добавить вкладки в Elementor
Пять шагов от пустой страницы к блоку рабочих вкладок.
- Найдите вкладки на панели виджетов Elementor и перетащите виджет на страницу.
- Откройте повторитель вкладок и добавьте по одному элементу на панель. каждый элемент имеет заголовок вкладки и редактор контента.
- Установите тип значка на каждом элементе "Нет", "Значок" или "Изображение", затем выберите значок или загрузите изображение.
- Выберите предустановку стиля: горизонтальные вкладки, вертикальные вкладки или левая активная граница.
- Установите Tab Effect на "Нажмите или наведите курсор" и переключите "Установить по умолчанию" на вкладке, которая должна открыться первой.
Горизонтальные и вертикальные вкладки с предустановками стиля
Начните со встроенной предустановки. Horizontal Tabs помещает заголовки в ряд сверху, Вертикальные вкладки выстраивают их сбоку, а Left Active Border отмечает открытую вкладку цветной рамкой.Master Addons Pro добавляет предустановку Табличного содержимого для коробочного образа. каждый предустановка является лишь отправной точкой, поэтому вы можете изменить его стиль, чтобы он соответствовал вашему бренду.
- Горизонтальные и вертикальные макеты: выберите направление вкладки, соответствующее вашему контенту.
- Визуальные предустановки: начните с разработанного макета, а не с пустого виджета.
- Простое переключение: переключение с горизонтальных вкладок на вертикальные без восстановления содержимого.
Вертикальные вкладки, живые
Тот же виджет с предустановкой стиля, установленной на вертикальные вкладки. заголовки идут слева, панель находится рядом с ними, а на узком экране полоса стекается над содержимым.
- Обзор
- Дизайн
- Строить
- Передача
Обзор
Вертикальные вкладки помещают заголовки в столбец слева и панель рядом с ними. Они подходят для процесса, где порядок имеет значение, и каждый шаг имеет абзац или два.
Дизайн
С четырьмя или пятью шагами вертикальная полоса читается лучше, чем горизонтальный ряд, потому что в длинных заголовках есть место, и глаз следует за ними по странице.
Строить
Переключайтесь между ними с помощью элемента управления предустановкой стиля. Горизонтальные вкладки, вертикальные вкладки и левая активная граница - это три предустановки в списке.
Передача
На узком экране вертикальная полоса располагается над панелью, поэтому контент остается читаемым без второго макета.
Сохраненные шаблоны внутри вкладок (Pro)
Бесплатная версия заполняет каждую вкладку из текстового редактора. с Master Addons Pro, каждая вкладка может использовать различный Тип контента: простой текстовый редактор, сохраненный раздел, сохраненный виджет или даже целый шаблон сохраненной страницы. это означает, что вы можете поместить сложную таблицу цен, контактную форму, галерею изображений или любой другой заранее разработанный блок контента во вкладку. Это все равно, что иметь несколько страниц в одной, без беспорядка.
- Интеграция шаблонов: вставьте любой сохраненный шаблон Elementor во вкладку для неограниченных возможностей проектирования.
- Последовательный дизайн: повторно используйте существующие разделы и виджеты, чтобы сохранить целостный вид.
- Идеально подходит для сравнения: используйте вкладки для переключения между различными характеристиками продукта, планами ценообразования или списками функций.
Стиль вкладки: цвета, границы и типографика
Достичь идеального, отполированного вида, стилизуя каждую часть вкладок. спроектируйте контейнер вкладок и область Контент отдельно. для вкладок контролируйте нормальное и активное состояния с разными цветами, фоном, границами и типографикой. отрегулируйте заполнение, поле и размер значка. Для области контента создайте стиль фона, заполнения, полей и типографики. Этот уровень контроля гарантирует, что ваши вкладки будут выглядеть интегрированными и профессиональными.
- Стиль на основе состояния: установите уникальные цвета, фон и границы для активных и неактивных вкладок.
- Поддержка значков: добавляйте значки на вкладки и контролируйте их размер и положение.
- Дизайн области контента: стилизуйте контейнер контента в соответствии с эстетикой вашего сайта.
Переключайте вкладки при нажатии или наведении курсора
Решите, как пользователи взаимодействуют с вашими вкладками Установите эффект вкладки на Нажмите (традиционный) или Наведите курсор (для более быстрой навигации).Вы также можете установить, какая вкладка открыта по умолчанию. эта гибкость позволяет вам создать точный пользовательский опыт, который вы хотите, будь то для динамичной витрины продукта или тщательного, пошагового руководства.
- Нажмите или наведите курсор: выберите триггер, соответствующий вашему контенту. Наведите курсор по умолчанию.
- Активная вкладка по умолчанию: установите, какая вкладка открыта при загрузке страницы.
Вкладки Elementor против расширенных вкладок Master Addons
Виджет Tabs самого Elementor находится в бесплатном плагине, и он хорош в одном, чего не может сделать этот: он держит другие виджеты внутри каждой панели, потому что каждая вкладка - это контейнер. торговля - это то, что заголовки вкладок могут нести и сколько стилистики экспонируется.
| Особенность | Вкладки Элементор (свободное ядро) | Вкладки "Мастер-аддоны" |
|---|---|---|
| Бросьте другие виджеты на вкладку | Да, каждая панель - это контейнер | Нет, панель принимает содержимое редактора |
| Титулы сбоку (вертикальные) | Да | Да, предустановка "Вертикальные вкладки" |
| Превращается в гармошку на мобильном | Да | Нет |
| Изображение как заголовок вкладки | Нет | Да, тип значка установлен в изображение |
| Значок в заголовке вкладки | Да | Да |
| Пресеты стиля | Нет | Три, плюс табличный контент с Pro |
| Переключить наведение | Нет | Да, Tab Effect установлен на Hover |
| Сохраненный шаблон внутри вкладки | Не нужно, используйте виджеты | Про |
Итак, короткая версия: если панели нужна форма, галерея или таблица цен внутри нее, используйте основной виджет. если полоса вкладок сама по себе является проблемой дизайна, с заголовками изображений, предустановками или переключением наведения, этот имеет элементы управления.
Что делает и не делает виджет Вкладки
Проверено на панели виджетов. строки “no” так же полезны, как и остальные, потому что два из них - это вопросы, которые люди задают больше всего.
| Настройка | Поддерживается |
|---|---|
| Горизонтальные вкладки | Да, предустановка по умолчанию |
| Вертикальные вкладки | Да |
| Предустановка левой активной границы | Да |
| Значок в заголовке вкладки | Да, из библиотеки значков Элементор |
| Изображение как заголовок вкладки | Да, тип значка установлен в изображение |
| Текстовые только заголовки | Да, тип значка установлен на "Нет" |
| Переключитесь на щелчок или наведите курсор | Да, эффект вкладки |
| Выберите, какая вкладка откроется первой | Да, Установить как по умолчанию на элементе |
| Выравнивание вкладок и контента | Да |
| Активные и неактивные цвета | Да |
| Сохраненный раздел, виджет или шаблон страницы на вкладке | Про |
| Пресет табличного содержания | Про |
| Расположение столбцов для полосы вкладок | Про |
| Откройте вкладку с URL-адреса или ссылки | Нет |
| Аккордеон на мобильном | Нет |
Связанные виджеты для одной и той же работы: Продвинутая гармонь для списков часто задаваемых вопросов, Переключить контент для замены одного блока контента, Динамическая таблица для спецификаций, Таблица цен для планов и Оглавление для длинных страниц.
Вкладки "Изображение и значки" в Elementor
Каждый заголовок вкладки может нести значок из библиотеки Elementor или изображение собственного. Установите тип значка в изображение, выберите изображение из медиатеки, и заголовок станет вкладкой изображения. это бесплатный вариант и работает с каждым бесплатным предустановленным.
- Тип значка на вкладку: Нет, значок или изображение.
- Используйте изображения для вкладок продуктов или категорий, а также значки для списков функций.
- Сохраняйте один стиль на панели вкладок, поскольку смешивание изображений и значков выглядит занятым.
Для контента, который открывается на месте, вместо переключения панелей попробуйте Продвинутая гармонь или Переключить контент (Про).
Часто задаваемые вопросы для вкладок
Могу ли я использовать и значки, и текст в заголовках вкладок?
Да. для каждой вкладки установите для типа значка значок или изображение, затем выберите значок из библиотеки или изображение из медиатеки. элемент управления размером значка на вкладке Стиль устанавливает, насколько большим выглядит значок.
Как сделать так, чтобы вкладки хорошо выглядели на мобильных устройствах?
Используйте режим реагирования Elementor для настройки типографики, заполнения и полей для планшета и телефона. предпросматривайте вертикальные вкладки на маленьком экране перед публикацией, так как столбец заголовков занимает ширину.
Чем отличается предустановка "Табличное содержание" от остальных?
Табличный контент - это предустановка Pro. Он придает области содержимого вкладки отчетливый фон, границу и заполнение, делая ее похожей на поле, которое подключено к вкладкам. Это более структурированный, сдержанный вид по сравнению с классическим подчеркиванием или стилями с рамкой слева.
Могу ли я поместить сохраненный шаблон на вкладку?
Да, с Мастер Аддоны Про. Установить Тип содержимого на элементе в Сохраненный раздел, Сохраненный виджет или Сохраненный шаблон страницы и выбрать шаблон. на бесплатном плагине каждая панель принимает содержимое редактора вместо.
Могу ли я установить, какая вкладка откроется первой?
Да. переключатель Установить по умолчанию элемент, который вы хотите открыть при загрузке страницы. Если ни один из них не установлен, открывается первая вкладка.
Могу ли я связать вкладку с внешним URL-адресом или другим разделом страницы?
Элемент Advanced Tabs предназначен для переключения содержимого внутри виджета. для ссылок на внешние URL-адреса или разделы страниц может потребоваться другое решение, например навигационное меню или ссылки привязки. Однако вы можете разместить кнопку со ссылкой внутри содержимого вкладки.
Чем это отличается от собственного виджета Elementor Tabs?
Бесплатный виджет Elementor Tabs позволяет размещать любые виджеты внутри каждой вкладки и помещать заголовки выше, ниже или рядом с содержимым. Master Addons Advanced Tabs дает вам триггер наведения, метки значков или изображений, а также готовые предустановки, такие как Left Active Border, и вы можете добавлять на страницу столько виджетов Advanced Tabs, сколько вам нужно. Pro добавляет предустановленные и сохраненные разделы Tabular Content, виджеты или шаблоны страниц в качестве содержимого вкладок.
Как работает предустановка "Левая активная граница"?
Пресет Left Active Border обычно выделяет активную вкладку с цветной рамкой или фоном на левой стороне. Это современный, чистый вид, который хорошо работает для вертикальных вкладок или даже горизонтальных, если вам нужен отличительный индикатор.
Вкладки превращаются в гармошку на мобильном?
Нет. полоса вкладок остается полосой вкладок и оборачивается на узкие экраны. Виджет Tabs самого Elementor действительно переключается на аккордеон, так что лучше выбрать, если мобильный аккордеон является обязательным требованием.
Стоит ли использовать вкладки или гармошку?
Вкладки, когда панели являются альтернативой, между которыми выбирает посетитель, например спецификация, доставка и гарантия. Ан аккордеон когда элементы представляют собой список, который люди читают, например часто задаваемые вопросы, поскольку несколько из них могут быть открыты одновременно, и они естественным образом складываются в телефон.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
