Elementor-Tabs auf Mobilgeräten: Fixieren Sie den gequetschten Streifen

Wichtige Erkenntnisse

• Vier Tab-Titel, die auf eine 1.200-px-Desktop-Spalte passen, haben etwa 390 px auf einem Telefon, also wickeln, quetschen oder überlaufen.
• Das Tabs-Widget von Elementor verfügt über eine Haltepunktsteuerung, die den Streifen auf eine vertikale Ziehharmonika unterhalb der von Ihnen gewählten Breite umschaltet. Mobil ist die Standardeinstellung.
• Horizontal Scroll ist die andere Möglichkeit: Titel bleiben in einer Reihe und Besucher wischen durch sie hindurch.
• Die Master Addons Tabs Widget Stapelt seine Titel in eine Spalte über die gesamte Breite auf einem Telefon, darunter das offene Panel Das ist lesbar, aber es ist kein Akkordeon.
• Drei oder weniger Kurztitel überstehen ein Telefon meist unberührt, darüber hinaus Akkordeon pflücken oder gezielt scrollen.

Tabs sind ein Desktop-Muster Sie nehmen horizontalen Raum für mehrere Titel plus ein Panel an, und ein Telefon hat etwa ein Drittel dieser Breite.

Elementor gibt Ihnen zwei Auswege, und Addon-Widgets verhalten sich wieder anders Die Telefon-Screenshots unten sind 390 px-Aufnahmen einer echten Testseite, also was Sie sehen, ist, was die Einstellung macht.

Was schief geht

Ein Tabstreifen will eine Zeile Geben Sie ihm weniger Breite als die Titel benötigen und Sie erhalten eines von drei Ergebnissen, keines davon gut:

• Die Titel werden in eine zweite und dritte Reihe gewickelt und der Streifen liest sich nicht mehr als Streifen.
• Stattdessen werden sie zerquetscht, bis jedes Etikett ein paar Pixel unlesbaren Textes enthält.
• Oder die letzte läuft über den Rand, bringt meist eine horizontale Seitenrollleiste mit.

Tippziele machen es noch schlimmer Berührungsrichtlinien legen ein komfortables Ziel auf etwa 44 Prozent fest, und ein gequetschter Titel liegt deutlich darunter, sodass die Leute den Nachbarn verfehlen und treffen.

Option 1: Wechsel zu einem Akkordeon

Dies ist das Verhalten, das die meisten Menschen wollen, und das Tabs-Widget macht es ohne CSS.

1. Wählen Sie das Tabs-Widget aus und öffnen Sie zusätzliche Einstellungen in der Registerkarte Inhalt.
2. Haltepunkt auf die Breite, wo der Streifen aufgeben soll Mobile ist die Voreinstellung und meist die richtige Antwort; Tablet macht Sinn, wenn die Titel lang sind.

Unterhalb dieser Breite sitzt jeder Titel direkt über seinem eigenen Panel und ein Tipp auf einen öffnet ihn. Ein Titel pro Zeile bedeutet ein Tippziel über die gesamte Breite, und der Inhalt bleibt zusammengebrochen, damit die Seite nicht länger wird.

Option 2: den Streifen scrollen lassen

Horizontal Scrollen einschalten und die Titel bleiben in einer Reihe in beliebiger Breite, wobei die Reihe seitwärts scrollt Besucher wischen daran entlang, um die vom Bildschirm aus zu erreichen.

Das passt zu einem Streifen, der sich als Sequenz liest, wie Monate oder Größen, wo es mehr darauf ankommt, die Reihenfolge sichtbar zu halten, als jede Option auf einmal zu sehen Seine Schwäche ist die Entdeckung: Ein Besucher, der nicht bemerkt, dass die Zeilenrollen die späteren Tabs nie finden, den nächsten Titel halb sichtbar am Rand zu lassen, hilft, denn ein Cut-off-Label ist eine offensichtliche Einladung zum Wischen.

Scroll und Akkordeon-Breakpoint schließen sich nicht aus. Wenn Sie also beides festlegen, entscheiden Sie, welches Sie tatsächlich unterhalb des Breakpoints wünschen, und überprüfen Sie das Ergebnis am Telefon.

Was Addon-Tabs auf einem Telefon bewirken

Das Master Addons-Widget verarbeitet schmale Bildschirme durch Stapeln: Die Titel werden zu einer Spalte über die gesamte Breite und das offene Feld befindet sich unterhalb der gesamten Liste.

Jeder Titel erhält ein Tippziel über die gesamte Breite, das das Squashing löst. Es koppelt nicht jeden Titel mit einem eigenen Panel, sodass ein Besucher mit sechs oder sieben Tabs an der gesamten Liste vorbeiscrollt, bevor er einen Inhalt erreicht.

Die praktische Regel: das Addon ist in Ordnung auf einem Telefon mit drei oder vier Tabs, und das Kern-Widget mit einem Haltepunkt ist besser, wenn es mehr sind.

Welche Option für welche Seite

Wenn Tabs auf Mobilgeräten nicht mehr funktionieren

“Tabs arbeiten nicht mobil” erweist sich meist als eines von vier Dingen:

• Ein Hover-Effekt Auf einem Touchscreen existiert kein Hover, daher benötigt ein Tab, der zum Einschalten des Hovers eingestellt ist, einen Tipp, manchmal auch zwei. Legen Sie den Effekt so fest, dass Sie auf jede Seite mit Telefonverkehr klicken.
• Zwischengespeichertes CSS. Nach dem Wechsel des Haltepunkts regenerieren Sie das CSS von Elementor und löschen Sie den Seitencache, sonst bedient das Telefon weiterhin das alte Stylesheet.
• Ein aufgeschobenes Skript. Aggressive JavaScript-Verschiebung hält das Tab-Skript zurück, bis der Besucher mit der Seite interagiert, sodass der erste Tipp nichts bewirkt. Schließen Sie das Skript des Widgets im Optimierungs-Plugin aus.
• Ein zu kleines Tippziel Es ist nichts kaputt, der Titel ist nur kleiner als ein Daumen, und der Akkordeon-Breakpoint fixiert ihn.

Häufig gestellte Fragen

Letzte Gedanken

All das braucht kein CSS. Die Haltepunktsteuerung von Elementor deckt den gewöhnlichen Fall ab, Horizontal Scroll deckt Sequenzen ab, und Addon-Widgets stapeln sich in eine lesbare Spalte, dann öffnen Sie die Seite auf einem tatsächlichen Telefon und tippen Sie auf jeden Titel, denn das ist der Schritt, den die Leute überspringen.

Verwandte Lektüre

• Tabs Widget
• So erstellen Sie Registerkarten in Elementor
• Elementor verschachtelte Tabs erklärt
• So erstellen Sie vertikale Registerkarten in Elementor
• Erweitertes Accordion-Widget