Zum Inhalt springen

Seitenlayout

Ein Überblick über den grundlegenden Aufbau von responsiven Webseiten mit den Elementen des Mercury Templates.

Die mit dem Mercury Template erzeugten Seiten bestehen aus verschiedenen Ebenen von Template-Elementen, in denen die eigentlichen Inhaltselemente angezeigt werden.

Die Elemente der Seite werden in einem Seiten-Gitter dargestellt, welches durch die verwendeten Template-Elemente festgelegt wird.

Die Darstellung des Mercury Templates ist responsiv. Dies bedeutet, dass die Elemente einer Seite auf verschiedenen Bildschirmgrößen unterschiedlich ausgegeben werden.

Das Layout-System des Mercury-Templates basiert auf dem HTML-Framework Bootstrap.

Die Mercury Layout-Container

Der grundlegende Aufbau einer Seite erfolgt durch das Ablegen verschiedener Template-Elemente, welche mit Drag & Drop auf die Seite gezogen werden.

Eine vollkommen leere Seite enthält zunächst nur den rot gefärbten Basis-Container.

In diesen Basis-Container können Layout-Bereiche mit Drag & Drop abgelegt werden.

Ein Layout-Bereich erzeugt einen oder mehrere orange gefärbte Container, in denen Layout-Zeilen abgelegt werden können.

Layout-Zeilen erzeugen blau gefärbte Container, in denen Inhaltselemente abgelegt werden können.

Die Inhaltselemente stellen schließlich den eigentlichen Inhalt der Seite dar, so z.B. durch Inhalts-Abschnitte, Listen, Medien usw. 

Grundsätzlich können in jeden Container beliebig viele dafür passende Elemente eingefügt werden. So können z.B. in einen Layout-Bereich mehrere Layout-Zeilen untereinander eingefügt werden, um ein komplexes Seitenlayout zu erzeugen.

Eine Sonderstellung haben Layout-Gruppen. Diese erzeugen vorgegebene Layouts für spezielle Anwendungsbereiche, so z.B. für den Kopf- oder Fußbereich einer Seite. In welchem Container eine Layout-Gruppe eingesetzt werden kann ist abhängig von der Gruppe selbst. So können z.B. die Gruppen für Kopf- oder Fußbereiche wie Layout-Bereiche direkt in den Basis-Container abgelegt werden.

Das Boostrap 4 Gitter

Das 'Gitter' für Seitenspalten besteht aus einer Kombination von bis zu 12 möglichen Spalten (Englisch "Columns" bzw. "Col") pro Zeile.

Bei der Darstellung einer Layout-Zeile werden diese 12 möglichen Spalten auf verschiedene Weise zu den tatsächlich sichtbaren Spalten zusammengefasst. Die Zahlen in der Klammer im Namen einer Layout-Zeile geben dabei an, wie viele der möglichen Spalten des Gitters zu einer sichtbaren Spalte zusammen gefasst werden:

  • Die Layout-Zeile, Row 1 Spalte (12 - voll) nimmt die ganze verfügbare Breite ein, verwendet also alle 12 möglichen Spalten.
  • Layout-Zeilen, welche 2 gleichgroße Spalten erzeugen, tragen die Bezeichnung Row 2 Spalten (6-6)
  • Layout-Zeilen mit 2 unterschiedlich großen Spalten sind z.B. Row 2 Spalten (9-3) oder Row  2 Spalten (8-4) etc. 
  • Weiterhin gibt es noch die Row 3 Spalten (4-4-4), die Row 4 Spalten (3-3-3-3) sowie die Row 6 Spalten (2-2-2-2-2-2).
Gerätegrößen von Bootstrap 4

Es wird zwischen 6 möglichen Bildschirmgrößen unterschieden:

  • XS: 552 Pixel oder kleiner - "normale" Smartphones
  • SM: 553 bis 763 Pixel - übergroße Smartphones oder kleine Tablets
  • MD: 764 bis 1013 Pixel - Tablets, z.B. iPad
  • LG: 1014 bis 1199 Pixel - Kleinere Desktop-Bildschirme oder große Tablets
  • XL: 1200 Pixel oder größer - Desktop Bildschirme
  • XXL: 1400 Pixel oder größer - Große Desktop Bildschirme

Bitte beachten Sie, dass die Bezeichnungen wie "Desktop", "Tablet" oder "Smartphone" nur zur Orientierung dienen und die Template-Darstellung nicht wirklich von den Geräten, sondern alleine von der verfügbaren Bildschirmbreite abhängig ist. Für Desktop-Geräte bedeutet dies, die Darstellung verändert sich wenn das Browser-Fenster größer oder kleiner gezogen wird. Für mobile Geräte ändert sich die Bildschirmbreite wenn man das Gerät im Quer- oder Hochformat hält.

Abhängig von der Bildschirmgröße werden verschiedene Seitenelemente unterschiedlich angeordnet. Bei Layout-Zeilen wird in der Regel im Namen angegeben, ab wann die Elemente der Zeile vollständig nebeneinander dargestellt werden. Einige Beispiele:

  • Die Row 2 Spalten (6-6) [Alle Bildschirmngrößen] stellt in allen Bildschirmgrößen 2 Elemente nebeneinander dar, also auch auf "kleinen" Smartphones.
  • Die Row 2 Spalten (6-6) [Ab Bildschirmgröße LG] stellt für die Bildschirmgrößen XS, SM und MD die Elemente übereinander dar. Erst ab Bildschirmgröße LG werden die Elemente nebeneinander dargestellt.

Die folgende Tabelle zeigt die Größen der Spalten des 'Gitters' in Bildschirmpunkten (Pixel), abhängig von der jeweiligen Bildschirmgröße.

XS SM MD LG XL XXL
Breakpoint 0px 552px 764px 1014px 1200px 1400px
Spaltengröße 12 <=345px 510px 714px 962px 1140px 1290px
Spaltengröße 11 <=314px 465px 652px 879px 1043px 1180px
Spaltengröße 10 <=283px 420px 590px 797px 945px 1070px
Spaltengröße 9 <=251px 375px 528px 714px 848px 960px
Spaltengröße 8 <=220px 330px 466px 631px 750px 850px
Spaltengröße 7 <=189px 285px 404px 549px 653px 740px
Spaltengröße 6 <=158px 240px 342px 466px 555px 630px
Spaltengröße 5 <=126px 195px 280px 383px 458px 520px
Spaltengröße 4 <=95px 150px 218px 301px 360px 410px
Spaltengröße 3 <=64px 105px 156px 218px 263px 300px
Spaltengröße 2 <=33px 60px 94px 135px 165px 190px
Spaltengröße 1 <=1px 15px 32px 53px 68px 80px
"Gutter"-Größe 30px
Max. Bildskalierung 2500px