Dynamisches Layout in Visual Designer

Last Updated November 17, 2024

Download as PDF

Kurzübersicht

Dynamisches Layout kann zum Entwerfen von ShoutOuts im Visual Designer verwendet werden. Es bietet die Canvas-Anpassungsfähigkeit des Flex-Layouts, was Benutzern mehr Freiheit und Flexibilität einräumt.

Dieser Artikel befasst sich mit den wichtigsten Funktionen und Möglichkeiten des Layouts.

Die wichtigsten Vorteile des dynamischen Layouts

• ShoutOuts passen sich automatisch an die Größe und Ausrichtung des Bildschirms an, auf dem sie angezeigt werden.
• Reduziert die Erstellungszeit – es gibt einsatzbereite Inhaltsanordnungen im Canvas
• Möglichkeit zur Erstellung dynamischer Layouts, die einfach zu lesen und zu navigieren sind, unabhängig vom verwendeten Gerät
• Verbessert das Benutzererlebnis durch einfachere Nutzung von Popups auf allen Geräten
• Verbessert die Gesamtleistung der Website, da Popups schneller geladen werden und weniger Ressourcen verbrauchen
• Sie können ein einziges Design erstellen, das einfach angepasst werden kann, um verschiedene Sprachen zu unterstützen
• Wenn die Größe des übersetzten Textes die Originalsprache überschreitet, passt sich die Sprechblase entsprechend an

Wichtige Funktionen des dynamischen Layouts

Der dynamische Layout-Canvas besteht aus den folgenden Ebenen:

• Canvas: Körper des ShoutOut, der anzeigt, wie die Anzeige für einen Benutzer auf dem Bildschirm aussieht
  • Frames und Widgets können zum Canvas hinzugefügt werden
• Frame: Bestimmter Bereich auf dem Canvas, der verschoben und gestaltet werden kann
  • Widgets können innerhalb des Rahmens hinzugefügt werden
• Widget: Element im Rahmen
  • Arten von Widgets: Text, Bild, Button, Linie, Webansicht

Allgemeine

Farbspezifikation

Jede Ebene des Designs wird bei Auswahl mit einer bestimmten Farbe hervorgehoben:

• Canvas: Grün
• Frame: Rosa
• Widget: Blau

Styling

• Für Canvas und Frames können auf der Registerkarte „Styling“ eine Hintergrundfarbe, ein Eckenradius und eine Randbreite festgelegt werden.

Breadcrumbs

• Breadcrumbs sind in der Property Bag und auf dem Canvas erhältlich.
• Wenn Sie beispielsweise ein Widget auswählen, sehen Sie den Rahmen, zu dem es gehört
• Breadcrumbs können angeklickt und zur Navigation verwendet werden

Canvas

Styling

• Der Eckenradius, die Breite des Rahmens, die Füllfarbe und die Farbe des Rahmens können auf der Registerkarte „Styling“
  
  geändert werden.
• Es gibt jetzt die Möglichkeit, der Leinwand des Shoutout Schatten hinzuzufügen. Der Benutzer kann zwischen vordefinierten Optionen für Keine, Soft, Regula, und Retro Shadow auswählen.
• Ecken können einzeln gesteuert werden und unterschiedlich sein
  

Layout

Sizing

• Die Breite des ShoutOut kann durch Dehnen direkt am Canvas oder durch Anwendung der Maße in der Property Bag geändert werden.
• Die Höhe wird automatisch an die Menge des Inhalts angepasst.
• Nur die Breite des Canvas kann von einem Benutzer angepasst werden.

Innere Dimensionen

• Der Abstand zwischen den Seiten des Canvas und den Rahmen kann in der Property Bag eingestellt werden – die Angabe wird auf dem Canvas angezeigt.
• Standardmäßig ist für alle Seiten der gleiche Abstand eingestellt.
• Um einer der Seiten einen anderen Wert zuzuweisen, klicken Sie auf das Randsymbol.

Schließen der Schaltfläche

• Wenn Sie den Toggle Show Close Button deaktivieren, wird der Close Button im Canvas ausgeblendet.
  • Damit er wieder angezeigt wird, bewegen Sie den Mauszeiger über den Close Button, klicken Sie darauf und aktivieren Sie dann den Toggle Show Close Button.
• Der Close Button kann auf der Registerkarte „Styling“ angepasst werden – die Größe des Symbols, die Farbe, der Radius und die Füllung des Buttons sowie die Breite und Farbe des Rahmens können geändert werden.
• Die Größe des Buttons kann am Canvas geändert werden.
• Die Position kann auf der Registerkarte Layout geändert werden (rechts oben/links oben)

Position

• Die Position des Canvas auf dem Bildschirm kann nur über die Property Bag geändert werden.
• Wählen Sie eine der Standardoptionen aus oder aktivieren Sie den Toggle Custom position und geben Sie die bevorzugten Einstellungen für spezifischere Änderungen ein.

Rahmen

Styling

• Eckenradius, Rahmenbreite, Füllfarbe und Rahmenfarbe können über die Registerkarte Styling geändert werden

Layout

Größe ändern

• Die Größe des Rahmens kann horizontal im Verhältnis zu einem anderen Rahmen geändert werden. Ziehen Sie dazu den Rahmen, dessen Größe Sie ändern möchten.
• Sie können die Größe von Rahmen nur von der Seite aus ändern, die mit einem anderen Rahmen geteilt wird.
• Die Größe des Rahmens basiert auf dem Prozentsatz der Canvas-Größe. Die Rahmenbreite wird in Prozent angezeigt.
• Der Rahmen darf nicht kleiner sein als der Inhalt im Rahmen.

Vertikale Ausrichtung

• Auf der Rahmenebene können die Elemente horizontal oder vertikal ausgerichtet werden.
• Diese Option ist verfügbar, wenn sich das Element innerhalb eines Rahmens befindet, der an einen anderen Rahmen mit mehr Inhalt angrenzt.

Widget-Abstand

• Passen Sie den standardmäßigen vertikalen Abstand zwischen den Widgets im Rahmen an.
• Es ist auch möglich, unterschiedliche Abstände für ein bestimmtes Widget auf einer Widgetebene festzulegen.

Hinzufügen von Rahmen

• Sie können Rahmen hinzufügen, indem Sie vorhandene Rahmen duplizieren oder auf das Pluszeichen klicken, das im hervorgehobenen Bereich erscheint, wenn Sie den Mauszeiger über den äußeren Bereich der Leinwand bewegen.
• Es können bis zu vier Rahmen in einer Reihe hinzugefügt werden.
• Es gibt keine Begrenzung für die Anzahl der vertikalen Rahmen.
• Wenn neue Rahmen erstellt (oder gelöscht) werden, wird die Canvas-Größe durch die Anzahl der Rahmen geteilt, sodass alle Rahmen gleich groß sind.
• Die Mindestgröße eines Rahmens beträgt 10 % des Canvas.

Bewegliche Rahmen

• Rahmen können durch Ziehen und Ablegen verschoben werden – horizontal oder vertikal.

Innere Dimensionen

• Der Abstand zwischen den Seiten des Rahmens und den Widgets kann in der Property Bag eingestellt werden.
• Wählen Sie den Rahmen aus und legen Sie den Standardabstand für alle Seiten fest, oder klicken Sie auf das Rahmensymbol – und steuern Sie jede Seite einzeln.
• Wenn Sie ein Bild haben, das die gleiche Größe wie sein Rahmen hat, und Sie den Rahmen auswählen müssen, verwenden Sie die Breadcrumbs, um zwischen dem Widget und dem Rahmen zu wechseln.

Widget

Styling

Der Stil des Widgets kann über die Property Bag geändert werden:

• Bild: Laden Sie es hoch und wählen Sie Eckradius, Randbreite und Randfarbe aus
  • Wählen Sie eine Aktion aus, die ausgeführt wird, wenn ein Benutzer auf das Bild klickt – z. B. wird er zu einer externen URL oder E-Mail-Adresse weitergeleitet
    Anmerkung

    Die URL muss http:// oder https:// enthalten.

  • Wenn eine Aktion ausgewählt wird, ändert sich der Symbolindikator von neutral zu grün

• Text: Wählen Sie die Schriftart, Schriftgröße und -farbe sowie die Ausrichtung des Textes
• Linie: Ändern Sie den Eckenradius, die Rahmenbreite, die Linienfarbe und die Rahmenfarbe
• Webview: Fügen Sie die URL ein und sehen Sie die Vorschau an
• Button: Wählen Sie die Aktion, die der Button ausführen soll
  • Wenn die Aktion ausgewählt ist, ändert sich der rote Symbolindikator in grün
  • Mehrzeiliger Text in einem Button wird unterstützt – drücken Sie Enter, um eine neue Zeile zu erstellen.

• Der Farbwähler hat jetzt ein Pipettiertool, um die bereits im Design vorhandene Farbe zu erfassen

Hinzufügen eines Widgets

• Um ein Widget hinzuzufügen, klicken Sie auf das Plus in der Property Bag und ziehen Sie das ausgewählte Widget auf das Canvas.
• Sie sehen einen blauen Hinweis darauf, wo das Widget hinzugefügt wird.
• Innerhalb eines Rahmens können vier Widgets in einer Reihe hinzugefügt werden.

Layout

Größe eines Widgets ändern

• Um die Größe eines Widgets zu ändern, wählen Sie es aus und ziehen Sie die Griffleiste.

• Die Schaltflächengröße kann sowohl über den äußeren (Abstand zu den anderen Widgets) als auch den inneren (Abstand vom Text der Schaltfläche zu ihren Rändern) Abstand gesteuert werden

Ein Widget strecken

• Ein Widget kann durch Klicken auf das Strecksymbol gestreckt werden.
• Wenn das Seitenverhältnis gesperrt ist, wird das Widget bis zu den eingefügten Zahlen gestreckt.
• Wenn das Seitenverhältnis entsperrt ist, nimmt das Widget den gesamten horizontalen Platz innerhalb des Rahmens ein.
• Wenn sich mehrere Widgets in einer Reihe befinden, passt sich jedes der Widgets dynamisch an, um den Platz innerhalb des Rahmens zu füllen.
  • Bei zwei Widgets beispielsweise nimmt jedes 50 % des Platzes ein, bei vier Widgets jeweils 25 %.
• Höhe, wenn das Widget manuell gesteuert werden kann.

Äußere Abstände

• Um Platz zwischen mehreren Widgets zu schaffen, wählen Sie das Widget aus und passen Sie den äußeren Abstand in der Property Bag an.
• Standardmäßig ist für alle Seiten der gleiche Abstand eingestellt.
• Um einer der Seiten einen anderen Wert zuzuweisen, klicken Sie auf das Randsymbol.

Tipp – Dienstag-Videos

Updates des Visual Designers

Einführung in den Visual Designer - Dynamisches Layout

Erstellen mit dem Visual Designer

Technische Hinweise

Einschränkungen

• Visual Designer kann nicht mit globaler oder kundenspezifischer CSS angepasst werden.
  • Wir sind bestrebt, die Verwendung von globaler/kundenspezifischer CSS durch „im Editor“-Funktionalität zu ersetzen.
• Frameset-Sites werden nicht unterstützt – der Inhalt kann nicht auf sie gezogen werden.

Support

• Web-Player: Unterstützt ShoutOuts
• Mobil-Player: Unterstützt ShoutOuts, Smart Walk-Thrus (begrenzt), Surveys und Launchers
• Desktop-Player: Unterstützt ShoutOuts und Smart Walk-Thrus (begrenzt)