Wenn eine responsive Website erstellt werden soll, nachdem die folgende Option aktiviert wurde Resonsive Website zulassen im Fenster Allgemeine Einstellungen | Responsives Design, ist es notwendig, sowohl die Hauptvorlage, die für die Desktop-Ansicht verwendet werden soll, einzurichten, als auch die responsive Vorlage, die für alle Auflösungen verwendet werden soll, die niedriger sind als die, die für den Desktop-Umbruchpunkt.
eingestellt wurde. Dieses Fenster, das genau mit dem übereinstimmt, das für die Definition Struktur der Hauptvorlage zur Verfügung steht, erlaubt es daher, die Struktur für das responsive Modell einzustellen.
Es wird auf die Erklärungen verwiesen, die im Fenster Struktur der Hauptvorlage für alle allgemeinen Punkte gegeben werden: Hier werden nur die spezifischen Punkte und Optionen für das responsive Modell erläutert. |
Um bestmöglich an die verschiedenen durch die Umbruchpunkte eingestellten Auflösungen angepasst werden zu können und um die verfügbare Seitenbreite zu optimieren, ist das responsive Modell elastisch (das heißt, es hat keine feste Breite) und sieht nur eine Struktur mit horizontalem Navigationmenü vor. Deshalb gilt für die responsive Vorlage im Gegensatz zu dem, was für die Hauptvorlage gilt, dass bei der responsiven Vorlage die möglichen Alternativen für den Menütyp sind:
Bei der Auflösung für den Desktopwird das horizontale Menü im erweiterten Modus angezeigt: Alle Punkte sind sichtbar und werden in Abhängigkeit von den Einstellungen, die durch die im Fenster Stil des Hauptmenüs. verfügbaren Optionen vorgenommen wurden, präsentiert: Während die Auflösung kleiner wird, wird das Menü, in Abhängigkeit von der Breite der Schaltflächen und der Anzahl der vorhandenen Punkte, kompaktiert. Wird die Auflösung so weit reduziert, dass nicht mehr alle Menüpunkte angezeigt werden können, erscheint stattdessen der Hamburger-Button. Bis die Menüpunkte des ersten Niveaus sichtbar bleiben, bleibt auch das Verhalten des Drop-Down-Menüs gegenüber dem, das es bei der Desktop-Ansicht. hat unverändert, bei einem Hamburger Buttonjedoch werden die Punkte des Drop-Down-Menüs über einen Slider ansgezeigt, der erscheint, wenn man es durch Scrollen öffnet. Auch in diesem Fall verwendet der grafische Stil des Drop-Down-Menüs die für die Desktop-Vorlage bereits eingestellten Farben, Hintergründe und Texte. |
Im Vergleich zu dem, was für die Struktur der Hauptvorlage gilt, können für die responsive Vorlage einige Eigenschaften der Inhalte mehr für die folgenden Bereiche verwaltet werden: Menü und Fußzeile. Für den Bereich Menü stehen auch die folgenden Optionen zur Verfügung:
Für den Bereich Fußzeile dagegen stehen auch die folgenden Optionen zur Verfügung:
|
Praktische Anwendung: