Dynamisches Layout in Visual Designer

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.

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.
• Wenn eine der Seiten einen anderen Wert hat als die anderen, wird die Angabe „Mixed“ angezeigt.

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

• Der Eckenradius, die Breite des Rahmens, die Füllfarbe und die Farbe des Rahmens können auf der Registerkarte „Styling“ geändert werden.

Layout

Größe ändern

• Der Rahmen kann im Verhältnis zu einem anderen Rahmen horizontal ausgerichtet 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.
• 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

Stil

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
• 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
  • Mehrzeiliger Text in einem Button wird unterstützt – drücken Sie Enter, um eine neue Zeile zu erstellen.

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.

Größe eines Widgets ändern

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

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.
• Die Angabe „Mixed“ wird angezeigt.