Flex Layout

Grid Spaces

Grid Spaces sind flexible Elemente, die mittels HTML Control beliebige HTML Inhalte inklusive Smarty Code aufnehmen können. Wie in jedem HTML Control kannst du auch in Grid Spaces andere Drops wie Image Banner, Powerslides oder Article Slider verlinken. Dazu aber später mehr.

Spaces erstellen

Du kannst einen Space auf verschiedene Weisen erstellen: durch einen Klick auf das + im Grid selbst, im Konfigurationsbereich des Grids (Option "Leerer Space") oder via Drag'n'Drop, indem du ein Drop aus der Dropper Sidebar in dein Grid ziehst.

Spaces mit Inhalten und Drops befüllen

Mit einem Klick auf einen Space öffnet sich ein Dialog. Hier kannst du via HTML Control eigene HTML Inhalte (wahlweise mit Smarty Code) einfügen oder andere Drops in dein Space verlinken.

Beachte dass du in einem Grid-Space HTML, Smarty und Drops beliebig mischen und auch mehrere Drops in einem einzelnen Space verlinken kannst!

Wie bei Drops kannst du auch Spaces im Kopfbereich des Dialoges umbenennen und auf auf inaktiv setzen.

Erweiterte Einstellungen für Spaces

Im Reiter "Erweitert" findest du die Möglichkeit, über eine Schaltfläche Darstellungsfilter festzulegen. Beachte hierzu auch den Abschnitt "Verstecken vs. Deaktivieren vs. Darstellungsfilter".

Wird die Anzeige eines Spaces über einen Darstellungsfilter eingeschränkt, kannst du Einstellungen zum Ausblendemodus festlegen. So kannst du den Space aus dem Layout entfernen oder den Space leeren, d.h. nur dessen Inhalte ausblenden. Im letzteren Fall bleibt ggf. eine (ab und an gewollte) Lücke in deinem Grid bestehen, falls der Space ausgeblendet wird.

Auch eigene CSS Klassen oder eine fixe Höhe für den aktiven Space lassen sich im Reiter "Erweitert" setzen.

Spaces anordnen

Hast du einmal deine Spaces mit Inhalten befüllt, kannst du dein Grid gestalten und anordnen, indem du:

• die Breite deiner Spaces änderst
• Spaces nebeneinander anordnest
• deren Position via Drag'n'Drop veränderst
• ein Offset festlegst und somit Spaces einrückst

Eine besondere Stärke des Flex Layout ist es, dass du dein Grid für verschiedene Bildschirmbreiten optimieren kannst. Lies dazu mehr im Abschnitt "Breakpoints"!

Aktionen für Spaces

Mit einem Klick auf das Zahnradsymbol in der linken oberen Eckes eines Spaces kannst du:

• den Space für diesen Breakpoint verstecken (mehr im Abschnitt Breakpoints)
• einen Umbruch erzwingen
• den Space samt Inhalt und Verlinkungen duplizieren
• den Space löschen

Mit einem Umbruch stellst du sicher, das dein Space immer auf einer neuen Zeile dargestellt wird. Löscht du einen Space einmal versehentlich, nutze Speicherpunkte, um den alten Zustand deines Grids wiederherzustellen.

Spaces einrücken und Umbrüche

Du kannst Spaces auch einrücken und somit bspw. zentriert darstellen. Sollen darunter wieder zentrierte Spaces folgen, kann dir ein Umbruch helfen.

Spaces sind mehrsprachig

Wenn du mehrere Sprachen in deinem Shop verwendest, kannst du für deine Spaces alternative Sprachversionen erstellen. Weitere Informationen zur Mehrsprachigkeit findest du im Wiki.

Breakpoints

Mit Breakpoints kannst du dein Grid für verschiedene Bildschirmbreiten optimieren. Der Ansatz ist dir vielleicht von Media Queries bekannt, wir denken diesen im Flex Layout jedoch noch etwas weiter. Mehr dazu am Ende dieses Abschnittes.

Standard Breakpoints

Erstellst du ein neues Flex Layout, ist immer genau ein Breakpoint mit den Namen MAX vorhanden. Stell dir diesen als Standardansicht für dein Grid vor. Ausgehend von dieser Standardansicht kannst du nun weitere Ansichten bzw. Layouts für andere Bildschirmgrößen erstellen. Wir stellen dir eine Reihe vordefinierter Breakpoints zur Auswahl.

Custom Breakpoints

Neben unseren Standardgrößen kannst du auf Wunsch auch eigene Breakpoints nach deinen Anforderungen definieren.

Breakpoint Einstellungen

Für deine Breakpoints kannst du eine Reihe von Einstellungen vornehmen. Unsere vordefinierten Breakpoints (Ausnahme: die Standardansicht MAX) kannst du so übrigens auch anpassen.

• Einstellungen: öffnet ein Einstellungsmenü, in dem du Titel, Beschreibung und Breite des Breakpoints festlegen kannst
• Zurücksetzen: setzt alle Spaces im Breakpoint auf volle Breite
• Löschen: löscht den Breakpoint
• Layout-Übernahme: ermöglicht die Übernahme eines Layouts aus einem anderen Breakpoint

Query Modus: Seitenbreite vs. Containerbreite

Im Einstellungsbereich deines Grids kannst du den sogenannten Query Modus festlegen. Im Standard ist hier die Option Seitenbreite (absolut) vorausgewählt, was dem Verhalten und der Logik von Media Queries im responsiven Webdesign entspricht. Der Fokus liegt dabei auf der Seitenbreite des Ausgabegerätes bzw. des Browsers.

Mit Dropper kannst die deine Flex Layouts Drops prinzipiell auch mehrfach in deinem Shop platzieren, z.B. einmal in der recht schmalen Sidebar und einmal im breiten Contentbereich deiner Startseite.

Wählst du als Query-Modus die Containerbreite (relativ), beziehen sich deine Breakpoints auf die Breite deines Einfügeortes, nicht der Seitenbreite! Das vereinfacht oft die Konfiguration deines Grids und verbessert das responsive Verhalten.

Spaces verstecken

In manchen Fällen kann es sinnvoll sein, einen Space für einen Breakpoint komplett auszublenden. Das kannst du über das Menu deines Space erreichen (Zahnrad-Symbol links oben im Space).

Versteckte Spaces werden aus Gründen der Übersichtlichkeit aus der aktuellen Ansicht entfernt, sind im Kopfbereich des Grids jedoch erreichbar und können mit einem Klick wieder eingeblendet werden.

Verstecken vs. Deaktivieren vs. Darstellungsfilter

Du kannst die Anzeige eines Spaces auch mit Darstellungsfiltern einschränken oder einen Space komplett deaktiveren. Beachte hierbei, dass diese Änderungen für alle deine Layouts gleichermaßen angewendet werden, nicht nur für den derzeit aktiven! Versteckt wird ein Space vom Flex Layout übrigens mit der CSS Anweisung display: none.

Ob ein Darstellungsfilter aktiv ist, siehts du am abgeänderten Titel des Spaces im Grid selbst, z.B. "Power Slide (1 Filter aktiv)".

Grid Einstellungen

Neben dem Query Modus (siehe Abschnitt "Breakpoints") kannst du hier auch den horizontalen und vertikalen Abstand der Grid Spaces zueinander festlegen. Diese Einstellungen gelten für all deine Layouts.

Reiter "Erweitert"

Weitere Größenangaben wie eine fixe Breite oder die Außenabstände deines Grids kannst du im Reiter "Erweitert" vornehmen. Beachte auch hier, dass diese Angaben für all deine Layouts gleichermaßen gelten.

Mobile First?

Mit dem Flex Layout startest du immer mit einem MAX Breakpoint, der die Darstellung aller möglichen Seitenbreiten abdeckt. Gerade bei komplexen Landingpages reicht ein einzelnes Grid-Layout jedoch meist nicht aus, um auf allen Gerätegrößen eine gute Optik zu erreichen.

Wenn du von Grund auf mit einem neuen Grid startest, empfehlen wir dir Mobile First zu denken. Erstelle einen XS (Smartphone) oder SM (Tablet) Breakpoint und konfiguriere dein Grid und deine Inhalte für diese Ansichten. Wenn du fertig bist, übernimmst du dieses "kleine" Layout mit der Option "Layout Übernahme" auf den MAX Breakpoint und nimmst deine Optimierungen vor.

Tests deiner Grids

Heutige Browser bieten die Möglichkeit, Webseiten auf die Optimierung für verschiedene Gerätegrößen und sogar Gerätetypen hin zu testen.

Im Chrome Browser erreichst und aktivierst du die sogenannte device toolbar, indem du zunächst die Entwicklertools mit [F12] und anschließend die Toolbar mit [STRG] + [Shift] + [M] öffnest.

Beachte, dass Chrome sogar den User Agent emulieren kann und du so auch den Gerätetyp Darstellungsfilter testen kannst. Allerdings solltest du dann deine Seite mit [STRG] + [R] neu laden.

Mehrere Zeilen überspannen

Von Hause aus kannst du in deinen Grids nicht mehrere Zeilen mit einem Space überspannen. Es gibt jedoch Wege, denn du kannst in einem Grid Space beliebige Drops verlinken, also auch ein weiteres Flex Layout!

Erstelle für das obige Ergebnis zwei Spaces nebeneinander und füge im rechten Space ein neues Flex Layout ein. Dieses enthält dann 2 Spaces, die die gesamte Gridbreite überspannen.

Wenn du kein zweites Flex Layout verwenden möchtest, gehst du prinzipiell gleich vor, nur dass du anstelle eines Flex Layouts deine Inhalte - bspw. zwei Image Banner - in einen einzelnen Space platzierst. Denke in diesem Fall daran, die Abstände der beiden Image Banner im Space an die Abstände deiner Grid Spaces anzugleichen.

Darstellungsfilter, Deaktivieren und Löschen gilt für alle Breakpoints

Wir haben im Abschnitt "Breakpoints" schon einmal darauf hingewiesen, trotzdem auch hier noch einmal ein deutlicher Hinweis: mit einem neuen Breakpoint werden die Inhalte deines Grids nicht dupliziert, sondern es wird einen neue Ansicht auf ein und dieselben Inhalte erstellt.

Das bedeutet, dass sich viele Manipulation an Spaces in einem Breakpoint auch auf andere Breakpoints auswirken. Solche Aktionen sind z.B.:

• das Duplizieren, Löschen oder Verschieben von Spaces
• das Ändern der Inhalte in einem Space
• das Setzen von Darstellungsfiltern für den Space
• das Deaktivieren (nicht zu Verwechseln mit dem Verstecken) vpn Spaces

Bitte prüfe in diesen Fällen, ob die Änderungen in deinem Breakpoint unerwünschte Auswirkungen auf die anderen Breakpoints haben.

MAX Breakpoint = Standardansicht

In den 1.x Versionen des Flex Layouts exitiert das Konzept der Breakpoints noch nicht so umfassend, es gab nur ein einzelnes Grid-Layout. Dieses Layout wird mit einem Update in den Standard-Breakpoint MAX übernommen.

Zusätzlicher MIN Breakpoint

Wenn du in der Einstellung Responsive Modus die Option "Spaces auf volle Breite umbrechen" verwendet hast (üblich, da eine Standardeinstellung), wird für dich bei einem Update neben dem MAX Breakpoint auch ein MIN Breakpoint erstellt. Im Layout dieses Breakpoints werden alle deine Spaces auf volle Breite gesetzt, was genau dem Verhalten der obigen Option aus älteren Flex Layout Versionen entspricht.

"Layout skalieren" nicht mehr unterstützt

Die Einstellung Responsive Modus aus älteren Flex Layout Versionen kannte auch die Option "Komplettes Layout skalieren", mit der alle Inhalte des Grids mit CSS Transformationen quasi wie ein Bild skaliert wurden.

Sollte diese Option in deinen Flex Layouts gesetzt sein, bleibt das Verhalten auch nach einem Update weiter bestehen. Allerdings bieten wir die Option für neu erstellte Flex Layouts nicht mehr an. Mit unseren Breakpoints steht nun ein weitaus besseres responsives Konzept zur Verfügung.