Header und erweiterbares Menü

Hinweis

Diese Informationen sind spezifisch für den klassischen Editor und nicht relevant für Editor 2.0 (früher bekannt als All-Flex Editor). Um Ihre aktuelle Editor-Version zu identifizieren, siehe So identifizieren Sie die Editor-Version, die Ihre Website verwendet.

Sie können Ihren Desktop- und Tablet-Websites ein erweiterbares Menü hinzufügen, wodurch es einfacher ist, moderne Websites mit einem flexibleren Design zu erstellen. Wählen Sie aus mehreren Layouts für das erweiterbare Menü aus und passen Sie diese nach Belieben an, indem Sie Widgets, Zeilen und Spalten hinzufügen.

Das Layout mit erweiterbarem Menü für Mobilgeräte bietet mehr Anpassungsmöglichkeiten und ermöglicht die Anzeige von Widgets auf dem Header sowie eines Menüs, das immer eingeblendet bleibt.

Sie können das Layout des Headers in ein vordefiniertes Layout ändern, das Schaltflächen, eine „Click-to-Call“-Funktion, einen Warenkorb, Social-Media-Symbole und vieles mehr enthält. Sie können sämtliche Widgets durch Ziehen aus dem Widget-Bereich zum erweiterbaren Menü hinzufügen.

Desktop und Tablet

Layout für ein erweiterbares Menü auswählen

So wählen Sie ein Layout für ein erweiterbares Menü für Ihre Website aus:

  1. Klicken Sie in der linken Seitenleiste auf Thema.
  2. Klicken Sie auf Website-Layout.
  3. Wählen Sie im Abschnitt Desktop das Layout Erweiterbares Menü.
  4. Wählen Sie im Abschnitt Tablet das Layout mit dem erweiterbaren Menü aus.

Desktop- und Tablet-Header

Nach der Auswahl eines Layouts mit einem erweiterbaren Menü wird ein Hamburger-Symbol im Header Ihrer Website angezeigt. Klicken Sie auf das Hamburger-Symbol (), um das erweiterbare Menü zu öffnen.

So bearbeiten Sie die Position des erweiterbaren Menüs im Header:

  1. Fahren Sie mit der Maus über den Header, klicken Sie auf Header und wählen Sie dann Design bearbeiten.
  2. Klicken Sie im Abschnitt Layout auf Links oder Rechts.

Erweiterbares Menü auf Desktops und Tablets

So konfigurieren Sie das erweiterbare Menü:

  1. Klicken Sie auf das Hamburger-Symbol (), um den Editor für das Menüdesign zu öffnen.
  2. Klicken Sie in der Registerkarte Layout auf das vorhandene Layout, um ein Layout für das Menü auszuwählen.
  3. In der Registerkarte „Stil“ haben Sie die folgenden Optionen:
    • Öffnen von. Wählen Sie Oben oder Seite aus.
    • Starteffekt. Wählen Sie Angepasst oder Push aus.
    • Breite. Bewegen Sie den Schieberegler, um die Breite des erweiterbaren Menüs im ausgeklappten Zustand einzustellen. Die Breite des Menüs wird in Prozentwerten definiert, damit es auf alle Bildschirmgrößen passt.
    • Hintergrund. Konfigurieren Sie die Hintergrundfarbe oder das Hintergrundbild.
    • Farbe des Symbols „Schließen“. Wählen Sie eine Farbe und Hintergrundfarbe für das Schließen-Symbol aus.
  4. Ändern Sie in der Registerkarte Abstände die inneren Abstände.

Das erweiterbare Menü kann bis zu 3 Zeilen haben, und jede Zeile lässt sich vollständig anpassen.

Hinweis

Wenn für Desktop und Tablet das gleiche Website-Layout ausgewählt ist (für beide „erweiterbar“ oder für beide „obere Navigationsleiste“), werden alle Anpassungen für beide Geräte übernommen. Falls die Layouts unterschiedlich sind, muss jedes Gerät separat definiert werden.

Wenn Sie die oben erwähnten Header-Features nicht sehen, verwenden Sie möglicherweise den alten Header. Um ein Update auf den neuen Header vorzunehmen, klicken Sie in der Desktop- und Tablet-Ansicht auf den Header. Beim Aktualisieren des Headers wird eine automatische Sicherungskopie erstellt.

Hinweis

Dieser Schritt gilt nur für bestehende Websites. Er bezieht sich nicht auf neue Websites.

Mobilgeräte-Header

So bearbeiten Sie den mobilen Header:

  1. Fahren Sie mit der Maus über den Header, klicken Sie auf das Label Header und wählen Sie dann Design bearbeiten.
  2. Klicken Sie in der Registerkarte Layout auf das vorhandene Layout, um ein Layout für das Menü auszuwählen. Für den Mobilgeräte-Header sind mehrere Layouts verfügbar, die Widgets wie Social-Media-Links, Telefonnummern usw. anzeigen können. Die Header-Layouts sind fixiert, Sie können also keine neuen Widgets hinzufügen. Sie haben allerdings die Möglichkeit, die Widgets zu bearbeiten und zu entfernen.
    Wenn Sie einen Store hinzufügen oder Ihre Website in mehreren Sprachen anbieten, stehen weitere Optionen für das Layout zur Verfügung, wie die Symbole für den Warenkorb und die Sprachauswahl. Diese Layouts werden nicht angezeigt, wenn Sie nicht über einen Store verfügen bzw. die Website nicht in mehreren Sprachen anbieten.
  3. Klicken Sie auf Links oder Rechts, um die Position des Menüsymbols festzulegen.

Mobilgeräte-Navigation

Öffnen Sie zum Bearbeiten des erweiterbaren Menüs das Menü in der Mobilgeräte-Ansicht. Der Menü-Editor für die Bearbeitung wird automatisch geöffnet.

  1. Klicken Sie in der Registerkarte Layout auf das vorhandene Layout, um ein Layout für das Menü auszuwählen. Für das erweiterbare Menü sind mehrere Layouts vorhanden, die Social-Media-Links, Kontaktdaten und mehr anzeigen können. Zum erweiterbaren Menü lassen sich beliebige Widgets sowie Spalten hinzufügen. Außerdem lassen sich die Spalten nebeneinander oder übereinander platzieren. Beim Wechsel des Layouts werden jedoch sämtliche Inhalte gelöscht, die zum Menü hinzugefügt wurden. Nur die Widgets des gewählten Layouts werden übernommen.
  2. In der Registerkarte „Stil“ haben Sie die folgenden Optionen:
    • Öffnen von. Wählen Sie Oben oder Seite aus. Wenn „Oben“ ausgewählt ist, bewegen Sie den Schieberegler für die Höhe. Wenn „Seite“ ausgewählt ist, bewegen Sie den Schieberegler für die Breite.
    • Starteffekt. Wählen Sie Angepasst oder Push aus.

Aktualisierungen für mobile Layouts

Am 8. September 2019 wurden drei mobile Layouts entfernt, da sie nicht sehr oft benutzt wurden. Die beiden verbleibenden Layouts sind aktueller und nützlicher.

Wenn Sie bereits eine Website mit einem der entfernten Layouts haben und ein anderes Layout auswählen, verschwinden die entfernten Layouts, aber Sie können sie mithilfe der Sicherungskopie Ihrer Website wiederherstellen.

Um den neuen Header für die mobile Ansicht zu aktualisieren, klicken Sie auf den Header in der Mobil-Ansicht. Beim Aktualisieren des Headers wird eine automatische Sicherungskopie erstellt.

Hinweis

Dieser Schritt gilt nur für bestehende Websites. Er bezieht sich nicht auf neue Websites.