DokumentationCommercePage Builder

Layout - Registerkarten

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Benutzende

Verwenden Sie den Inhaltstyp Registerkarten , um eine Reihe von Registerkarten zur Page Builder Bühne hinzuzufügen. Wenn Sie den Registerkarten-Platzhalter aus dem Bedienfeld auf die Bühne ziehen, wird zunächst eine einzelne Standardregisterkarte angezeigt. Sie können weitere Registerkarten hinzufügen, um einen vollständigen Satz zu erstellen. Die Breite des Registerkartensatzes wird durch die Breite des übergeordneten Containers und der Abstandseinstellungen bestimmt.

Gruppe von Registerkarten

NOTE
Wenn Sie wesentliche Änderungen am Inhalt von Page Builder vornehmen, wird empfohlen, die Lebensdauer der Admin-Sitzung zu erhöhen, um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Toolboxes

Wenn Sie mit dem Inhaltstyp Registerkarten arbeiten, fügen Sie einzelne Registerkarten und den Registerkarten-Container hinzu und bearbeiten Sie ihn, der mindestens eine Registerkarte enthält. Jede Registerkarte verfügt über eine eigene Toolbox, mit der Sie Registerkarten auf der Page Builder-Bühne entwerfen.

Symbolleiste für einzelne Registerkarten

Tab toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol "Verschieben" {width="25"}
Mit diesem Steuerelement neben der Tabulatorbeschriftung können Sie die einzelne Registerkarte in der Registerkarte an eine andere Position verschieben.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite "Registerkarten bearbeiten", auf der Sie die Eigenschaften der einzelnen Registerkarten ändern können.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert die Registerkarte.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht die Registerkarte aus dem Registerkartensatz.

Registerkarten-Container-Toolbox

Tab-Container-Toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol "Verschieben" {width="25"}
Verschiebt den Satz von Registerkarten an eine andere Position im Raster im übergeordneten Container.
Hinzufügen
Symbol "Hinzufügen" {width="25"}
Fügt dem Registerkartensatz eine Registerkarte hinzu.
(Titel)
Tabs
Identifiziert den aktuellen Container als Registerkartensatz. Bewegen Sie den Mauszeiger über den oberen Rand des Containers, um die Toolbox anzuzeigen.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite "Registerkarte bearbeiten", auf der Sie die Eigenschaften des Containers ändern können.
Ausblenden
Symbol zum Ausblenden {width="25"}
Blendet den Registerkartencontainer aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt den ausgeblendeten Registerkarten-Container an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert die aktuelle Registerkarte.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht den aktuellen Tab-Satz aus der Bühne.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden nicht sichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut "Unsichtbarkeit"angefordert werden, es sei denn, Sie entfernen sie aus der Bühne.

Hinzufügen einer einzelnen Registerkarte

  1. Ziehen Sie im Bedienfeld Page Builder unter Layout ​den Platzhalter Tabs ​direkt auf die Bühne oder auf eine Zeile oder Spalte auf der Bühne.

    Ziehen von Registerkarten auf eine Zeile {width="600" modal="regular"}

  2. Klicken Sie auf die Beschriftung Tab 1 , um die einzelne Registerkarten-Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

  3. Geben Sie den Tab Name ein, den Sie als Beschriftung verwenden möchten.

    Registernamen eingeben {width="600" modal="regular"}

  4. Geben Sie bei Bedarf die Minimum Height für die Registerkarte ein.

    Dieser Wert kann eine Zahl mit einer beliebigen gültigen CSS-Einheit (z. B. 100px, 50%, 50em, 100vh) oder eine Berechnung (z. B. 100vh - 237px) sein.

  5. Wählen Sie die Einstellung "Vertical Alignment", um alle Inhaltscontainer auszurichten, die der Registerkarte hinzugefügt werden (oben, zentriert oder unten).

  6. Legen Sie bei Bedarf die anderen Optionen mithilfe der folgenden Abschnitte als Anleitung fest:

  7. Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Hinzufügen einer Reihe von Registerkarten

Die folgenden Schritte beginnen mit einer einzelnen Registerkarte und erstellen eine Reihe von drei Registerkarten innerhalb eines Registerkarten-Containers. Wenn Sie noch keine einzelne Registerkarte haben, befolgen Sie die vorherigen Anweisungen, um der Bühne eine einzelne Registerkarte hinzuzufügen.

  1. Bewegen Sie den Mauszeiger über den Registerkarten-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Hinzufügen ( Symbol Hinzufügen {width="20"} ).

  2. Klicken Sie auf die Bezeichnung Tab 2 , um den Cursor anzuzeigen, und geben Sie einen eigenen Titel für die Registerkarte ein.

  3. Klicken Sie erneut auf die zweite Registerkarte auf der Bühne und wählen Sie das Symbol Duplizieren ( Symbol Duplizieren {width="20"} ).

  4. Klicken Sie auf die Bezeichnung YourName Copy , um den Cursor anzuzeigen und geben Sie einen eigenen Titel für die dritte Registerkarte ein.

Übereinstimmender Satz von Registerkarten mit Toolbox

Verschieben einer Registerkarte innerhalb des Sets

  1. Klicken Sie auf die Registerkarte, die Sie verschieben möchten.

  2. Wählen Sie das Symbol Verschieben ( Verschieben-Symbol {width="20"} ), das direkt vor dem Registerkartenbeschriftungstext angezeigt wird, aus und ziehen Sie es an eine neue Position innerhalb des Registerkartensets.

Inhalt zu einer Registerkarte hinzufügen

Sie können jeden Inhaltstyp auf eine Registerkarte genau so wie auf eine Zeile anwenden. Gehen Sie wie folgt vor, um einen Inhaltstyp für Text hinzuzufügen.

  1. Klicken Sie auf die Registerkarte, auf der Sie den Inhalt hinzufügen möchten.

  2. Erweitern Sie im Bedienfeld Page Builder den Eintrag Elements und ziehen Sie einen Platzhalter für Text auf die Registerkarte.

  3. Geben Sie Text in den Editor ein oder fügen Sie ihn ein und verwenden Sie die Editor-Symbolleiste, um ihn nach Bedarf zu formatieren.

    Weitere Informationen zum Arbeiten mit dem Textinhalttyp finden Sie unter Elemente - Text .

    Bearbeiten von Textinhalten, die auf der Registerkarte hinzugefügt wurden {width="500" modal="regular"}

  4. Klicken Sie in der oberen rechten Ecke auf Save.

Einzelne Registerkarteneinstellungen ändern

  1. Bewegen Sie den Mauszeiger über eine einzelne Registerkarte, um die Toolbox anzuzeigen und das Symbol Einstellungen ( Einstellungssymbol {width="20"} ) auszuwählen.

  2. Ändern Sie bei Bedarf die grundlegenden Einstellungen für die Registerkarte:

    • Tab Name - Geben Sie den überarbeiteten Text für die Registerkartenbeschriftung ein. Sie können den Titel auch direkt auf der Bühne ändern.

    • Minimum Height - Geben Sie als Pixel ein, wenn Sie die automatische Höhe überschreiben möchten. Sie können beispielsweise die Mindesthöhe so festlegen, dass sie der Höhe eines Hintergrundbilds entspricht, um sicherzustellen, dass das vollständige Bild sichtbar ist.

    • Vertical Alignment - Wählen Sie die vertikale Position der Inhaltscontainer aus, die der Registerkarte hinzugefügt werden.

  3. Ändern Sie die anderen Einstellungen nach Bedarf mithilfe der folgenden Abschnitte für Details.

  4. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Hintergrund

  • Background Color - Geben Sie die Hintergrundfarbe an, indem Sie ein Muster auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Diese Einstellung bestimmt die Hintergrundfarbe der Zeile. Sie können auch die Deckkraft der Farbe anpassen.

    Keine Farbe (Standard) {width="200"}

    Sie können einen Wert auf drei Arten eingeben:

    • Ein vordefinierter Farbname, z. B. White

    • Der hexadezimale Farbwert für die Farbe, z. B. #ffffff

    • Der rgba-Wert für die Farbe mit Deckkraft-Prozent, z. B. rgba(255, 255, 255, 0.75)

    Wenn Sie eine Farbe auswählen möchten, klicken Sie auf das Muster links neben dem Feld Keine Farbe.

    Auswählen eines Farbmusters {width="600" modal="regular"}

    Wenn Sie auf das Farbfeld klicken, um die Farbauswahl erneut zu öffnen, zeigt das Feld unter dem Schieberegler die aktuellen Rot-, Grün-, Blau- und Alpha-Werte (rgba) an. Die letzte Zahl gibt den aktuellen Deckkraftprozentsatz als Dezimalzahl an. Sie können den Schieberegler verwenden, um die Deckkraft anzupassen, oder den gewünschten Dezimalwert eingeben.

    Einstellen der Deckkraft {width="600" modal="regular"}

    note note
    NOTE
    Page Builder unterstützt auch eine Transparenzschicht (oder den Alphakanal) in Hintergrundbildern, mit der Hintergründe mit unterschiedlicher Deckkraft erstellt werden können.

  • Background Image - Verwenden Sie bei Bedarf die bereitgestellten Tools, um ein Hintergrundbild auszuwählen, das auf die Registerkarte angewendet werden soll:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Tool Beschreibung
    Upload Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie hoch und wendet sie dann als Hintergrundbild für die Registerkarte an.
    Select from Gallery fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für die Registerkarte auszuwählen.
    Kamerasymbol {width="25"} Ermöglicht Ihnen, das Bild entweder auf die Kachel "Kamera"zu ziehen oder zum Bild in Ihrem lokalen Dateisystem zu navigieren.

  • Background Mobile Image - Verwenden Sie bei Bedarf dieselben Tools, um ein anderes Hintergrundbild für die Anzeige auf Mobilgeräten auszuwählen.

  • Background Size - Wählen Sie aus, wie das Hintergrundbild im Verhältnis zur Breite der Registerkarte skaliert wird:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Beschreibung
    Cover Das Hintergrundbild deckt die gesamte Breite der Registerkarte ab.
    Contain Das Hintergrundbild ist auf die Breite des Registerkartenbereichs beschränkt.
    Auto Wendet die Größe aus dem aktuellen Stylesheet an.

  • Background Position - Wählen Sie aus, wie das Hintergrundbild im Verhältnis zur Registerkarte verankert ist: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment - Wählen Sie den Anlagentyp aus, um festzulegen, wie sich das Hintergrundbild im Verhältnis zur Scrollseite bewegt:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Beschreibung
    Scroll Das angehängte Hintergrundbild wird synchronisiert, um sich beim Bildlauf der Seite nach unten zu bewegen.
    Fixed (Für Mobilgeräte nicht verfügbar) Das Hintergrundbild wird nicht verschoben, wenn der Container über das Bild blättert, und ist an der angegebenen Hintergrundposition fixiert.

  • Background Repeat - Auf Yes setzen, um das Hintergrundbild zu wiederholen und den verfügbaren Platz auf der Registerkarte zu füllen.

Erweitert

  • Um die horizontale Ausrichtung der Inhaltscontainer zu steuern, die der Registerkarte hinzugefügt werden, wählen Sie eine Alignment aus.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Beschreibung
    Default Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist.
    Left Richtet die Inhaltscontainer am linken Rand der Registerkarte aus, wobei der angegebene Abstand berücksichtigt wird.
    Center Richtet den Inhalts-Container in der Mitte der Registerkarte aus, wobei der angegebene Abstand berücksichtigt wird.
    Right Richtet den Inhalts-Container am rechten Rand der Registerkarte aus, wobei der angegebene Abstand berücksichtigt wird.

  • Legen Sie den Border -Stil fest, der auf alle vier Seiten des Registerkartencontainers angewendet wird:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Beschreibung
    Default Wendet den standardmäßigen Randstil an, der vom zugehörigen Stylesheet angegeben wird.
    None liefert keine sichtbare Anzeige der Containergrenzen.
    Dotted Der Container-Rahmen wird als gepunktete Linie angezeigt.
    Dashed Der Container-Rahmen wird als gestrichelte Linie angezeigt.
    Solid Der Container-Rahmen wird als durchgehende Linie angezeigt.
    Double Der Container-Rahmen wird als doppelte Linie angezeigt.
    Groove Der Container-Rahmen wird als Rillenlinie angezeigt.
    Ridge Der Container-Rahmen wird als gekürzte Linie angezeigt.
    Inset Der Container-Rahmen wird als Inset-Zeile angezeigt.
    Outset Der Container-Rahmen wird als Ausgangspunkt angezeigt.

  • Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

    Rahmenfarbe {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Beschreibung
    Border Color Geben Sie die Farbe an, indem Sie ein Muster auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.
    Border Width Geben Sie die Anzahl Pixel für die Rahmenlinienbreite an.
    Border Radius Geben Sie die Anzahl der Pixel an, um die die Größe des Radius definiert wird, mit dem die einzelnen Ecken des Rands gerundet werden.

    Die Zeile im folgenden Beispiel hat einen Rahmenradius von 15.

    Zeile mit Rahmenradius von 15 {width="500"}

  • (Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Spaltencontainer angewendet werden soll.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  • Geben Sie Werte in Pixel an, damit der Wert Margins and Padding die äußeren Ränder und den inneren Abstand der Spalte angibt.

    Geben Sie jeden entsprechenden Wert in das Tab-Container-Diagramm ein.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Container-Bereich Beschreibung
    Margins Die Menge an leerem Raum, die auf den äußeren Rand aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left
    Padding Die Menge an leerem Raum, die auf den inneren Rand aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left

Einstellungen für Registerkarteneinstellungen ändern

  1. Bewegen Sie den Mauszeiger über den oberen Rand des Registerkartenset-Containers, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

  2. Ändern Sie bei Bedarf die Default Active Tab.

    Wählen Sie die Registerkarte im Set aus, die aktiv sein soll, wenn die Seite geladen wird.

  3. Geben Sie den Wert Minimum Height in Pixel ein, wenn Sie die automatische Höhe für den Registerkartensatz überschreiben möchten.

  4. Um die Navigations-Registerkarten am oberen Rand des Registerkartensets zu positionieren, wählen Sie den Wert Tab Navigation Alignment (Left, Center oder Right).

    Rechtsbündige Navigationsregisterkarten {width="500" modal="regular"}

  5. Legen Sie die erweiterten Optionen für den Registerkartensatz fest:

    • Um die Positionierung des Registerkartensatzes innerhalb des übergeordneten Containers zu steuern, wählen Sie einen Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Option Beschreibung
      Default Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist.
      Left Richtet den Tab-Satz am linken Rand des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.
      Center Richtet die Registerkarte in der Mitte des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.
      Right Richtet den Tab-Satz am rechten Rand des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.

    • Legen Sie den Border -Stil fest, der auf alle vier Seiten des Registerkarten-Containers angewendet wird:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      Option Beschreibung
      Default Wendet den standardmäßigen Randstil an, der vom zugehörigen Stylesheet angegeben wird.
      None liefert keine sichtbare Anzeige der Containergrenzen.
      Dotted Der Container-Rahmen wird als gepunktete Linie angezeigt.
      Dashed Der Container-Rahmen wird als gestrichelte Linie angezeigt.
      Solid Der Container-Rahmen wird als durchgehende Linie angezeigt.
      Double Der Container-Rahmen wird als doppelte Linie angezeigt.
      Groove Der Container-Rahmen wird als Rillenlinie angezeigt.
      Ridge Der Container-Rahmen wird als gekürzte Linie angezeigt.
      Inset Der Container-Rahmen wird als Inset-Zeile angezeigt.
      Outset Der Container-Rahmen wird als Ausgangspunkt angezeigt.

    • Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Option Beschreibung
      Border Color Geben Sie die Farbe an, indem Sie ein Muster auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.
      Border Width Geben Sie die Anzahl Pixel für die Rahmenlinienbreite an.
      Border Radius Geben Sie die Anzahl der Pixel an, um die die Größe des Radius definiert wird, mit dem die einzelnen Ecken des Rands gerundet werden.

    • (Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Registerkarten-Container angewendet werden soll.

      Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

    • Geben Sie Werte in Pixel für den Wert Margins and Padding ein, um die äußeren Ränder und den inneren Abstand des Registerkarten-Containers zu bestimmen.

      Geben Sie die entsprechenden Werte in das Containerdiagramm der Registerkarten ein.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Container-Bereich Beschreibung
      Margins Die Menge an leerem Raum, die auf den äußeren Rand aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left
      Padding Die Menge an leerem Raum, die auf den inneren Rand aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left

  6. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d