Struktur der Vorlage für Mobilgeräte

Schritt 1 - Allgemeine Einstellungen > Stil der Vorlage >

Struktur der Vorlage für Mobilgeräte

Previous pageReturn to chapter overviewNext page
Versteckten Text zeigen/verstecken

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.

Klicken Sie um zu erweitern/minimierenAnleitung: Optionen für die Menükonfiguration

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:

Horizontal - Menü über dem Header

Horizontal - Menü unter dem Header

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.

Klicken Sie um zu erweitern/minimierenAnleitung: Optionen für die grafischen Eigenschaften der Seiteninhalte

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:

Firmenlogo: Wählt die Bilddatei (.JPG, .GIF, .PNG.) für das Logo aus, das oben links ausgerichtet neben den Menüpunkten einzufügen ist.
Logo ausblenden, wenn der Header sichtbar ist: Wird diese Option aktiviert, wird das Logo in der Menüleiste nur dann angezeigt, wenn der Header nicht mehr sichtbar ist, weil die Seite nach unten gescrollt wurde. Auf diese Weise wird für den Nutzer das Logo im Header sichtbar, und, auch wenn der Header nicht mehr sichtbar ist, bleibt das Logo neben dem Menü sichtbar.  

Für den Bereich Fußzeile dagegen stehen auch die folgenden Optionen zur Verfügung:

Text: In dieses Feld wird der Text eingegeben oder kopiert. Dieser Text kann verwendet werden, um zum Beispiel Informationen zum Unternehmen oder zum Copyright einzugeben: Er wird oben links positioniert und, wenn er länger ist, wird automatisch ein Absatz eingefügt, dadurch wird der Footer automatisch höher Fußzeile.
Schriftart: definiert die Schriftart, den Stil und die Punktgröße für den Text.
Textfarbe: definiert die Farbe für die Schrift des eingegebenen Textes.

Dank dieser Optionen kann die responsive Vorlage. vervollständigt werden. Dabei ist zu berücksichtigen, dass alle Einstellungen, die über das Fenster definiert werden, Anpassen der Vorlage für Desktop-PC nur auf die Hauptvorlage angewendet werden.

 

 


Praktische Anwendung:

-

Die Arbeit mit Vorlagen

-

Erstellen einer responsiven Website in WebSite X5 | Die Arbeit mit Vorlagen