Erstellen Sie eine Preistabelle mit vertikalem Layout in verschiedenen Stilen.

Grundeinstellungen

Veröffentlichungseinstellungen

Legen Sie die Start- und Endveröffentlichungsdaten fest. Dies führt dazu, dass die ui/Theme-Builder - Komponente nur für den angegebenen Zeitraum veröffentlicht wird. Wenn Sie sowohl den Start- als auch den Endveröffentlichungstermin festlegen, wird die ui/Theme-Builder - Komponente nur zwischen dem Anfangs- und dem Enddatum angezeigt.

Startveröffentlichung

Wenn Sie nur die Startveröffentlichung und nicht die Endveröffentlichung festlegen, beginnt Joomla! mit der Anzeige der ui/Theme-Builder - Komponente am angegebenen Anfangsveröffentlichungsdatum, hört aber nie auf, die Komponente anzuzeigen.

Endveröffentlichung

Wenn Sie nur die Endveröffentlichung und nicht die Startveröffentlichung festlegen, zeigt Joomla! die ui/Theme-Builder-Komponente an, sobald Sie sie aktiviert haben, und stellt die Anzeige der Komponente ein, sobald das Enddatum erreicht ist.

Label

Definieren Sie einen Namen, um dieses Element im Theme-Builder leicht zu identifizieren.

Position

Positionieren Sie die Komponente im normalen Inhaltsfluss, jedoch mit einem relativen Versatz.

Links

Wenn position: relative; – legt die left-Eigenschaft den linken Rand eines Elements relativ zu seiner normalen Position nach links/rechts fest.
Wenn position: absolute; – legt die left-Eigenschaft den linken Rand eines Elements relativ zum linken Rand seines nächsten positionierten Vorfahren fest. (z.B. 20% oder 50px ...)

Rechts

Wenn position: relative; – legt die right-Eigenschaft den rechten Rand eines Elements relativ zu seiner normalen Position nach links/rechts fest.
Wenn position: absolute; – legt die right-Eigenschaft den rechten Rand eines Elements relativ zum rechten Rand seines nächsten positionierten Vorfahren fest. (z.B. -20% oder 50px ...)

Oben

Wenn position: relative; – die top-Eigenschaft bewegt den oberen Rand des Elements über/unter seine normale Position.
Wenn position: absolute; – legt die top-Eigenschaft den oberen Rand eines Elements relativ zum oberen Rand seines nächsten positionierten Vorfahren fest. (z.B. -20% oder 50px ...)

Unten

Wenn position: relative; – die bottom-Eigenschaft bewegt den unteren Rand des Elements über/unter seine normale Position.
Wenn position: absolute; – legt die bottom-Eigenschaft den unteren Rand eines Elements relativ zum unteren Rand seines nächsten positionierten Vorfahren fest. (z.B. 10% oder 50px ...)

z-index

Die z-index-Eigenschaft legt die Stapelreihenfolge eines Elements fest. Z-index funktioniert nur bei positionierten Elementen (position: absolute, position: relative).

Anzeigen

Wählen Sie eine der folgenden Optionen, um das Element für Bildschirme größer als die angegebene Breite anzuzeigen.

Versteckt

Wählen Sie eine der folgenden Optionen, um das Element für Bildschirme größer als eine angegebene Breite auszublenden.

Klasse

Definieren Sie einen oder mehrere Klassennamen für das Element. Trennen Sie mehrere Klassen durch Leerzeichen.

ID

ID-Selektor für das Element.

Titeleinstellungen

Titel anzeigen

Wenn auf "Ja" gesetzt, wird diese Option den Komponententitel im Frontend aktivieren.

Titel

Geben Sie den Text ein, der als Komponententitel verwendet wird.

Titel-HTML-Tag

Wählen Sie ein HTML-Tag für den Titel.

Schriftgröße

Legen Sie die Schriftgröße des Titels für diesen Selektor fest.

Schriftstärke

Legen Sie das Schriftstärke des Titels für diesen Selektor fest.

Titelstil

Wählen Sie einen Titelstil-Modifikator.

Titelfarbe

Wählen Sie eine Titelfarbe.

Hintergrundeinstellungen

Benutzerdefiniertes Hintergrundbild

Wenn auf "Ja" gesetzt, können Sie verschiedene Hintergrundoptionen festlegen (Hintergrundbilder, verschiedene Mischmodi, benutzerdefinierte Farbe).
Wenn auf "SVG" gesetzt, können Sie eigene SVG-Hintergründe verwenden. (Mehr erfahren)

Modul-Hintergrund

Wählen Sie eine Standard-Hintergrundfarbe.

Inverser Stil

Wählen Sie die "light"-Klasse, um die Sichtbarkeit von Objekten auf dunklen Hintergründen im hellen Stil zu verbessern. Bei Verwendung eines dunklen Stils fügen Sie den Elementen auf einem hellen Hintergrund die "dark"-Klasse hinzu.
Die Optionen "Primary" und "Secondary" (Hintergrundeinstellungen) erweitern automatisch den inversen Stil der Invers-Komponente. Wenn Sie dieses Verhalten verhindern möchten, z.B. weil Sie Karten in diesen Abschnitten verwenden, fügen Sie diese "Farbe beibehalten"-Option hinzu.

Stileinstellungen

Addon-Abstand

Wählen Sie einen Abstand für die Komponente.

Addon-Schatten

Wählen Sie einen Schattenstil.

Inhalt

Geben Sie den Text ein, der als Komponenteninhalt verwendet wird. (HTML ist erlaubt)

Ausrichtung

Wählen Sie eine Ausrichtung für den Inhalt.

Inhaltsabstand

Wählen Sie einen Abstand für den Inhalt.

Tabellenstil

Wählen Sie einen Tabellenmodifikator, um die Tabelle zu gestalten.

Tabellengröße

Wählen Sie eine Größe für eine Tabelle, um sie kleiner oder größer zu machen.

Tabellenhover?

Ja oder Nein.

Ausrichtung

Wählen Sie eine Ausrichtung für den Button.

Button-Text

Geben Sie den Text ein, der als Button-Text verwendet wird.

URL

Leer lassen, um einen 'Menü-Link' auszuwählen.

Menü-Link auswählen

Wählen Sie einen verfügbaren Link.

Button-Ziel

Wählen Sie, wie der Link geöffnet wird.

Button-Symbol

Wählen Sie ein Font Awesome-Symbol für den Button.

Button-Größe

Wählen Sie die Button-Größe.

Button-Typ

Legen Sie den Button-Typ fest.

Vollständige Breite?

Ja oder Nein.

Animationseinstellungen

Scrollspy-Animation

Die Scrollspy-Komponente hört auf das Scrollen der Seite und löst Ereignisse basierend auf der Scrollposition aus. Wenn Sie beispielsweise eine Seite nach unten scrollen und ein Element zum ersten Mal im Ansichtsbereich erscheint, können Sie eine sanfte Animation auslösen, um das Element einblenden zu lassen.

Responsive

Fügen Sie eine Zahl in Pixel ein, z.B. 640, oder einen Breakpoint, z.B. @s, @m, @l oder @xl. Der Parallax-Effekt wird für die angegebene Ansichtsbreite und größer angezeigt.

Ansichtsposition

Mit der Viewport-Option können Sie die Animationsdauer anpassen. Der Wert definiert, wie weit das Ziel-Element im Ansichtsbereich gescrollt wird, bis die Animation abgeschlossen ist. Bei dem Wert 1 dauert die Animation so lange, wie das Element im Ansichtsbereich ist (Standardverhalten). Wenn Sie es auf 0,5 setzen, animiert es die Eigenschaft, bis die Scrollposition die Mitte des Ziel-Elements erreicht.

Box-Parallax-Animation verwenden?

Ja oder Nein. (Mehr erfahren)

Hintergrundbild-Parallax?

Ja oder Nein.

Elementeinstellungen

Listenelemente

Fügen Sie Tabellen-Elemente hinzu oder entfernen Sie sie. Legen Sie Text und Symbole fest.