Tabs sind eine erweiterte Möglichkeit, deine Inhalte zu organisieren und zu kategorisieren. Tabs, die du auf dem Desktop hinzufügst, werden automatisch auf deiner mobilen Website angezeigt und du kannst sie nach Bedarf an kleinere Bildschirme anpassen.
In diesem Artikel erfährst du mehr über folgende Themen:
Tabs auf deiner mobilen Website ausblenden
Wenn du keine Tabs auf deiner mobilen Website anzeigen möchtest, kannst du sie ganz einfach ausblenden. Nachdem du ein Tab-Element ausgeblendet hast, kannst du aus dem Panel
Ausgeblendet auf Mobile darauf zugreifen und es erneut anzeigen.
Um Tabs auf deiner mobilen Website auszublenden:
- Öffne den Mobile-Editor.
- Klicke auf das Tab-Element.
- Klicke auf das Symbol für Element ausblenden .
Das Layout der Tabs auf Mobile anpassen
Bearbeite das Layout der Tabs auf deiner mobilen Website, sodass sie für kleinere Bildschirme geeignet sind. Du kannst den Abstand und die Richtung ändern, um deine Tabs zu strukturieren, und auswählen, wie Besucher auf Mobile die Tabs angezeigt werden, die sich nicht ins Hauptmenü passen.
Um das Layout der Tabs auf deiner mobilen Website anzupassen:
- Klicke in deinem Mobile-Editor auf das Tab-Element.
- Klicke auf das Symbol für Layout .
- Wähle, wie du das Layout deines Tabs anpassen möchtest:
- Tab-Menü-Anzeige: Wähle aus, wie stark das Tab-Menü gestreckt werden soll:
- Justiert: Das Menü passt nicht zur Breite der Box. Du kannst dann wählen, ob die Menüelemente links, mittig oder rechts vom Rahmen ausgerichtet werden sollen.
- Gestreckt: Das Menü passt sich der Breite der gesamten Box an. Du kannst den Inhalt des Menüs links, mittig oder rechts vom Rahmen ausrichten.
- Abstand zwischen Tabs: Vergrößere oder verkleinere den Abstand zwischen den Tab-Elementen.
- Abstand zwischen Tabs und Box: Vergrößere oder verkleinere den Abstand zwischen dem Menü und den Content-Boxen.
- Horizontaler Abstand: Passe den Abstand links und rechts von den Menüelementen an.
- Vertikaler Abstand: Passe den Abstand oben und unten von den Elementen an.
- Anzeige nicht passender Tabs: Wähle aus, wie du Elemente anzeigen möchtest, die nicht in das Hauptmenü passen:
- Scrollen: Besucher können durch das Menü scrollen, um alle Elemente zu sehen.
- Umbruch: Eine weitere Zeile wird hinzugefügt, damit sie auf alle Elemente passt. Du kannst dann den Schieberegler verwenden, um den Abstand zwischen den Zeilen zu vergrößern oder zu verkleinern.
- Tab-Anzeige: Zeigt Elemente im oberen Menü von links nach rechts an oder umgekehrt.
Das Design von Tabs auf Mobilgeräten anpassen
Ändere das Design des Tab-Elements, damit es zum Aussehen deiner Mobile-Website passt. Die Änderungen, die du vornimmst, wirken sich nicht auf die Desktop-Website aus. Du kannst also Optionen wie Text und Füllfarbe ändern, um ein maßgeschneidertes Erlebnis für deine mobilen Besucher zu schaffen.
Um das Design von Tabs zu bearbeiten:
- Klicke in deinem Editor auf das Tab-Element.
- Klicke auf das Symbol für Design .
- Wähle unter Was möchtest du gestalten? eine Option aus und passe sie mit den verfügbaren Optionen an.
Wähle Tab-Menü aus dem Aufklappmenü und passe es mit den folgenden Optionen an:
- Hintergrundfüllungen : Wähle einen Menühintergrund, der zu deiner Seite passt, und passe die Sichtbarkeit an. Du kannst mehrere Ebenen hinzufügen und jede einzeln gestalten, um einzigartige, auffällige Hintergründe zu erstellen.
- Grenzen : Füge Ränder zum Menühintergrund hinzu, um einen Kontrast zu deiner Website-Seite zu schaffen. Wähle ein Design und eine Farbe und stelle die Breite so ein, wie du es benötigst.
- Ecken : Wähle aus, wie die Ecken deines Menüs aussehen sollen. Du kannst jede Ecke anders anpassen und sie runder oder eckiger gestalten.
- Schatten : Füge Schatten zu deinem Menühintergrund hinzu, um einen tollen 3D-Effekt zu erzielen. Du kannst die Größe, Sichtbarkeit, den Winkel und vieles mehr festlegen, um eine bessere Wirkung zu erzielen.
- Layout : Passe den Abstand um dein Tab-Menü herum an, um ihn zu vergrößern oder zu verkleinern. Du kannst das Schloss-Symbol aktivieren oder deaktivieren, um alle Seiten gleichzeitig oder jede Seite separat anzupassen.
Passe deine Tab-Menüelemente (Tabs) an. Du kannst das Design für jeden Status separat anpassen: Standard, Mouseover und Ausgewählt.
- Wähle aus dem Aufklappmenü Tabs aus.
- Klicke auf einen Status.
- Wähle aus, wie du die Tabelemente für diesen Status anpassen möchtest:
- Hintergrundfüllungen : Wähle die Farbe des Elementhintergrunds, die zu deiner Seite und deinem Menü passt, und passe die Sichtbarkeit an. Du kannst mehrere Ebenen hinzufügen und jede einzeln gestalten, um einzigartige, auffällige Hintergründe zu erstellen.
- Text : Passe den Elementtext mit Einstellungen wie Schriftart, -größe und Abstand an. Du kannst auch Formatierungen wie Fett und Kursiv hinzufügen und die Farbe auswählen.
- Ränder : Füge deinen Menüelementen Ränder hinzu, um sie hervorzuheben. Wähle ein Design und eine Farbe und stelle die Breite nach deinen Bedürfnissen ein.
- Ecken : Lege fest, wie die Ecken deiner Artikel aussehen sollen. Du kannst jede Ecke anders anpassen und sie runder oder eckiger gestalten.
- Schatten : Füge deinen Elementen Schatten hinzu, um einen tollen 3D-Effekt zu erzielen. Du kannst die Größe, Sichtbarkeit, den Winkel und vieles mehr festlegen, um eine Wirkung zu erzielen.
Wenn du einen Scroll-Button über das Layout-Panel der Tabs hinzufügst, kannst du sein Aussehen sowohl für den Standard- als auch für den Mouseover-Status anpassen.
- Wähle Scroll-Button aus dem Aufklappmenü.
- Klicke auf einen Status (z. B Standard, Mouseover).
- Wähle aus, wie du den Button für diesen Status anpassen möchtest:
- Hintergrundfüllungen : Wähle die Farbe und Deckkraft des Hintergrunds des Scroll-Buttons, damit er sich abhebt. Du kannst mehrere Ebenen hinzufügen und jede einzeln gestalten, um einzigartige, auffällige Hintergründe zu erstellen.
- Ränder : Füge Ränder zum Scroll-Button hinzu, um einen auffälligen Kontrast zu erzeugen. Wähle ein Design und eine Farbe und stelle die Breite so ein, wie du es benötigst.
- Ecken : Wähle aus, wie die Ecken deines Scroll-Buttons aussehen sollen. Du kannst jede Ecke anders anpassen und sie runder oder eckiger machen.
- Schatten : Füge Schatten zu deinem Button hinzu, um einen tollen 3D-Effekt zu erzielen. Du kannst die Größe, Sichtbarkeit, den Winkel und vieles mehr festlegen, um den Button so wirkungsvoll zu gestalten, wie du möchtest.
- Symbol : Gestalte das Symbol des Scroll-Buttons so, dass es sich im Tab-Menü abhebt und Besucher dazu anregt, sich anzusehen, welche anderen Inhalte deine Website zu bieten hat.
- Layout : Passe den Abstand um den Scroll-Button herum an, um ihn zu vergrößern oder zu verkleinern. Du kannst das Schloss-Symbol aktivieren oder deaktivieren, um alle Seiten gleichzeitig oder jede Seite separat anzupassen.
Bearbeite das Design deiner Tab-Container-Box, damit sie genau so aussieht, wie du es möchtest. Du kannst Bildhintergründe hinzufügen, einen 3D-Effekt mit Schatten erzeugen und vieles mehr.
Klicke im Aufklappmenü auf Box und wähle aus, wie du sie anpassen möchtest:
- Hintergrundfüllungen : Wähle einen Hintergrund für deine Container-Box und passe die Deckkraft an, um sie mehr oder weniger sichtbar zu machen. Du kannst mehrere Ebenen hinzufügen und jede einzeln gestalten, um einzigartige, auffällige Hintergründe zu erstellen.
- Ränder : Füge der Box Ränder hinzu, damit sie sich auf deiner Seite abhebt. Wähle ein Design und eine Farbe und stelle die Breite so ein, wie du es benötigst.
- Ecken : Lege fest, wie die Ecken deiner Tab-Box aussehen sollen. Du kannst jede Ecke anders anpassen und sie runder oder eckiger gestalten.
- Schatten : Füge Schatten zu deiner Tab-Box hinzu, um einen tollen 3D-Effekt zu erzielen. Du kannst die Größe, Sichtbarkeit, den Winkel und vieles mehr festlegen, um eine bessere Wirkung zu erzielen.
- Layout : Lege den Abstand um den Container herum fest, um ihn größer oder kleiner zu machen. Du kannst das Schloss-Symbol aktivieren oder deaktivieren, um alle Seiten gleichzeitig oder jede Seite separat anzupassen.