Passe dein Mobile-Menü an das Design und Layout deiner Website an. Dein Mobile-Menü besteht aus drei Elementen: dem Menüsymbol, dem Menü-Container und den Menüelementen.
Du kannst jedes dieser Menüs individuell anpassen, um ein einzigartiges, auffälliges Menü für dich und deine Besucher auf Mobilgeräten zu erstellen.
Erfahre mehr über folgende Themen:
Das Menüsymbol hat zwei Zustände: offen und geschlossen. Du kannst ein voreingestelltes Symbol auswählen und beide Zustände nach deinen Wünschen anpassen.
Um das Menüsymbol anzupassen:
- Klicke im Mobile-Editor auf das Menüsymbol.
- Klicke auf das Symbol für Design
. - Wähle eine Voreinstellung aus den verfügbaren Optionen aus.
- Klicke Design anpassen.
- Wähle den Status aus, für den du das Symbol anpassen möchtest, indem du auf einen Tab klickst (Geschlossen oder Offen).
- Wähle, wie du das Symbol gestalten möchtest:
Die Füllfarbe und Deckkraft anpassen
Du kannst eine auffällige Farbe für dein Symbol wählen und die Sichtbarkeit festlegen.
Klicke auf den Tab Füllfarbe und Deckkraft
und passe das Symbol mit den folgenden Optionen an:
- Buttonhintergrund: Klicke auf das Farbfeld, um eine Farbe für den Buttonhintergrund auszuwählen, und ziehe den Schieberegler, um die Deckkraft zu erhöhen oder zu verringern.
- Symbol: Klicke auf das Farbfeld, um eine Farbe für das Buttonsymbol auszuwählen, und ziehe den Schieberegler, um die Deckkraft zu erhöhen oder zu verringern.
Einen Rand um das Symbol hinzufügen und anpassen
Füge deinem Symbol einen Rahmen hinzu, um es auf der mobilen Ansicht deiner Website hervorzuheben.
Klicke auf den Tab Rand
, um Farbe, Sichtbarkeit und Breite einzustellen:
- Deckkraft & Farbe: Klicke auf das Farbfeld, um eine Farbe auszuwählen, und ziehe den Schieberegler, um die Deckkraft zu erhöhen oder zu verringern.
- Breite: Ziehe den Schieberegler, um die Breite des Randes zu vergrößern oder zu verkleinern.
Die Ecken des Symbols anpassen
Klicke auf den Tab Ecken
, um die Ecken des Symbols runder oder eckiger zu gestalten:
- Sperren/Entsperren: Klicke auf das Symbol
, um zu aktivieren oder deaktivieren, dass alle Ecken auf den gleichen Radius eingestellt werden. - Radius: Gib den Radius der Ecken in das Feld ein.
Einen Schatten zum Symbol hinzufügen und anpassen
Füge einen Schatten hinzu, um deinem Symbol einen interessanten 3D-Effekt zu verleihen.
Klicke auf den Tab Schatten
, um einen Schatten hinzuzufügen und mit den folgenden Optionen anzupassen:
- Schatten aktivieren: Klicke auf den Schalter, um einen Schatten zu aktivieren oder zu deaktivieren.
- Winkel: Gib den Winkel in das Textfeld ein.
- Abstand: Ziehe den Schieberegler, um den Abstand zwischen dem Symbol und dem Schatten zu vergrößern oder zu verkleinern.
- Größe: Verwende den Schieberegler, um die Größe des Schattens anzupassen.
- Weichzeichnen: Ziehe den Schieberegler, um die Unschärfe des Schattens anzupassen.
- Deckkraft & Farbe: Klicke auf das Farbfeld, um eine Farbe für das Schattenfeld auszuwählen, und ziehe den Schieberegler, um die Deckkraft zu erhöhen oder zu verringern.
Die Menübox enthält deine Menüelemente. Mit den Panels für Layout, Design und Hintergrund kannst du die Position und das Aussehen deines Menü-Containers an deine Website anpassen.
Um die Menübox anzupassen:
- Klicke im Mobile-Editor auf das Menüsymbol.
- Klicke auf Menü bearbeiten.
- Klicke auf den Menü-Container.
- Wähle mit den folgenden Optionen, wie du den Menü-Container anpassen möchtest:
Das Layout des Containers anpassen
Wähle das Layout des Containers so, dass es der Ausrichtung deiner Website entspricht und dein Menü übersichtlich bleibt.
Klicke auf das Symbol für Layout
und wähle eine Ausrichtung für dein Menü:
- Vollbild: Der Menü-Container wird im Vollbildmodus geöffnet.
- Links: Der Menü-Container wird auf der linken Seite des Bildschirms geöffnet.
- Rechts: Der Menü-Container wird auf der rechten Seite des Bildschirms geöffnet.
Den Hintergrund des Containers ändern
Wähle entweder eine schöne Farbe oder einen Farbverlauf für deinen Container-Hintergrund oder ein beeindruckendes Bild. Klicke auf Hintergrund ändern und wähle eine der folgenden Optionen aus:
Das Design des Containers anpassen
Passe die Überlagerung an, die über dem Rest deiner Website angezeigt wird, wenn das Menü geöffnet ist.
Klicke auf das Symbol für Design
und verwende die Einstellungen, um die Überlagerung anzupassen:
- Farbe: Klicke auf das Farbfeld, um eine Farbe für die Überlagerung auszuwählen.
- Deckkraft: Ziehe den Schieberegler, um die Deckkraft der Überlagerung zu erhöhen oder zu verringern.
Hinweis: Diese Option ist nur verfügbar, wenn du im Layout-Panel die Ausrichtung des Containers auf links oder rechts festlegst.
Passe das Aussehen und Design deiner Menüelemente (des Menütexts) an. Du kannst Einstellungen wie Schriftart, Farbe und Abstand anpassen.
Um die Menüelemente anzupassen:
- Klicke im Mobile-Editor auf das Menüsymbol.
- Klicke auf Menü bearbeiten.
- Klicke auf das Mobile-Menü.
- Wähle mit den folgenden Optionen, wie du die Menüelemente anpassen möchtest:
Passe das Layout der Elemente an, um das Menü weiter an die Ausrichtung deiner Website anzupassen.
Klicke auf das Symbol für Layout
und verwende die folgenden Optionen:
- Textausrichtung: Wähle aus, ob der Text links, rechts oder mittig am Menü-Container ausgerichtet wird.
- Ausrichtung des Untermenüpfeils: Wähle aus, ob der Untermenüpfeil links oder rechts vom Elementtext ausgerichtet wird.
Es gibt eine Reihe von Designoptionen für deine Menüelemente. Du kannst anpassen, wie die Elemente in zwei Zuständen aussehen: Standard und Ausgewählt.
Klicke auf das Symbol für Design
und wähle entweder den Tab
Standard oder
Ausgewählt, um den Status anzupassen:
- Standard:
- Füllfarbe und Deckkraft : Klicke auf die Farbfelder, um eine Farbe auszuwählen, und ziehe die Schieberegler, um die Deckkraft für den Menü- und Untermenühintergrund sowie den Hintergrund der Untermenüpfeile zu erhöhen oder zu verringern.
- Rand :
- Deckkraft & Farbe: Klicke auf das Farbfeld, um eine Farbe für deinen Rand auszuwählen, und ziehe den Schieberegler, um die Deckkraft zu erhöhen oder zu verringern.
- Randstil: Wähle aus, ob der Rand auf allen Seiten, nur unten oder gar nicht angezeigt werden soll.
- Schatten :
- Schatten aktivieren: Klicke auf den Schalter, um einen Schatten zu aktivieren oder zu deaktivieren.
- Winkel: Gib den Winkel in das Textfeld ein.
- Abstand: Ziehe den Schieberegler, um den Abstand zwischen dem Menü und dem Schatten zu vergrößern oder zu verkleinern.
- Größe: Verwende den Schieberegler, um die Größe des Schattens anzupassen.
- Weichzeichnen: Ziehe den Schieberegler, um die Unschärfe des Schattens anzupassen.
- Deckkraft & Farbe: Klicke auf das Farbfeld, um eine Farbe für das Schattenfeld auszuwählen, und ziehe den Schieberegler, um die Deckkraft zu erhöhen oder zu verringern.
- Text
: Verwende die folgenden Optionen, um sowohl das Menü als auch die Untermenüelemente anzupassen:
- Schriftvorlage: Wähle eine Schriftvorlage aus dem Aufklappmenü aus.
- Schriftart: Wähle eine Schriftart für deine Menüelemente aus dem Aufklappmenü aus.
- Schriftgröße: Ziehe den Schieberegler, um die Schrift zu vergrößern oder zu verkleinern.
- Formatierung: Gestalte deinen Text fett oder kursiv.
- Farbe: Klicke auf das Farbfeld, um eine Farbe für deinen Text auszuwählen.
- Abstand
: Ziehe die Schieberegler, um den Abstand der Menü- und Untermenüelemente zu vergrößern oder zu verringern.
- Ausgewählt:
- Füllfarbe und Deckkraft : Klicke auf die Farbfelder, um eine Farbe auszuwählen, und ziehe den Schieberegler, um die Deckkraft des Menüs und des Untermenühintergrunds zu erhöhen oder zu verringern.
- Text : Klicke auf die Farbfelder, um eine Farbe für das Menü und die Untermenüelemente auszuwählen.
