Kurzübersicht

Widgets sind die Bausteine, die in Dynamic Layout ShoutOuts verwendet werden, um strukturierte, flexible Inhalte innerhalb eines Rahmens zu erstellen. Durch die Kombination verschiedener Widget-Typen – wie Text, Bilder, Schaltflächen und Karusselle – können Sie reaktionsschnelle Layouts entwerfen, die sich an Inhalte und Bildschirmgröße anpassen.

Dieser Artikel erklärt, wie Sie Widgets im Dynamischen Layout hinzufügen, gestalten und verwalten, einschließlich des Layoutverhaltens, des Abstands und der widgetspezifischen Einschränkungen.

Widget hinzufügen

So fügen Sie ein Widget zu einem Rahmen hinzu:

1. Wählen Sie das Plus-Symbol im Eigenschaftenbereich aus
2. Ziehen Sie das Widget auf die Arbeitsfläche
3. Verwenden Sie den blauen Indikator, um auszuwählen, wo das Widget platziert werden soll

Stil-Widgets

Sie können das Aussehen und das Verhalten des Widgets über den Eigenschaftenbereich anpassen.

Bild

• Ein Bild hochladen
• Passen Sie den Eckenradius, die Randbreite und die Randfarbe an.
• Weisen Sie eine Aktion für die Benutzerinteraktion mit dem Bild zu, wie z. B.:
  • Weiterleitung zu einer externen URL
  • Öffnen eines E-Mail-Clients

Wenn eine Aktion ausgewählt ist, ändert sich die Aktionsanzeige von neutral zu grün.

Text

• Wählen Sie die Schriftart, Schriftgröße und Textfarbe aus
• Textausrichtung festlegen

Linie

• Eckenradius anpassen
• Ändern Sie die Rahmenbreite, Rahmenfarbe und Linienfarbe.

Video

• Fügen Sie ein Video von hinzu
  • YouTube
  • Vimeo
  • Assets-Bibliothek
• Passen Sie das Video mit den erweiterten Wiedergabesteuerungen an, einschließlich:
  • Video zuschneiden: Benutzerdefinierte Start- und Endzeiten
  • In Schleife abspielen: Das Video wird automatisch neu gestartet, wenn es endet
  • Autoplay: Das Video wird automatisch abgespielt, sobald der ShoutOut angezeigt wird
  • Thumbnail: Wählen Sie ein beliebiges Bild als Cover aus
  • Wiedergabesteuerung: Pausieren, vorwärts/zurückgehen, YouTube öffnen

Webansicht

• Fügen Sie eine URL ein, um externe Inhalte anzuzeigen
• Vorschau des Inhalts direkt im Visual Designer

Schaltfläche

• Weisen Sie der Schaltfläche eine Aktion zu, die sie ausführen soll.
• Erstellen Sie mehrzeiligen Schaltflächentext, indem Sie die Eingabetaste drücken

Wenn eine Aktion ausgewählt ist, ändert sich die Aktionsanzeige von rot zu grün.

Widgets verwalten

Größe ändern

Um die Größe eines Widgets zu ändern, führen Sie einen der folgenden Schritte aus:

• Wählen Sie das Widget aus und ziehen Sie die Griffleiste
• Verwenden Sie die Steuerelemente für Größe und Abstand in der Seitenleiste.

Die Schaltflächengröße wird gesteuert durch:

• Äußere Abstände, die den Abstand zu anderen Widgets definieren
• Innere Abstände, die den Abstand zwischen dem Schaltflächentext und seinen Rändern definieren

Stretch

Sie können Widgets horizontal dehnen, indem Sie das Dehnungssymbol auswählen.

• Wenn das Seitenverhältnis gesperrt ist, dehnt sich das Widget proportional basierend auf seinen ursprünglichen Abmessungen
• Wenn das Seitenverhältnis entsperrt ist, füllt das Widget den gesamten horizontalen Raum innerhalb des Rahmens

Wenn mehrere Widgets in einer Reihe angezeigt werden, passt jedes Widget automatisch seine Breite an, um den verfügbaren Platz gleichmäßig auszufüllen. Beispiel:

• Zwei Widgets nehmen jeweils 50 % der Zeile ein
• Vier Widgets nehmen jeweils 25 % der Zeile ein

Die Widget-Höhe kann manuell gesteuert werden.

Äußerer Abstand

Der äußere Abstand steuert den Abstand zwischen Widgets.

So passen Sie den äußeren Abstand an:

• Wählen Sie das Widget aus
• Aktualisieren Sie die äußeren Abstandswerte im Eigenschaftencontainer.

Standardmäßig wird derselbe Wert auf alle Seiten angewendet. So legen Sie verschiedene Werte pro Seite fest:

• Wählen Sie das Symbol für den Rahmen aus
• Individuelle Seitenwerte anpassen

Wenn die Abstandswerte sich unterscheiden, zeigt die Anzeige Gemischt an.

Karussell-Widget

Standardmäßig werden durch das Hinzufügen eines Karussell-Widgets drei Folien erstellt, die jeweils ein Bild und Text enthalten.

Mit einem Karussell-Widget können Sie:

• Fügen Sie andere Widgets innerhalb jeder Folie hinzu, einschließlich Text, Bild, Schaltfläche, Webansicht und Linien-Widgets
• Aktivieren Sie die automatische Wiedergabe, um automatisch zwischen Folien zu wechseln
• Navigieren Sie durch die Folien mit den Punkten am unteren Rand des ShoutOut.
• Ordnen Sie die Folien neu an, indem Sie sie ziehen.

Zusätzliches Verhalten und Einschränkungen:

• Die Höhe des ShoutOut basiert auf der höchsten Folie
• Layout-Einstellungen wie Rahmen, Ecken und Struktur gelten für alle Folien
• Hintergrundfarbe, Hintergrundbild und Inhalt können sich pro Folie unterscheiden
• Es werden maximal fünf Folien unterstützt.
• Nur ein Karussell-Widget kann pro ShoutOut hinzugefügt werden
• Das Duplizieren einer Folie fügt eine weitere Folie zum Karussell hinzu.

Sie können auch eine benutzerdefinierte Navigation erstellen, indem Sie Schaltflächen, Text oder Bildern die Aktionen „Nächste Folie“ und „Vorherige Folie“ zuweisen.

Video-Widget

Mit dem Video-Widget können Sie Videos von YouTube oder Vimeo direkt in den Visual Designer einbetten.

Die Wiedergabeoptionen umfassen:

• Beschneiden der Videostart- und Endzeit
• Schleifenwiedergabe
• Autoplay, wenn der ShoutOut angezeigt wird

Zusätzliche Steuerelemente:

• Wählen Sie ein benutzerdefiniertes Miniaturbild aus
• Pause oder Vor- und Rückwärts springen
• Öffnen Sie das Video in YouTube

Tipp – Dienstag-Videos

ShoutOut-Hintergrundbilder, Karusselle und Verzögerungen

Technische Hinweise

• Bis zu vier Widgets können in einer einzigen Zeile innerhalb eines Rahmens hinzugefügt werden