Wenn du Elemente nebeneinander anzeigen lassen möchtest, kannst du den Container-Block nutzen. Dieser Block wird gerne für den Bau von Landing Pages genutzt oder auch bei Eingabeblöcken.
Einstellungen anpassen
Nach dem Klick auf einen Block findest du rechts den Bereich Einstellungen. Hier passt du Optionen, Darstellung und Verhalten des Blocks so an, wie es zu deinem Flow passt.
Allgemein
Wähle die äußere Breite des Containers und die Breite des inneren Elements aus. Beachte, dass die Vorschau möglicherweise kleiner angezeigt wird als hier ausgewählt. Lege außerdem fest, ob der Inhalt des Containers links, rechts oder mittig angezeigt wird.
Außen- und Innenabstand
Lege den Abstand zum oberen, rechten, unteren und linken Rand des Blocks fest. Passe den Abstand an, um die Abstände für jede Kante des Containers und der inneren Elemente zu ändern.
Stelle anschließend mit der Vorschau sicher, dass der Abstand deinen Designanforderungen entspricht. Durch die richtige Anpassung von Rand und Abstand lassen sich klarere, optisch ansprechendere Designs erstellen, da der Abstand zwischen den Elementen kontrolliert werden kann.
Layout
Lege das vertikale oder horizontale Layout und Ausrichtung der Blöcke innerhalb des Containers fest, sowohl für die Desktop- als auch für die Mobilansicht. Legen außerdem den Abstand zwischen den einzelnen Elementen innerhalb des Containers anhand der genauen Pixelanzahl fest.
Spalten
Lege hier die Verteilung der Spalten im Container fest. Wenn die Verteilung der Spalten auf 0 gesetzt ist, kannst du die horizontale Ausrichtung zusätzlich anpassen.
Erscheinungsbild
Stelle die Sichtbarkeit des Blocks so ein, dass er nur auf Mobilgeräten oder Desktops angezeigt oder vollständig ausgeblendet wird. Darüber hinaus kannst du eine Hintergrundfarbe oder sogar ein Hintergrundbild für den Block auswählen.
Durch die Auswahl einer Style Variante kannst du erste Designentscheidungen treffen. Die Styles selbst kannst du individuell in der Registerkarte Design anpassen.
💡 Neben einem Hintergrundbild für ein Container-Setup kannst du auch ein GIF einfügen, um deinen Heyflow hervorzuheben.
Block designen
Nachdem du auf einen Baustein geklickt hast, findest du rechts den Abschnitt Design. Du kannst schnell Änderungen an den verschiedenen Styles vornehmen, indem du z.B. den Rahmen und andere Elemente anpasst.
Wenn du ein Design auf einen Block anwendest, werden automatisch alle Blöcke dieses Typs in deinem Flow aktualisiert. So bleibt dein Design konsistent, übersichtlich und leicht zu pflegen, ohne dass du jeden Block manuell gestalten musst.
Sieh dir auch die weiteren Design-Optionen von Heyflow an, um deinen Flow und deine Blöcke noch individueller zu gestalten:
Best Practices & FAQ
⭐ Testimonials und Erfahrungsberichte
⭐ Testimonials und Erfahrungsberichte
Container können verwendet werden, um Erfahrungsberichte auf visuell ansprechendere Weise darzustellen, z. B. auf Landing Pages.
⭐ GIF als Hintergrundbild
⭐ GIF als Hintergrundbild
Neben einem Hintergrundbild für ein Container-Setup kannst du auch ein GIF einfügen, um deinen Heyflow hervorzuheben.