Вкладки - один из самых простых способов не дать длинной странице почувствовать себя подавляющей. вместо того, чтобы складывать все по вертикали, вы разделяете контент на кликабельные разделы, которые посетители могут исследовать в своем собственном темпе.
Виджет Advanced Tabs в Master Addons for Elementor принимает базовый вариант виджет вкладок Элементор и добавляет намного больше гибкости. вы получаете три бесплатных предустановленных макета плюс один предустановленный Pro, возможность добавить изображение или значок на каждую вкладку, и, с Master Addons Pro, возможность загрузить сохраненный раздел Elementor внутри любой панели вкладки. для быстрого обзора и демо-версий см Виджет расширенных вкладок Elementor страница.
Ниже я расскажу вам, как настроить его с нуля, используя те же варианты макета, которые показаны в демо-видео.
Что делает виджет Elementor Advanced Tabs #
В основе этого виджета создается набор меток вкладок плюс область контента. когда кто-то нажимает метку, появляется соответствующая панель.
По сравнению с виджетом вкладок Elementor по умолчанию, версия Master Addons дает вам больше контроля. вы можете переключаться между визуальными предустановками, добавлять изображения или значки на отдельные вкладки, использовать обычный текст (бесплатно) или сохраненный шаблон (Pro) в качестве содержимого панели и стилизовать нормальное, зависающее и активное состояния отдельно.
Прежде чем начать #
- вордпресс с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. если вы еще не установили, проверьте руководство установки.
- Виджет "Дополнительные вкладки" включен на панели параметров "Мастер-аддоны".
- Необязательно: сохраненный шаблон Elementor, если вы хотите загрузить его на вкладку (для этого необходимы основные дополнения Pro).
Добавить виджет Расширенные вкладки #
Откройте редактор Elementor и найдите Расширенные вкладки виджет в разделе Главные дополнения Перетащите его на свою страницу, и вы увидите горизонтальную панель вкладок по умолчанию с тремя образцами вкладок: "Умное управление", "Лучшая производительность" и "Простая настройка".
Выберите предустановленный макет #
Самый быстрый способ изменить внешний вид - это Стиль Пресет раскрывающийся список на вкладке Содержимое У вас есть четыре варианта, и последний нуждается в Pro:
- Горизонтальные вкладки: метки бегут вверху с содержимым внизу Это по умолчанию.
- Вертикальные вкладки: метки расположены слева, а содержимое отображается справа.
- Левая активная граница: похоже на вертикальные вкладки, но активная вкладка имеет цветную рамку слева.
- Табличное содержание (Pro): этикетки становятся большими кнопками в виде карт над панелью контента.
Вы можете переключаться между ними мгновенно, поэтому попробуйте их все и посмотрите, какой из них лучше всего подходит для вашего контента. Pro также добавляет a Макет столбца управление, позволяющее регулировать количество столбцов, занимаемых метками вкладок, удобно, когда вам нужны более узкие метки и больше места для контента.
Настройте вкладки и содержимое #
Выбрав макет, разверните Содержание раздел, чтобы увидеть список вкладок. каждый элемент имеет свою собственную панель настроек. можно дублировать, удалять или изменять порядок вкладок, и нажимать Добавить элемент когда нужно больше.
Настройки для каждой вкладки #
- Установить как по умолчанию: выберите, какая вкладка открывается первой при загрузке страницы.
- Тип значка: пик Нет, Иконаили Изображение для метки вкладки.
- Изображение / Значок: визуальный актив, показанный рядом с заголовком вкладки.
- Название вкладки: текстовые посетители нажимают на.
- Тип контента: использовать Содержание для обычного текстового редактора или, с Pro, Сохраненный раздел, Сохраненный виджетили Сохраненный шаблон страницы.
- Содержание вкладки: фактическое содержимое или шаблон, заполняющий панель.
В демо-версии первая вкладка использует изображение. просто установите тип значка в изображение, откройте медиатеку и выберите файл. Изображение отображается рядом с заголовком вкладки.
Для второй вкладки демо переключается на значок Выберите тип значка и выберите что-то, что соответствует метке В этом случае значок в стиле спидометра хорошо работает для “Better Performance.”
Загрузите сохраненный раздел на вкладку (Pro) #
С Master Addons Pro измените Тип контента чтобы Сохраненный раздел и выберите любой шаблон из вашей библиотеки Elementor. демо-версия загружает полный FAQ аккордеон внутри одной вкладки, что означает, что ваша панель может содержать заголовки, аккордеоны, формы или что-то еще, что вы сохранили в качестве шаблона.
Стиль вкладок и содержимого #
Перейдите к Стиль вкладка для изменения цветов, типографики, интервала и границ. элементы управления сгруппированы в два основных раздела:
- Вкладки: охватывает метки вкладок, включая цвет заголовка, типографику заголовка, цвет фона, цвет контента, типографику контента, выравнивание контента, радиус границы, тень коробки, заполнение и поле.
- Содержание: стилизует панель, которая показывает, когда вкладка активна.
Большинство из этих элементов управления поддерживают нормальное, зависание и активное состояние, поэтому вкладка, которую кто-то просматривает в данный момент, может выглядеть иначе, чем остальные.The Выравнивание контента кнопки также позволяют выровнять текст панели по верху, центру или низу области контента.
Расширенные настройки #
выше Продвинутый на вкладке есть обычные элементы управления Elementor, которые вы ожидаете: поля, заполнение, анимация входа, отзывчивая видимость, пользовательский CSS и атрибуты. Используйте их, чтобы настроить расположение или скрыть вкладки на определенных размерах экрана.
Результат на странице #
После публикации вкладки работают точно так, как вы их настроили. сначала открывается вкладка по умолчанию, посетители переходят через метки, и любой сохраненный раздел или носитель, который вы добавили, отображается на панели сопоставления.
Обычные случаи использования #
- Разбивка функций на страницах продуктов по одной вкладке на каждую функцию.
- Цены или сравнение планов использование табличного содержимого или вертикальных меток.
- Разделы FAQ внутри вкладки, загрузив сохраненный аккордеон в качестве содержимого панели.
- Описания услуг где каждая вкладка охватывает разные услуги.
- Портфолио или тематические исследования с изображением или значком на вкладке и деталями на панели.
Советы по улучшению вкладок #
- Сопоставьте предустановленное с вашим контентом. Горизонтальные вкладки лучше всего работают с короткими метками, вертикальные вкладки отлично подходят для более длинных списков, а предустановка "Табулярный контент Pro" выделяет каждую опцию.
- Установите самую важную вкладку по умолчанию. Использовать Установить как по умолчанию так что посетители сначала видят ваш лучший контент.
- Сохраняйте согласованность значков и изображений. Смешение изображений, значков и текстовых меток в одной панели вкладок выглядит беспорядочно.
- Не перегружайте сохраненные разделы. Форма или аккордеон внутри вкладки идеальны, но тяжелая часть героя может замедлить ход событий, даже если ее спрятать.
- Проверьте мобильный вид перед публикацией. Вертикальные вкладки могут достигать высоты на небольших экранах, поэтому сначала просмотрите адаптивный макет.
Часто задаваемые вопросы #
Что такое виджет Advanced Tabs в Master Addons?
Это виджет Elementor для создания содержимого с вкладками. Вы можете выбрать горизонтальные, вертикальные, левоактивные или табличные макеты; добавляйте значки или изображения на каждую вкладку; заполняйте панели текстом или сохраненными разделами на Pro; и стилизовать нормальное, зависающее и активное состояния.
Могу ли я загрузить шаблон Элементора на вкладку?
Да, с Master Addons Pro. установите тип содержимого вкладки в сохраненный раздел и выберите любой шаблон из вашей библиотеки Elementor. этот шаблон будет отображаться внутри панели, когда вкладка активна.
Как сделать вкладку открытой по умолчанию?
Откройте элемент вкладки на вкладке Содержимое и включите пункт Установить по умолчанию Придерживайтесь одной вкладки по умолчанию, чтобы панель всегда начиналась в открытом состоянии.
В чем разница между горизонтальными вкладками и табличным содержимым?
Горизонтальные вкладки помещают метки в одну строку над содержимым Табличный контент, предустановка Pro, превращает метки в более крупные кнопки в виде карт, что хорошо работает, когда вы хотите, чтобы каждая вкладка ощущалась как отдельный выбор.
Могу ли я использовать разные типы значков для разных вкладок?
Да. каждая вкладка имеет свой собственный элемент управления типа значка, поэтому одна вкладка может использовать изображение, а другая - значок. для более чистого вида постарайтесь сохранить визуальный стиль согласованным на всех вкладках.
Завершая #
выше Расширенные вкладки виджет это надежный способ строительства расширенные вкладки Elementor с несколькими макетами и богатыми панелями контента. смешивайте и сопоставляйте предустановки с изображениями, значками или сохраненными разделами для каждой вкладки, пока не получите желаемый дизайн.
Если вы хотите посмотреть, что еще доступно, просмотрите полный набор Виджеты и расширения Master Addgets. А если вам интересны функции Pro, взгляните на страница ценообразования.
