Ключевые выводы
- Вертикальные вкладки помещают заголовки в столбец слева или справа, с панелью рядом с ними. Они подходят для длинных заголовков и шести или более разделов, где будет обернута горизонтальная полоса.
- Собственный виджет Elementor Tabs делает это с помощью элемента управления Direction, установленного в значение Пуск или Конец. CSS не требуется.
- выше Виджет "Вкладки мастера" имеет предустановку в стиле вертикальных вкладок, которая поставляется скорее в стиле, чем в простом виде.
- Ниже примерно 768px не хватает ширины для бокового столбца, поэтому оба маршрута стекают Только основной виджет превращается в гармошку.
- Выберите ядро, если виджеты входят в панели, и дополнение, если самому столбцу вкладки нужны значки или готовый вид.
Горизонтальные вкладки ломаются, когда заголовки становятся длинными или многочисленными. Шесть заголовков в столбце размером 1200px либо переходят на две строки, либо уменьшают текст, пока их никто не прочитает.
Вертикальные вкладки поворачивают полосу на бок: узкий столбец заголовков с активной панелью рядом с ним. каждый заголовок получает полную строку, поэтому “Shipping и return” подходит без упаковки. Далее следуют оба способа его построения.
Оглавление
Когда вертикаль бьется горизонтально
Вертикальная схема - лучшая компоновка, если что-либо из этого верно:
- Более пяти секций, где полоса оборачивается, а колонна становится выше.
- Названия длиннее двух слов. “Гарантия и ремонт” нуждается в полной строке.
- Панели очень разной высоты, поскольку столбец заголовка остается на месте, пока панель меняет размер.
- Содержимое, читающееся как меню: разделы документации, списки услуг, сгруппированные часто задаваемые вопросы.
Оставайтесь горизонтальными для трех или четырех коротких заголовков. Боковой столбец съедает примерно четверть ширины, а с тремя вкладками торговля не стоит того.
Метод 1: Управление направлением Элементора
Виджет вкладок в Elementor обрабатывает это без надстройки.
- Перетащите виджет вкладок на страницу.
- В макете установите направление "Начало" для заголовков слева или "Конец" для заголовков справа.
- Установите выравнивание заголовка, чтобы контролировать, находится ли текст заголовка слева, в центре или справа внутри столбца.
- Постройте каждую панель внутри контейнера, как обычно.
Start помещает столбец слева на язык слева направо и автоматически переворачивается справа налево, поэтому значения называются Start and End вместо Left и Right.
Результат функционален и не имеет стиля: заголовки текста в столбце, панель рядом с ними, а также все границы и цвета, оставшиеся на вкладке "Стиль".
Метод 2: предустановка вертикальных вкладок
Виджет Master Addons рассматривает макет как предустановленное, а не направление, поэтому стиль прилагается к нему.
- Перетащите виджет вкладок.
- Установите предварительную настройку стиля на вертикальные вкладки.
- Добавьте по одному элементу ретранслятора в раздел, каждый с заголовком вкладки.
- Установите тип значка на значок или изображение, если он нужен заголовкам, выберите значок.
- Запишите содержимое панели и переключите "Установить по умолчанию" на той вкладке, которая должна открыться первой.
Столбец приходит со своим фоном, интервалом и активным состоянием, поэтому полезный блок занимает минуту вместо сеанса стилизации. предел тот же, что и у аддона всегда: панели содержат содержимое редактора, поэтому форма или галерея внутри вкладки означает сохраненный шаблон на Pro или основной виджет вместо него.
Более тихий вариант: левая активная граница
Стоит знать третий пресет. Left Active Border сохраняет вертикальный столбец, но опускает квадратный вид: заголовки сидят на фоне страницы, а активный отмечен цветной полосой на левом краю.
Это тот, к которому следует обращаться на страницах в стиле документации, где тяжелая колонка табуляции борется с основным текстом за внимание.
Что происходит по телефону
На экране с разрешением 390px нет места для боковой колонки и панели, поэтому оба маршрута отказываются от вертикальной компоновки.
Основной виджет стекируется к вертикальному аккордеону ниже точки останова, которую вы выбираете в дополнительных настройках, при этом каждый заголовок находится прямо над собственной панелью. Виджет дополнения стекирует заголовки в столбец во всю ширину с панелью под ним, который работает, хотя это не аккордеон: открытая панель остается ниже всего списка заголовков.
В любом случае, проверьте вид телефона перед публикацией. макет, который вы разработали на рабочем столе, не является макетом, который видит посетитель телефона.
Какой метод использовать
| Ситуация | Метод |
|---|---|
| Формы, галереи или таблицы цен внутри панелей | Основные вкладки, направление установлено на начало |
| Нужно быть гармошкой на телефонах | Вкладки Core |
| Титулы справа вместо левого | Основные вкладки, направление установлено на конец |
| Значки или изображения в заголовках | Дополнение, предустановка вертикальных вкладок |
| Столбец в стиле без работы вкладки Стиль | Дополнение, предустановка вертикальных вкладок |
| Простая боковая навигация в стиле документации | Дополнение: предустановка левой активной границы |
| Панели включают зависание | Дополнение: Эффект вкладки установлен в "Наведение курсора" |
Часто задаваемые вопросы
Может ли Elementor создавать вертикальные вкладки без дополнения?
Да. установите для управления направлением виджета вкладок значение "Пуск или конец", и заголовки перейдут в боковой столбец.
Почему значения направления называются "Пуск и конец", а не "Лево и справа"?
Так что макет переворачивается правильно в языках справа налево Начало - это сторона, на которой начинается текст.
Сколько вкладок работает в вертикальной компоновке?
Шесть-десять удобно. За этим колонна становится выше панели рядом с ней, что выглядит странно.
Остаются ли вертикальные вкладки вертикальными на мобильных устройствах?
Нет. Ширины недостаточно, поэтому оба маршрута стекают Основной виджет становится гармошкой; дополнение стекает заголовки над панелью.
Могу ли я поместить форму на вертикальную вкладку?
С основным виджетом, да, потому что каждая панель является контейнером, С помощью дополнения эквивалент указывает Тип контента на сохраненный шаблон, который является опцией Pro.
Заключительные мысли
Вертикальность - это то, как вы решаете проблему ширины, не сокращая заголовки. Элементор управления направлением делает это без дополнения и держит контейнеры в панелях, что имеет значение, если что-то интерактивное идет внутрь. Пресеты аддона имеют значение, когда столбец заголовка должен выглядеть законченным без вы стилизуете его. Оба требуют примерно одинакового времени для сборки, так что то, что живет в панели решает это.
Связанное чтение
