Header and Footer Optionen

Überblick

Funktionale Kopf- und Fußzeilenmenüs sind wichtig, um Besuchern einen schnellen Überblick über die Inhalte Ihrer Website zu ermöglichen. Erfahren Sie hier, wie Sie das für Sie passende Menü finden, Links hinzufügen und die Anzeigeoptionen zum Vorteil Ihrer Besucher (und Suchmaschinen) optimieren können.

Hinweis

Werfen Sie einen Blick auf unsere Demo-Seite und lassen Sie sich für Ihre eigene Website inspirieren: https://template.cms.picturemaxx.com/de

Bevor Sie Seiten zu Ihrem Menü hinzufügen können, müssen Sie die Seiten, die Sie in Ihren Menüs verwenden möchten, bereits erstellt haben. Wie das funktioniert, erfahren Sie im Abschnitt Standardseite.

Anzeige-Optionen konfigurieren

Es gibt verschiedene Optionen für Ihre Menüs, die Sie nach Ihren Bedürfnissen konfigurieren können.

  1. Navigieren Sie zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
  2. Auf der Seite Farbkonfiguration scrollen Sie nach unten zu den picturemaxx Design-Einstellungen und wählen die Darstellungsoptionen. Folgende Einstellungen stehen zur Verfügung:
  • Schrift-Skalierung
    Definieren Sie die Schriftgrößen für Überschriften, Beschriftungen und Fließtext auf Ihrer Website. Sie sorgt für ein konsistentes Erscheinungsbild und harmonische Abstände. Die Standardoption ist 16 px.
  • Header-Stil
    Probieren Sie jeden Stil aus und entscheiden Sie, welcher für Sie am besten passt.
  • Navigationsstil (nur bei Logo & Burger-Menü)
    Das Burger Menü kann bei Mausklick entweder seitlich von rechts hereingeschoben werden, oder als Overlay über die gesamte Seite angezeigt werden.
  • Kopfzeile als fest anzeigen
    Der gesamte Header (Logo + Menüs) ist fixiert und bleibt beim scrollen immer sichtbar. Wenn Sie das Logo & Burger-Menü auswählen, gibts es zusätzlich die Option nur das Logo, unabhängig von der Kopfzeile, zu fixieren.
  • Sprachumschalter ausblenden
    Wenn Sie für Ihre Seite nur eine Sprache verwenden, macht es Sinn den Sprachumschalter auszublenden.
  • Hauptnavigation → Textstil der 1. Ebene
    Legen Sie die Groß- und Kleinschreibung der Menüpunkte in der Navigation fest. Wählen Sie zwischen ALLES GROSSGESCHRIEBEN, Jedes Wort Großschreiben oder Keine Umwandlung, um die ursprüngliche Schreibweise beizubehalten.
  • Einstellungen Doormat
    Wählen Sie die Anzahl der Spalten für die Doormat. Sie können die Doormat hier auch ausblenden.
  • Logo-Ausrichtung
    Wählen Sie zwischen links, mittig oder rechts.
  • Footer-Ausrichtung
    Wählen Sie zwischen links, mittig oder rechts.
  • Seitenränder berücksichtigen
    Wenden Sie Seitenränder auf Inhalte mit Hintergrund an, beispielsweise Bilder, Videos, Slideshows oder Hintergrundgrafiken.
  • Animationen während des Scrollens verwenden
    Aktivieren Sie Einblendanimationen für Seitenelemente, wenn diese beim Scrollen in den sichtbaren Bereich gelangen.
  • Button »Zurück zum Seitenanfang« verwenden
    Fügen Sie eine Schaltfläche hinzu, mit der Benutzer schnell zum Seitenanfang zurückkehren können.
  • Ähnlichkeitssuche anzeigen
    Wichtig: Hierfür ist ein Backstage-API-Schlüssel erforderlich. Für weitere Informationen und Unterstützung kontaktieren Sie uns unter support@picturemaxx.com.

Kurze Demo: Konfigurieren Sie die Anzeigeoptionen für Header und Footer.

Mithilfe der Menüs können Sie die Nutzer effektiv zu den wichtigsten Informationen Ihrer Website führen. Wir unterscheiden unter anderem zwischen dem Header-Menü, der Hauptnavigation, der Fußzeile und dem Footer-Menü.

Sie können einem Menü ganz einfach einen Link hinzufügen (oder entfernen), indem Sie Struktur > Menüs > Footer-Menü, Hauptnavigation oder Header-Menü auswählen.

Konfigurationsbeispiel: Hauptnavigation auf unserer Demo-Seite:

Hauptnavigation auf der Demo-Website mit angewendeten Einstellungen.

Hauptnavigation

Website-Frontend mit hervorgehobenem Hauptnavigationsmenü.

Header-Menü

Website-Frontend mit hervorgehobenem Header-Menü.

Footer-Menü

Website-Frontend mit hervorgehobenem Fußzeilenmenü.

Das Header-Menü erscheint in der oberen rechten Ecke Ihrer Website. Wir haben dieses Menü für Sie so gestaltet, dass Sie für jeden Menüpunkt Symbole anstelle von Text verwenden können.

Hinweis

Die Verwendung von Symbolen ist nur möglich für das Header-Menü.

  1. Navigieren Sie zu Struktur > Menüs > Header-Menü und beginnen Sie mit der Erstellung Ihres Header-Menüs.
    • Um einen bestehenden Menüpunkt zu aktualisieren, klicken Sie auf Bearbeiten.
    • Wenn Sie einen neuen Menüpunkt erstellen möchten, klicken Sie auf + Link hinzufügen.
  2. Konfigurieren Sie die folgenden Menüeinstellungen:
  • Linktitel des Menüpunkts
    Der Name wird für den Link im Menü verwendet, falls Sie keine Icons verwenden.
  • Link
    Der Name der Seite, die verlinkt werden soll. Sie können entweder den Namen der Seite, die verlinkt werden soll, oder eine URL wählen.
  • Aktiviert
    Legen Sie fest, ob der Link im Menü angezeigt werden soll.
  • Attribute - Display-Options
    Sie können für jeden Menülink individuell festlegen, wo seine Children (weitere Menüpunkte) sichtbar sein sollen oder nicht. Wenn Sie nichts auswählen, wird jeder Menüpunkt in der Doormat und im Header sichtbar sein.
  • Attribute - Link target
    Sie können ein Ziel für die verwiesene Seite angeben: gleiche Seite oder neue Seite.
  • Symbol - Icon Bild
    Im Kopfmenü können Sie ein Icon hochladen. Es ist das einzige Menü, das diese Funktion bietet. Die empfohlene Größe des Icons ist 50 x 50 px.
  • Icon - Icon padding / width / height
    Wenn Sie die Größe von Padding, Gewichtung und Breite in Pixeln ändern, können Sie das Symbol an die Größe anpassen, in der es in Ihrem Menü angezeigt werden soll. Am besten probieren Sie verschiedene Größen aus, um einen Eindruck zu bekommen, wie das Ganze funktioniert.
  • Icon - Text ausblenden
    Bei der Arbeit mit Icons empfehlen wir aus Designgründen, Das Feld Text ausblenden auszuwählen.
  • Sprache
    Wählen Sie die Sprache für den Menü-Link aus.
  • Übergeordneter Link
    Wählen Sie einen übergeordneten Menü-Link aus, um diesen Link als Untermenü anzulegen.
  • Anzeigeeinstellungen - Gewichtung
    Legen Sie die Anzeigereihenfolge fest. Niedrigere Werte werden oben, höhere Werte unten angezeigt.
  • Anzeigeeinstellungen - Als ausgeklappt anzeigen
    Wenn diese Option ausgewählt ist und dieser Menü-Link Untermenüs hat, wird das Menü immer erweitert angezeigt. Diese Option kann für den gesamten Menübaum überschrieben werden, wenn ein Menüblock platziert wird.
  • Beschreibung
    Fügen Sie einen kurzen Hilfetext hinzu, der angezeigt wird, wenn Benutzer den Mauszeiger über den Link bewegen. `
  • Simple XML-Sitemap
    Sie können die Einstellungen für die Simple XML Sitemap ignorieren, da sie nur für den erstellten Inhalt und nicht für die Menülinks SEO-relevant sind. Bleiben Sie einfach bei der Standardeinstellung.

Die Hauptnavigation erscheint immer in der oberen Mitte Ihrer Website. Als besondere Funktion können Sie ein Drop-down-Menü erstellen. Siehe den Abschnitt Menüpunkte in Drop-down-Menüs anordnen weiter unten.

Um die Hauptnavigation zu bearbeiten, gehen Sie zu Struktur > Menüs > Hauptnavigation. Die Schritte zum Hinzufügen von Menüpunkten zur Hauptnavigation sind die Gleichen wie im Header-Menü.

Um die Struktur und das Aussehen Ihres Menüs zu ändern, navigieren Sie zu Struktur > Menüs > Hauptnavigation.

Nachdem Sie alle Menüpunkte erstellt haben, können Sie deren Positionen im Menü ändern:

  • die Menüpunkte einfach per Drag&Drop nach oben oder unten verschieben, oder
  • durch Änderung der Gewichtung die Ansicht ändern:
    1. Klicken Sie auf Zeilenreihenfolge einblenden, um die Spalte Gewichtung anzuzeigen.
      • Jeder Menüpunkt besitzt einen Wert, der seine Position bestimmt. Niedrigere Werte werden weiter oben, höhere Werte weiter unten im Menü angezeigt.
    2. Passen Sie die Werte an, um mehrere Menüpunkte schnell neu anzuordnen.

Konfigurationsbeispiel: Zeilenreihenfolge ein-/ausblenden

Konfigurationsbeispiel für das Ein- und Ausblenden der Zeilenreihenfolge

Wie der Name schon sagt, erscheint das Footer-Menü immer am unteren Rand Ihrer Website. In den meisten Fällen wird es verwendet, um Seiten wie Imprint, Privacy Policy und Copyright zu verlinken. 

Um Links zu diesem Menü hinzuzufügen, navigieren Sie bitte zu Struktur > Menüs > Footer-Menü. In den Darstellungsoptionen können Sie die Ausrichtung wählen (links, mittig, zentriert). 

Die Schritte zur Bearbeitung der Menüpunkte des Footer-Menüs sind die Gleichen wie die des Header Menüs.

Doormat anzeigen

Die Doormat bietet eine Übersicht über alle Menüpunkte Ihrer Website, die sich am unteren Rand jeder Seite befinden.

  1. Gehen Sie zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos & Stile.
  2. Scrollen Sie nach unten zu den picturemaxx Design-Einstellungen und wählen Sie Darstellungoptionen.
  3. Im Dropdown-Menü Einstellungen Doormat können Sie festlegen, wie viele Spalten die Doormat haben soll. Wenn Sie sich gegen eine Doormat entscheiden, blenden Sie diese einfach aus.