Artikel über: Editor: Templates & Snippets
Dieser Artikel ist auch verfügbar in:

Layout/Container Snippet


Container-Snippets helfen bei der Erstellung komplexer Layouts. Sie können alle Webmag-Snippets in die Container-Blöcke einfügen.


Beispiel für ein Container-Snippet mit zwei Container-Blöcken



Content


  1. Container-Snippets
  2. Container-Größe
  3. Container ausrichten
  4. Vertikale Ausrichtung
  5. Padding
  6. Hintergrundfarbe
  7. Position



Container-Snippets


Derzeit haben wir Container-Snippets mit 2, 3, 4 und 6 Container-Blöcken. Jeder Block kann in der Größe für verschiedene Bildschirmgrößen angepasst werden.


Container-Snippets mit 2, 3, 4, und 6 Container-Blöcken




Container-Breakpoints


Unser Grid ist durch 12 Spalten auf einer Seite definiert. Sie können die Größe der Container für 5 verschiedene Bildschirmgrößen einstellen.


  • Extra small <576px
  • Small ≥576px
  • Medium ≥768px
  • Large ≥992px
  • Extra large ≥1200px


Einstellungen eines Container-Snippets mit zwei Container-Blöcken. Die Blöcke haben eine Breite von 100% (12/12) auf Bildschirmen kleiner als 576px und eine Breite von 50% (6/12) auf Bildschirmen größer als 768px



Container ausrichten


Mit den Ausrichtungsmöglichkeiten des Container-Snippets können Sie die Ausrichtung der Blöcke auf der x-Achse ändern.


justify-content-between: Die Blöcke werden gleichmäßig in der Zeile verteilt; das erste Element steht in der Startzeile, das letzte Element in der Endzeile


justify-content-around: Die Blöcke sind gleichmäßig in der Zeile verteilt, mit gleichem Abstand um sie herum


justify-content-center: Die Blöcke sind in der Mitte der Zeile angeordnet


justify-content-right: Die Blöcke werden in Richtung des rechten Zeilenendes gepackt


justify-content-left: Die Blöcke werden in Richtung des linken Zeilenendes gepackt



Vertikale Ausrichtung


Jeder Container kann vertikal ausgerichtet werden. Sie können eine der folgenden Optionen wählen:


  • top
  • center
  • bottom
  • stretch




Padding


Ändern Sie die Füllung jedes Blocks, um unterschiedliche Größen von Leerraum zu erzeugen.




Hintergrundfarbe


Sie können die Hintergrundfarbe eines Containerblocks festlegen. Das geht am besten per benutzerdefiniertem Padding.




Position


Wenn ein Block auf Position "Sticky" eingestellt ist, bleibt er am oberen Rand der Seite, wenn ein anderer Container eine größere Höhe als die Fensterhöhe hat.



Aktualisiert am: 28/03/2024

War dieser Beitrag hilfreich?

Teilen Sie Ihr Feedback mit

Stornieren

Danke!