Die 'Icon Box Pro' - Komponente zeigt benutzerdefinierten Inhalt mit Symbol innerhalb einer gestalteten Box an.

Grundlegende Einstellungen

Datum Veröffentlichen Einstellungen

Setzen Sie die Start- und Enddatum für die Veröffentlichung. Dies bewirkt, dass die ui/Theme-Builder-Komponente nur für den angegebenen Zeitraum veröffentlicht wird. Wenn Sie sowohl das Startdatum als auch das Enddatum verwenden, wird die ui/Theme-Builder-Komponente nur zwischen dem Anfangsdatum und dem Enddatum angezeigt.

Start Veröffentlichen

Wenn Sie nur das Startdatum für die Veröffentlichung und nicht das Enddatum festlegen, beginnt Joomla!, die ui/Theme-Builder-Komponente am angegebenen Anfangsdatum anzuzeigen, wird aber nie aufhören, die Komponente anzuzeigen.

Ende Veröffentlichen

Wenn Sie nur das Enddatum für die Veröffentlichung und nicht das Startdatum festlegen, zeigt Joomla! die ui/Theme-Builder-Komponente an, sobald Sie sie aktiviert haben, und hört auf, die Komponente anzuzeigen, sobald das Enddatum erreicht ist.

Bezeichnung

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

Position

Positionieren Sie die Komponente im normalen Inhaltsfluss, jedoch mit einem Versatz relativ zu sich selbst.

Links

Wenn position: relative; - setzt die left-Eigenschaft den linken Rand eines Elements auf eine Einheit nach links/rechts von seiner normalen Position.
Wenn position: absolute; - setzt die left-Eigenschaft den linken Rand eines Elements auf eine Einheit links vom linken Rand des nächsten positionierten Vorfahren. (z.B. 20% oder 50px ...)

Rechts

Wenn position: relative; - setzt die right-Eigenschaft den rechten Rand eines Elements auf eine Einheit nach links/rechts von seiner normalen Position.
Wenn position: absolute; - setzt die right-Eigenschaft den rechten Rand eines Elements auf eine Einheit rechts vom rechten Rand des nächsten positionierten Vorfahren. (z.B. -20% oder 50px ...)

Oben

Wenn position: relative; - bewirkt die top-Eigenschaft, dass der obere Rand des Elements über/seine normale Position verschoben wird.
Wenn position: absolute; - setzt die top-Eigenschaft den oberen Rand eines Elements auf eine Einheit über/unter dem oberen Rand des nächsten positionierten Vorfahren. (z.B. -20% oder 50px ...)

Unten

Wenn position: relative; - bewirkt die bottom-Eigenschaft, dass der untere Rand des Elements über/seine normale Position verschoben wird.
Wenn position: absolute; - setzt die bottom-Eigenschaft den unteren Rand eines Elements auf eine Einheit über/unter dem unteren Rand des nächsten positionierten Vorfahren. (z.B. 10% oder 50px ...)

z-index

Die z-index-Eigenschaft gibt die Stapelreihenfolge eines Elements an. Der z-index funktioniert nur bei positionierten Elementen (position: absolute, position: relative).

Anzeigen

Wählen Sie eine der folgenden Optionen, um das Element auf Bildschirmen größer als die angegebene Breite anzuzeigen.

Versteckt

Wählen Sie eine der folgenden Optionen, um das Element auf Bildschirmen größer als eine bestimmte Breite auszublenden.

Klasse

Definieren Sie einen oder mehrere Klassennamen für das Element. Trennen Sie mehrere Klassen mit 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 werden soll.

Titel HTML-Tag

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

Schriftgröße

Stellen Sie die Schriftgröße des Titels für diesen Selektor ein.

Schriftgewicht

Stellen Sie das Schriftgewicht des Titels für diesen Selektor ein.

Titel-Stil

Wählen Sie einen Titel-Stil-Modifikator.

Titel-Farbe

Wählen Sie eine Titel-Farbe.

Hintergrund-Einstellungen

Benutzerdefinierter Hintergrund

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)

Box-Hintergrund

Wählen Sie eine Standard-Hintergrundfarbe aus.

Stileinstellungen

Addon-Abstand

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

Layout wählen

Standard oder Klar. Das klare Layout hat mehr Optionen. Sie können Rand- und Schattenstile angeben.

Inhalt

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

Box-Größe

Wählen Sie eine Standard- oder kleine Boxgröße aus.

Ausrichtung

Wählen Sie eine Art der Textausrichtung für den Boxinhalt.

Box-Kopfzeile/Fußzeile verwenden?

Ja oder Nein.

Box-Icon

Wählen Sie ein Box-Icon aus der Font Awesome-Bibliothek.

Box-Icon-Größe

Wählen Sie die Größe des Icons aus.

Box-Bild

Lassen Sie die Icon-Einstellungen leer, um ein Bild anzuzeigen.

Button-Text

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

URL

Lassen Sie das Feld leer, um einen 'Menülink' auszuwählen.

Menülink auswählen.

Wählen Sie einen verfügbaren Link aus.

Button-Ziel

Wählen Sie aus, wie der Link geöffnet werden soll.

Button-Icon

Wählen Sie ein Button-Icon aus der Font Awesome-Bibliothek aus.

Button-Größe

Wählen Sie die Größe des Buttons aus.

Button-Typ

Setzen Sie den Button-Typ.

Animationseinstellungen

Scrollspy-Animation

Die Scrollspy-Komponente überwacht das Scrollen auf der Seite und löst Ereignisse basierend auf der Scrollposition aus. Wenn Sie zum Beispiel eine Seite nach unten scrollen und ein Element zum ersten Mal im sichtbaren Bereich erscheint, können Sie eine sanfte Animation auslösen, um das Element einzublenden.

Responsive

Fügen Sie eine Zahl in Pixeln hinzu, z.B. 640, oder einen Breakpoint, z.B. @s, @m, @l oder @xl. Der Parallaxeneffekt wird für die angegebene Viewport-Breite und größer angezeigt.

Viewport-Position

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

Box-Parallax-Animation verwenden?

Ja oder Nein. (Mehr erfahren)

Hintergrundbild-Parallax?

Ja oder Nein.