Wie man die Header einer Seite anpassen

Die Kopfzeile ist die Hauptnavigationsleiste Ihrer Website. Sie spielt eine wichtige Rolle dabei, die wichtigsten Seiten oder Bereiche Ihrer Website hervorzuheben und für Besucher leicht zugänglich zu machen.

In dieser kurzen Anleitung erfahren Sie, wie Sie Ihre Kopfzeile anpassen können.

So passen Sie den Inhalt in der Kopfzeile an

1. Gehen Sie zum Site Admin > Website Builder und klicken Sie auf die Schaltfläche „Website bearbeiten“.
   

   

2. Klicken Sie auf den Hintergrund der Kopfzeile (nicht auf das Logo oder das Navigationsmenü). Das Menü „Kopfzeile bearbeiten“ erscheint rechts. Dort können Sie verschiedene Elemente und Einstellungen im Bereich der Kopfzeile anpassen.

Im Tab „Allgemein“ können Sie folgende Einstellungen anpassen:

• Formatierung der Kopfzeile — Wählen Sie eine der verfügbaren Layout-Optionen für die Kopfzeile. „Zentriert“, „Links“ und „Rechts“ steuern nur die Position des Navigationsmenüs, während „Logo oben“ das Logo über dem Navigationsmenü platziert. Wenn Sie einen E-Commerce-Plan haben, sehen Sie außerdem die Layout-Option „Große Suche“, die eine auffällige Suchleiste in der Kopfzeile anzeigt.
• Fixierte Kopfzeile — Aktivieren Sie „Kopfzeile fixieren“, um die Kopfzeile beim Scrollen am oberen Rand der Seite zu halten.
• Favicon — Laden Sie Ihr Favicon hoch, um Ihr Markenicon in Browser-Tabs und Lesezeichen anzuzeigen.

Um festzulegen, welche Komponenten in der Kopfzeile angezeigt werden, wählen Sie den Tab „Komponenten“. Sie können folgende Optionen aktivieren oder deaktivieren:

• „Obere Leiste anzeigen“, um eine Leiste über der Kopfzeile einzublenden, in der Sie Ankündigungen, Call-to-Action-Buttons und Social-Media-Symbole platzieren können.
• „Logo anzeigen“, um festzulegen, ob Ihr Logo angezeigt wird.

Um die Farbe der Kopfzeile anzupassen, wählen Sie den Tab „Design“ und entscheiden Sie sich für eine der vordefinierten Farbpaletten.

Sie können auch „Transparente Kopfzeile“ aktivieren, um den Hintergrund der Kopfzeile transparent zu machen, sodass Ihr Hero-Bereich oder oberster Inhalt dahinter sichtbar wird.

So passen Sie das Logo in der Kopfzeile an

1. Wählen Sie das Logo aus. Ein Menü mit Logo-Einstellungen erscheint, in dem Sie:

• Ihr Logo als „Bild“ oder als „Text“ anzeigen lassen können.
• Wenn Sie „Bild“ wählen, können Sie Ihr Website-Logo hochladen und die Logo-Skalierung anpassen.
• Alternativ können Sie „Text“ wählen. In diesem Fall können Sie den Website-Titel festlegen sowie den Schriftstil und die Logo-Skalierung auswählen.

So passen Sie das Navigationsmenü in der Kopfzeile an

1. Um den Menütyp zu bearbeiten, klicken Sie auf den Hintergrund des Menüs (nicht auf das Logo oder die Kopfzeile). Das Pop-up „Menütyp bearbeiten“ erscheint. Hier können Sie zwischen einem „Mega-Menü“ (über die gesamte Bildschirmbreite) und einem „Dropdown-Menü“ (einfaches Aufklappmenü unter dem ausgewählten Element) wählen. Sie können auch „Menü-Erweiterungssymbol anzeigen“ aktivieren, um einen Pfeil bei Elementen mit Untermenüs anzuzeigen.
   

   

2. Um den Inhalt Ihres Website-Menüs zu verwalten, öffnen Sie den Tab „Navigation“, indem Sie im linken Menü „Nav“ auswählen. Hier können Sie Menüelemente hinzufügen, bearbeiten oder löschen, per Drag & Drop neu anordnen und bis zu drei Ebenen verschachteln, um Dropdown-Menüs zu erstellen.
3. Um ein neues Menüelement hinzuzufügen, klicken Sie auf „+ ELEMENT HINZUFÜGEN“.
   

   

4. Um das Element in der Kopfzeile anzuzeigen, wählen Sie im Dropdown-Menü „Position“ die Option „Kopfzeile“.
   

   

5. Wählen Sie im Dropdown-Menü einen Link-Typ aus. Sie können zwischen „Seite“, „Externer Link“, „Bezeichnung“, „Produkt“, „Kategorie“ oder „Marke“ wählen.

6. Geben Sie die Menübezeichnung ein, die im Menü der Kopfzeile angezeigt wird.
7. Bestätigen Sie das Element, indem Sie auf „Speichern“ klicken.
8. Sie können auch Elemente aus der Menüliste in „Navigation“ löschen. Bewegen Sie dazu den Mauszeiger über das Element, klicken Sie auf ⋮ und dann auf „Löschen“. Bestätigen Sie im folgenden Pop-up-Fenster mit „Bestätigen“.
   

   

9. Sie können Menüelemente per Drag & Drop neu anordnen. Außerdem können Sie Elemente bis zu drei Ebenen tief verschachteln, um Dropdown-Menüs zu erstellen und Ihre Navigation besser zu strukturieren.
   

   

Die Header in SiteGround E-Commerce anpassen

Die Anpassung der Kopfzeile einer E-Commerce-Website erfolgt genauso wie im Website Builder. Der einzige Unterschied besteht darin, dass einige zusätzliche Funktionen speziell für Online-Shops verfügbar sind.Die Anpassung der Kopfzeile einer E-Commerce-Website erfolgt genauso wie im Website Builder. Der einzige Unterschied besteht darin, dass einige zusätzliche Funktionen speziell für Online-Shops verfügbar sind.

Den Inhalt der Header anpassen

E-Commerce-Websites bieten einige zusätzliche Komponentenoptionen, die für Websites im Website Builder nicht verfügbar sind. Einige dieser Optionen stehen ausschließlich in den Plänen „Grow” und „Scale” zur Verfügung.

• „Suchsymbol anzeigen“, um ein Suchsymbol in der Kopfzeile einzublenden, mit dem Besucher Ihre Website durchsuchen können.
• „Wunschliste ausblenden, wenn leer“, um das Wunschlistensymbol automatisch auszublenden, wenn noch keine Elemente hinzugefügt wurden.
• „Warenkorb ausblenden, wenn leer“, um das Warenkorbsymbol automatisch auszublenden, wenn noch keine Elemente hinzugefügt wurden.
• „Konto anzeigen“, um das Konto-/Anmeldesymbol in der Kopfzeile anzuzeigen, sodass sich Kunden anmelden oder auf ihr Konto zugreifen können.

Das Menü der Kopfzeile anpassen

Auch die Anpassung des Kopfzeilenmenüs einer E-Commerce-Website ist nahezu identisch mit der im Website Builder. Allerdings stehen Ihnen zusätzliche Linktypen zur Verfügung, um die Angebote Ihres Shops anzuzeigen: Einzelnes Produkt, Kategorie und Marke.