Ключевые выводы
- Четыре заголовка вкладок, которые подходят для столбца рабочего стола 1200px, имеют около 390px на телефоне, поэтому они обертываются, сквошируются или переполняются.
- Виджет Elementor Tabs имеет элемент управления Breakpoint, который переключает полосу на вертикальный гармонь ниже выбранной вами ширины.Mobile - это по умолчанию.
- Другой вариант - горизонтальная прокрутка: названия остаются в одном ряду, и посетители просматривают их.
- выше Виджет "Вкладки мастера" складывает его заголовки в столбец во всю ширину на телефоне, с открытой панелью под ним. Это читаемо, но это не аккордеон.
- Три или меньше коротких заголовков обычно сохраняются телефон нетронутым. За этим выберите гармошку или прокрутите намеренно.
Вкладки - это узор рабочего стола. они предполагают горизонтальное пространство для нескольких заголовков плюс панель, и телефон имеет около трети этой ширины.
Элементор дает вам два выхода, и виджеты аддонов снова ведут себя по-другому. скриншоты телефона ниже - это 390px захваты реальной тестовой страницы, поэтому вы видите то, что делает настройка.
Оглавление
Что идет не так
Полоса табуляции хочет одну строку. дайте ей меньшую ширину, чем нужно заголовкам, и вы получите один из трех результатов, ни один из них не является хорошим:
- Названия переходят на второй и третий ряд, а полоса перестает читаться как полоса.
- Вместо этого они раздавливаются, пока каждая метка не станет несколькими пикселями нечитаемого текста.
- Или последний переполняется с края, обычно принося с собой горизонтальную полосу прокрутки страницы.
Целевые показатели нажатия делают ситуацию еще хуже. В правилах касания удобная цель составляет около 44%, а сокращенное название значительно ниже этого, поэтому люди промахиваются и бьют соседа.
Вариант 1: переключиться на гармошку
Такое поведение большинство людей хотят, и виджет вкладок делает это без CSS.
- Выберите виджет "Вкладки" и откройте "Дополнительные настройки" на вкладке "Содержимое".
- Установите точку останова на ширину, где полоска должна сдаться Мобильный телефон по умолчанию и обычно является правильным ответом; планшет имеет смысл, когда заголовки длинные.
Ниже этой ширины каждый заголовок находится прямо над своей панелью, и его открывает нажатие. Один заголовок в строке означает цель нажатия на всю ширину, и содержимое остается свернутым, чтобы страница не стала длиннее.
Вариант 2: пусть полоска прокручивается
Включите горизонтальную прокрутку, и заголовки останутся в одном ряду на любой ширине, а строка будет прокручиваться вбок. Посетители проводят по ней пальцем, чтобы добраться до тех, кто находится за пределами экрана.
Это подходит полоска, которая читается как последовательность, как месяцы или размеры, где сохранение порядка видимым имеет значение больше, чем вид каждого варианта сразу. его слабость - открытие: посетитель, который не замечает, что прокрутки строк никогда не находят более поздние вкладки. Оставление следующей половины заголовка видимой на краю помогает, потому что светотеневая метка - это очевидное приглашение провести пальцем.
Прокрутка и точка останова аккордеона не являются взаимоисключающими, поэтому, если вы установите оба, решите, какой из них вам действительно нужен ниже точки останова, и проверьте результат на телефоне.
Что вкладки аддонов делают на телефоне
Виджет Master Addons обрабатывает узкие экраны путем стекирования: заголовки становятся столбцами во всю ширину, а открытая панель находится под всем списком.
Каждая игра получает цель касания на всю ширину, которая решает проблему сжатия. Она не соединяет каждую игру со своей собственной панелью, поэтому с шестью или семью вкладками посетитель прокручивает весь список, прежде чем достичь какого-либо контента.
Практическое правило: аддон подходит для телефона с тремя или четырьмя вкладками, а основной виджет с точкой останова лучше, когда их больше.
Какой вариант для какой страницы
| Ситуация | Настройка |
|---|---|
| Три или четыре коротких названия, в основном рабочий стол | Оставьте, затем проверьте телефон |
| Пять или более вкладок | Основные вкладки с точкой останова, настроенной на мобильную связь |
| Длинные названия, такие как “Shipping и return” | Вкладки Core с точкой останова, установленной на планшете |
| Заголовки, которые читаются как последовательность, например, месяцы или размеры | Горизонтальная прокрутка |
| В основном телефонный трафик и длинные панели | Виджет-гармошка вместо вкладок |
| Названия значков, три или четыре вкладки | Аддон виджет, сложенный столбец в порядке |
Когда вкладки перестают работать на мобильных устройствах
“Вкладки, не работающие на mobile”, обычно оказываются одной из четырех вещей:
- Эффект наведения на действие На сенсорном экране не существует, поэтому вкладка, установленная для включения наведения, нуждается в нажатии, иногда в двух. Установите эффект нажатия на любую страницу с телефонным трафиком.
- Кэшированный CSS. после изменения точки останова регенерируйте CSS Elementor и очистите кэш страницы, или телефон продолжит обслуживать старую таблицу стилей.
- Отложенный сценарий Агрессивная отсрочка JavaScript удерживает сценарий табуляции обратно до взаимодействия посетителя со страницей, поэтому первое касание ничего не делает Исключить сценарий виджета в плагине оптимизации.
- Чечетка, которая слишком мала. ничего не сломано, заголовок просто меньше большого пальца, и точка разрыва аккордеона фиксирует его.
Часто задаваемые вопросы
Как сделать так, чтобы вкладки Elementor превратились в гармошку на мобильном телефоне?
Выберите виджет "Вкладки", откройте "Дополнительные настройки" и установите "Точку останова". Ниже этой ширины полоса переключается на вертикальную компоновку аккордеона, по умолчанию используется мобильная связь.
Почему заголовки моих вкладок перекрываются на телефоне?
Полоса имеет меньшую ширину, чем нужно для заголовков. установите точку останова аккордеона, включите горизонтальную прокрутку или сократите заголовки.
Вкладки вредят мобильному SEO?
Нет. Содержимое вкладки находится в HTML и индексируется независимо от того, открыта панель или нет.
Должен ли я использовать вкладки или аккордеон на мобильном телефоне?
Если большая часть вашего трафика - телефоны, а панели длинные, создайте его как гармошку с самого начала. вкладки с точкой останова - лучший вызов, когда основной вид - рабочий стол.
Почему мой первый постукивание ничего не дает?
Обычно эффект наведения или отложенный сценарий. Установите эффект вкладки на щелчок и исключите сценарий вкладки из отсрочки JavaScript.
Заключительные мысли
Ничего из этого не нуждается в CSS. элемент управления Breakpoint от Elementor охватывает общий случай, Горизонтальная прокрутка покрывает последовательности, и виджеты аддонов стекаются в читаемый столбец.Тогда откройте страницу на реальном телефоне и коснитесь каждого заголовка, потому что это шаг люди пропускают.
Связанное чтение
