Tab-Elemente

Was ist das Tab-Element?

Registerkarten auf Websites wurden von den physischen Registerkarten in Papieraktenordnern inspiriert. Mit ihnen können Sie verschiedene Inhaltsabschnitte in einem kompakten, leicht zu navigierenden Format anzeigen.

Mit der GemPages-Registerkartenelement, Sie können:

• Präsentieren Sie Inhalte in einem übersichtlichen, platzsparenden Layout.
• Ermöglichen Sie Benutzern, zwischen Inhalten zu wechseln, ohne den Abschnitt zu verlassen.
• Halten Sie Ihre Seite sauber und optisch ansprechend.

So fügen Sie das Tab-Element in GemPages hinzu

Führen Sie die folgenden Schritte aus, um die Registerkartenelement in Ihre Seite:

Schritt 1:: Von der GemPages Dashboard, öffnen Sie eine Vorlage zum Bearbeiten. Sie finden schnell die Tab Element in der linken Seitenleiste des Editors, unter dem Interaktives Benutzererlebnis Abschnitt. Ziehen Sie das Element per Drag & Drop an die gewünschte Position.

Schritt 2:: Löschen Sie die anderen Elemente wie Überschrift, Textblock, Bild, usw. innerhalb der Registerkarte, um das gewünschte Inhaltslayout zu erstellen.

Klicken Sie auf das Tab-Element, Die Konfiguration ist in der linken Seitenleiste verfügbar und wird in den folgenden Abschnitten behandelt.

Konfigurieren der Registerkartenelementeinstellung

Sobald das Tab-Element auf Ihrer Seite ist, werden seine Konfigurationsoptionen im linke Seitenleiste.

1. Die Registerkarte „Einstellungen“

Layout

• Steuert die Position der Registerkarten im Verhältnis zum Inhalt.
• Standard: Registerkarten auf der links des Inhalts.

Layoutoptionen:

• Registerkarten über dem Inhalt
• Registerkarten links vom Inhalt
• Registerkarten rechts neben dem Inhalt

Durch Auswahl eines Layouts wird das Layout-Popover für einfache Änderungen.

Tabs

1. Reihenfolge: Standardmäßig verfügt das Element über 3 Registerkarten. Der Registerkartentitel im Popover spiegelt den Inhalt der Registerkarte im Designbereich wider.

• So fügen Sie eine weitere Registerkarte hinzu: Klicken Sie einfach auf die Option „Weitere hinzufügen“. 
• So duplizieren Sie eine Registerkarte: Bewegen Sie den Mauszeiger über die gewünschte Folie und klicken Sie auf das Duplikatsymbol. 
• So entfernen Sie eine Registerkarte: Bewegen Sie den Mauszeiger über die entsprechende Folie und klicken Sie auf das Papierkorbsymbol.

2. Text: Der Textstil jedes Registerkarteninhalts.

3. Breite: Die Breite jedes Registerkartenelements. Der Standardwert für die Breite ist „Auto“. Dies bedeutet, dass die Registerkartenbreite automatisch an die Größe des Inhalts angepasst wird.

Breitenoptionen: Wenn Sie auf die Dropdown-Schaltfläche des Breiteneingabefelds klicken, wird ein Dropdown-Menü mit Breitenoptionen angezeigt:

• „Auto“ bedeutet, dass die Breite an den Inhalt angepasst wird.
• Voll bedeutet Breite = 100 % (volle Breite) -> Die Breite jeder Registerkarte wird mit dem Element gefüllt

4. Hintergrund: Legen Sie die Hintergrundfarbe für jede Registerkarte fest.

5. Grenze: Rahmenstil anpassen.

6. Tabs ausrichten: Die Ausrichtung aller Tab-Elemente innerhalb des Tab-Elements.

• Layout oben → Horizontale Ausrichtung.
• Layout Links/Rechts → Vertikale Ausrichtung.

7. Hover-Effekte: Die Einstellungen für jeden Tab beim Darüberfahren mit der Maus.

8. Aktiver Status: Die Einstellungen für jede Registerkarte, wenn sie aktiv ist.

Größe

1. Breite

Breite = 1200px: wenn eine Registerkarte platziert wird, um einen neuen Abschnitt zu erstellen oder innerhalb einer Spalte von Abschnitt 1

Breite = 100 % (volle Breite): wenn ein Tab in andere Elemente eingefügt wird

Breitenoptionen: Wenn Sie auf die Dropdown-Schaltfläche des Breiteneingabefelds klicken, wird unten ein Dropdown-Menü mit Breitenoptionen angezeigt: 

• Standard bedeutet Breite = 1200px
• Voll bedeutet Breite = 100 % (volle Breite)

2. Polsterung

• Polsterung des Elements.
• Durch Hinzufügen der Polsterung wird der Abstand zwischen der Elementkante und der tatsächlichen Elementgröße vergrößert.

Hintergrund

1. Farbe

Durch Klicken auf die Eingabekombination wird die Farbauswahl geöffnet und eine Standardfarbe #DDDDDD hinzugefügt.

2. Bild

Durch Klicken auf die Eingabekombination wird die Bildauswahl geöffnet und ein Standardbild hinzugefügt.

Shape

Diese Formeinstellungen gelten für die Hülle des Akkordeons. 

• Grenze
• CORNER
• Shadow

Anzeigeoption

• Standardmäßig aktiv: Legen Sie eines der Registerkartenelemente so fest, dass es zunächst standardmäßig ausgewählt ist.

Ausrichten

• Die Ausrichtung wird deaktiviert, wenn die Breite des Elements 100 % beträgt.
• Wenn nicht, werden die Standardausrichtungsoptionen ausgerichtet Center.

2. Die Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zu Erweitert und folgen Sie den Anweisungen in Dieser Artikel.