Machen Sie Ihre Website mithilfe kreativer Grafiken mit der Bildkomponente attraktiver und informativer.

Grundeinstellungen

Datum Veröffentlichungseinstellungen

Legen Sie die Start- und Enddaten für die Veröffentlichung fest. 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 festlegen, wird die ui/Theme-Builder - Komponente nur zwischen dem Start- und Enddatum angezeigt.

Start der Veröffentlichung

Wenn Sie nur das Startdatum und nicht das Enddatum festlegen, zeigt Joomla! die ui/Theme-Builder-Komponente ab dem angegebenen Veröffentlichungsstartdatum an, hört jedoch nie auf, die Komponente anzuzeigen.

Ende der Veröffentlichung

Wenn Sie nur das Enddatum und nicht das Startdatum festlegen, zeigt Joomla! die ui/Theme-Builder-Komponente sofort 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 ui/Theme-Builder leicht zu identifizieren.

Position

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

Links

Wenn position: relative; - Die Eigenschaft "links" legt den linken Rand eines Elements auf eine Einheit links/rechts von seiner normalen Position fest.
Wenn position: absolute; - Die Eigenschaft "links" legt den linken Rand eines Elements auf eine Einheit links vom linken Rand seines nächsten positionierten Vorfahren fest. (z. B. 20% oder 50px ...)

Rechts

Wenn position: relative; - Die Eigenschaft "rechts" legt den rechten Rand eines Elements auf eine Einheit links/rechts von seiner normalen Position fest.
Wenn position: absolute; - Die Eigenschaft "rechts" legt den rechten Rand eines Elements auf eine Einheit rechts vom rechten Rand seines nächsten positionierten Vorfahren fest. (z. B. -20% oder 50px ...)

Oben

Wenn position: relative; - Die Eigenschaft "oben" bewegt den oberen Rand des Elements über/unter seine normale Position.
Wenn position: absolute; - Die Eigenschaft "oben" legt den oberen Rand eines Elements auf eine Einheit über/unter dem oberen Rand seines nächsten positionierten Vorfahren fest. (z. B. -20% oder 50px ...)

Unten

Wenn position: relative; - Die Eigenschaft "unten" bewegt den unteren Rand des Elements über/unter seine normale Position.
Wenn position: absolute; - Die Eigenschaft "unten" legt den unteren Rand eines Elements auf eine Einheit über/unter dem unteren Rand seines nächsten positionierten Vorfahren fest. (z. B. 10% oder 50px ...)

z-index

Die Eigenschaft "z-index" gibt die Stapelreihenfolge eines Elements an. 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.

Stileinstellungen

Addon-Abstand

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

Bilder-Schatten

Wählen Sie einen Bildschatten.

Bildschatten unten?

Ja oder Nein.

Benutzerdefinierte Bild-URL

In dieser Option wird die vollständige URL des Bildes im src-Attribut des HTML-img-Tags angegeben.

Bildtyp

Wählen Sie einen Bildanzeigetyp.
Hinweis: Hintergrundbilder haben andere Einstellungsoptionen wie Standardbilder, SVG-Dateien oder SVG-Bildlinks. (Bildhöhe, Bildrahmen usw.)

Elementbild

Wählen Sie ein Bild.

Bildunterschrift?

Ja oder Nein.

Bildlink?

Ja oder Nein.

Wählen Sie eine SVG-Datei

CSS-Maskierung bietet die Möglichkeit, ein Bild als Maskenschicht zu verwenden. Standardpfad: JOOMLA_ROOT/media/com_uithemebuilder/images/svg-masks

Maskenwiederholung?

Diese Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.

Benutzerdefinierte Maskengröße verwenden?

Wenn Sie Ja wählen, können Sie Ihre eigenen Einstellungen für die Maskengröße festlegen.

Maskengröße wählen

Diese Eigenschaft legt die Größe der Maskenbilder fest.

Benutzerdefinierte Maskengröße

Die Größe des Bildes kann vollständig oder teilweise eingeschränkt werden, um das intrinsische Verhältnis beizubehalten. Zum Beispiel: Ein-Wert-Syntax, 50% oder 3em... Zwei-Wert-Syntax, 50% auto oder 3em 25% usw.

Maskenposition

Diese Eigenschaft legt die Anfangsposition relativ zur Maskenpositionsebene fest.

Maskenmodus

Diese Eigenschaft legt fest, ob die durch mask-image definierte Maskenreferenz als Leuchtkraft- oder Alphamaske behandelt wird.

SVG-Bildlink-Stil

SVG-Containerhöhe

Legen Sie die Höhe des SVG-Containers fest.

SVG-Bildhöhe

Legen Sie die Höhe des SVG-Bildes in % fest.

SVG-Bildbreite

Legen Sie die Breite des SVG-Bildes in % fest.

SVG-Bild-X-Polsterung

Legen Sie die horizontale Abstand des SVG-Bildes in % fest. Nützlich für SVG-Schatten.

SVG-Bild-Y-Polsterung

Legen Sie die vertikale Abstand des SVG-Bildes in % fest. Nützlich für SVG-Schatten.

Schatten verwenden?

Ja oder Nein.

Schattenfarbe

Legen Sie die Schattenfarbe fest.

X-Versatz des Schattens

Legen Sie den horizontalen Versatz des Schattens fest.

Y-Versatz des Schattens

Legen Sie den vertikalen Versatz des Schattens fest.

X-Versatz der Unschärfe

Legen Sie den horizontalen Unschärfeversatz des Schattens fest.

Y-Versatz der Unschärfe

Legen Sie den vertikalen Unschärfeversatz des Schattens fest.

Innenschatten verwenden?

Ja oder Nein.

Farbe des Innenschattens

Legen Sie die Farbe des Innenschattens fest.

X-Versatz des Innenschattens

Legen Sie den horizontalen Versatz des Innenschattens fest.

Y-Versatz des Innenschattens

Legen Sie den vertikalen Versatz des Innenschattens fest.

X-Versatz der Unschärfe

Legen Sie den horizontalen Unschärfeversatz des Innenschattens fest.

Y-Versatz der Unschärfe

Legen Sie den vertikalen Unschärfeversatz des Innenschattens fest.

SVG-Verlaufsüberlagerung verwenden?

Ja oder Nein.

Übergangseinstellungen

Bilderübergang verwenden?

Ja oder Nein.

Overlay-Übergang verwenden?

Ja oder Nein. Es ist erforderlich, dass Ihr Bild eine Bildunterschrift in den Stileinstellungen hat.

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 Ansichtsfenster erscheint, können Sie eine sanfte Animation auslösen, um das Element einzublenden.

Box-Parallax-Animation verwenden?

Ja oder Nein. (Mehr erfahren)