Header and footer options

Home → Erste Schritte → Header & Footer Optionen

Header & Footer Optionen

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.

  1. Darstellungsoptionen
  2. Menüs bearbeiten
    2.1 Header Menü
    2.2 Hauptnavigation
    2.3 Dropdown-Menü
    2.4 Footer Menü
  3. Doormat

1. Anzeige-Optionen

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 Erstellen, Veröffentlichen & Bearbeiten.

Es gibt verschiedene Optionen für Ihre Menüs, die Sie nach Ihren Bedürfnissen konfigurieren können. Navigieren Sie zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Hier scrollen Sie nach unten zu den picturemaxx Design-Einstellungen und wählen die Darstellungsoptionen. 

  • Darstellungsoptionen

     

  • 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. 

    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.

     

  • Screenshot of the picturemaxx Drupal demo page, using the Full Height Header 1

     

  • Screenshot of the picturemaxx Drupal demo page, using the Full-Height Header 2.

     

  • Screenshot of the picturemaxx Drupal demo page, using the Mini Header.

     

  • Screenshot of the picturemaxx Drupal demo page, using the One Row Header.

     

  • Screenshot of the picturemaxx Drupal demo page, using the Logo & Burger Menu for the header.

     

  • Screenshot of the picturemaxx Drupal demo page, using the Small Header.

2. Menüs bearbeiten

Mithilfe der Menüs können Sie die Nutzer effektiv zu den wichtigsten Informationen Ihrer Website führen. Wir unterscheiden unter anderem zwischen Headermenü, die Hauptnavigation, die Doormat und dem Footermenü. 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. 

  • ... auf unserer Demo Seite template.cms.picturemaxx.com.

    Edit Menus

     

  • Main navigation

     

  • Headermenu

     

  • Footer Menu

     

2.1 Header Menü

Navigieren Sie zu Struktur → Menüs→ Header-Menü und beginnen Sie mit der Erstellung Ihres Header Menüs. Es 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. 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.

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

Link zu Header Menü hinzufügen

  • Link hinzufügen

     

  • 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.

    Beschreibung
    Der Text, der angezeigt wird, wenn man den Mauszeiger über den Menülink bewegt.

    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.

    Attribute - Anzeige Optionen
    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 - Ziel
    Sie können ein Ziel für die verwiesene Seite angeben: gleiche Seite oder neue Seite.

    Icon - 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

    Icon - Icon Gewichtung

    Icon - Icon Breite

    Icon - Text ausblenden
    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. Bei der Arbeit mit Icons empfehlen wir aus Designgründen, Das Feld Text ausblenden auszuwählen.

    Sprache
    Sie können den Menü-Link definieren Sprache.

    Übergeordneter Link
    Name the Parent link, the added link would be subordinated.

    Einfache 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.

    Gewichtung
    Der Wert Weight zeigt Ihnen die Position im Verhältnis zu den anderen Menüpunkten auf derselben Ebene an. Sie können die Position ändern, indem Sie den Wert der Stärke ändern.

2.2 Hauptnavigation

Die Hauptnavigation erscheint immer in der oberen Mitte Ihrer Website. Als besondere Funktion können Sie ein Drop-Down-Menü erstellen (Siehe 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ü. 

2.3 Dropdown-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 ändern. Dazu können Sie die Menüpunkte einfach per Drag'n'Drop nach oben oder unten verschieben oder die Ansicht auf Zeilenreihenfolge anzeigen ändern.

  • Mit der Spalte Gewichtung können Sie die Menüpunkte auf der gleichen Ebene verschieben, indem Sie den Wert ändern. Die Menüpunkte erscheinen in absteigender Reihenfolge. Durch Änderung der Gewichtung können Sie die Position der Items ändern. Wenn Sie fertig sind, klicken Sie auf Zeilenreihenfolge ausblenden um zur ursprünglichen Ansicht zurückzukehren.

    Das Verschieben eines Menüpunkts auf eine niedrigere Ebene innerhalb der Menühierarchie ist ganz einfach. Sehen Sie sich das folgende Video an, um zu erfahren, wie Sie Positionen innerhalb der Menüstruktur zuweisen können.

     

    Zeilenreihenfolge ausblenden

     

2.4 Footer-Menü

Um Links zu diesem Menü hinzuzufügen, navigieren Sie bitte zu Struktur → Menüs → Footer-Menü. 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. 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. 

3. Doormat

Die Doormat bietet eine Übersicht über alle Menüpunkte Ihrer Website, die sich am unteren Rand jeder Seite befinden. Gehen Sie zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Scrollen Sie nach unten zu den picturemaxx Theme-Einstellungen und wählen Sie Anzeigeoptionen. Hier können Sie festlegen, wie viele Spalten der Doormat haben soll. Wenn Sie sich gegen eine Fußmatte entscheiden, blenden Sie diese einfach aus.

  • Bildschirmfoto der picturemaxx Design-Einstellungen, mit besonderer Hervorhebung der Einstellungen für die Doormat.

     

Vor der Veröffentlichung der Website:

  • Klicken Sie auf Vorschau um sicherzustellen, dass alle Änderungen wie erwartet aussehen. 
  • Klicken Sie Zurück zum Bearbeiten des Inhalts
  • Wenn Änderungen auf Ihrer Website sichtbar sein sollen, müssen Sie das Häkchen bei Inhalt ist live (veröffentlicht) setzen.
  • Klicken Sie auf Speichern. Der Inhalt wird gespeichert und ist auf der Seite Inhalt zu finden.