Layout - Registerkarten
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.
{width="500" modal="regular"}
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
{width="500" modal="regular"}
Registerkarten-Container-Toolbox
{width="500" modal="regular"}
Hinzufügen einer einzelnen Registerkarte
-
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.
{width="600" modal="regular"}
-
Klicken Sie auf die Beschriftung Tab 1 , um die einzelne Registerkarten-Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).
-
Geben Sie den Tab Name ein, den Sie als Beschriftung verwenden möchten.
{width="600" modal="regular"}
-
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. -
Wählen Sie die Einstellung "Vertical Alignment", um alle Inhaltscontainer auszurichten, die der Registerkarte hinzugefügt werden (oben, zentriert oder unten).
-
Legen Sie bei Bedarf die anderen Optionen mithilfe der folgenden Abschnitte als Anleitung fest:
-
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.
-
Bewegen Sie den Mauszeiger über den Registerkarten-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Hinzufügen ( {width="20"} ).
-
Klicken Sie auf die Bezeichnung Tab 2 , um den Cursor anzuzeigen, und geben Sie einen eigenen Titel für die Registerkarte ein.
-
Klicken Sie erneut auf die zweite Registerkarte auf der Bühne und wählen Sie das Symbol Duplizieren ( {width="20"} ).
-
Klicken Sie auf die Bezeichnung YourName Copy , um den Cursor anzuzeigen und geben Sie einen eigenen Titel für die dritte Registerkarte ein.
{width="600" modal="regular"}
Verschieben einer Registerkarte innerhalb des Sets
-
Klicken Sie auf die Registerkarte, die Sie verschieben möchten.
-
Wählen Sie das Symbol Verschieben ( {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.
-
Klicken Sie auf die Registerkarte, auf der Sie den Inhalt hinzufügen möchten.
-
Erweitern Sie im Bedienfeld Page Builder den Eintrag Elements und ziehen Sie einen Platzhalter für Text auf die Registerkarte.
-
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 .
{width="500" modal="regular"}
-
Klicken Sie in der oberen rechten Ecke auf Save.
Einzelne Registerkarteneinstellungen ändern
-
Bewegen Sie den Mauszeiger über eine einzelne Registerkarte, um die Toolbox anzuzeigen und das Symbol Einstellungen ( {width="20"} ) auszuwählen.
-
Ä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.
-
-
Ändern Sie die anderen Einstellungen nach Bedarf mithilfe der folgenden Abschnitte für Details.
-
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.
{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.
{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.
{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. {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:{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.
{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
-
Bewegen Sie den Mauszeiger über den oberen Rand des Registerkartenset-Containers, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).
-
Ä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.
-
Geben Sie den Wert Minimum Height in Pixel ein, wenn Sie die automatische Höhe für den Registerkartensatz überschreiben möchten.
-
Um die Navigations-Registerkarten am oberen Rand des Registerkartensets zu positionieren, wählen Sie den Wert Tab Navigation Alignment (
Left
,Center
oderRight
).{width="500" modal="regular"}
-
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
-
-
Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.