Zum Hauptinhalt springen
Container

Der Container-Block ermöglicht es dir, mehrere Blöcke nebeneinander zu platzieren und in einem Element zu.

Heyflow avatar
Verfasst von Heyflow
Vor über 8 Monaten aktualisiert

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.

Hinzufügen des Containers

  1. Im Tab Blöcke gehe zu Layout und ziehe den Container-Block in deinen Heyflow

  2. Ziehe die gewünschten Blöcke in den Container

  3. Passe das Layout des Containers an

  4. Publiziere deinen heyflow und schon bist du startklar!


Bearbeitungsoptionen

Allgemein

  • Außenbreite: Wähle die äußere Breite des Containers. Beachte, dass die Vorschau ggf. kleiner dargestellt wird, als hier ausgewählt.

  • Innenbreite: Wähle die breite des inneren Elements. Auch hier wird die Breite ggf, kleiner dargestellt, als ausgewählt.

  • Inhalt ausrichten: Definiere, ob der Inhalt des Containers links, rechts oder mittig dargestellt wird.

  • Margin & Padding: Definiere den Abstand zum oberen, rechten, unteren und linken Rand dieses Blocks.

Layout

  • Layout: Bestimme die vertikale oder horizontale Ausrichtung der Blöcke innerhalb des Containers.

  • Ausrichten: Layout der Blockplatzierung im Verhältnis zu einer Seite.

  • Layout Mobil: Bestimme die vertikale oder horizontale Ausrichtung der Blöcke innerhalb des Containers auf mobiler Ansicht.

  • Abstand: Bestimme den Abstand der einzelnen Elemente zueinander per Schieberegler oder mit genauer Pixelanzahl.

Spalten

  • Verteilung: Bestimme die Verteilung der Elemente des Containers.

  • Horizontale Ausrichtung: Wenn die Verteilung der Spalten jeweils auf 0 gestellt ist, kannst du die horizontale Ausrichtung anpassen.

Aussehen

  • Sichtbarkeit: Hierüber kannst du auswählen, ob der Block nur in der mobilen bzw. Desktop Version angezeigt wird oder diesen gänzlich verstecken.

  • Hintergrundfarbe: Du kannst du eine Farbe auswählen, die als Hintergrund für den Block genutzt wird.

  • Hintergrundbild: Lege ein Hintergrundbild für den Block fest.

  • Style Variante: Lege ein vorgefertigtes Muster fest. Die verschiedenen Styles können jeweils im Design-Tab angepasst werden.


Beispiele

Empfehlung (Testimonial)

Containers können dafür genutzt werden, um Erfahrungsberichte z.B. auf einer Landingpage schöner anzeigen zu lassen.

Hintergrundbilder und GIFs

Neben einer Hintergrundfarbe kannst du in einem Container auch ein Hintergrundbild oder sogar ein GIF einblenden, sodass dein Flow noch mehr heraussticht.

Hat dies deine Frage beantwortet?