Der Header enthält die ersten Elemente, die beim Laden Ihrer Website sichtbar sind. Sie können die Elemente wie Logo, Navigationsmenü und Social-Media-Symbole im Header nach Ihren Wünschen anordnen.
In diesem Artikel:
- Kopfzeile für Desktop
- Kopfzeile – Rahmen
- Kopfzeile – Pille
- Header für Mobilgeräte
- Arten von Headern
- Header-Elemente
Sie können das Header-Styling (sowohl für Desktop- als auch für Mobilgeräte) im Abschnitt Design (1) verwalten.
Sobald Sie sich im Designbereich befinden, klicken Sie auf die Registerkarte Kopfzeile (2).
Alternativ können Sie auch die Suchfunktion des Studios nutzen.
- Enter Kopfzeile (1) in der Suchleiste.
- Klicken Sie in den zugehörigen Ergebnissen auf die Design – Website-Header Option 2).
Kopfzeile für Desktop
- Header-Layout – Überprüfen Sie das aktuell angewendete Header-Layout auf die Desktop Ausführung. Klicken Sie auf die Layout ändern Schaltfläche, um aus den verfügbaren Header-Layout-Optionen auszuwählen und auf Ihre Website anzuwenden.
Wir bieten zwei Arten von Header-Layouts an – Top-Header-Layouts und zweispaltige Header-Layouts. Die zweispaltigen Header-Layouts existieren in Themen wie Burst und Isle. - Länge – Geben Sie die Kopfzeilenbreite an als Volle Breite or Site-Breite.
'Gesamtbreite' zeigt die Kopfzeile über die gesamte Breite an, ohne einen Rand zu hinterlassen.
'Seitenbreite' kann in angegeben werden Technologie Sektion. Hier können Sie eine feste Breite angeben.
Es zeigt den Header an, indem es sich an die angegebene feste Breite hält. Mehr wissen. - Vertikale Polsterung – Fügen Sie Ihrem Website-Header (angegeben in vh) Leerzeichen (oben und unten) hinzu. WEITERE INFORMATIONEN .
- Verhalten – Die Position Ihres Desktop-Headers kann eingestellt werden Ffixiert (Hier wird die Kopfzeile oben fixiert, dh auch wenn die Seite scrollt, wäre die Kopfzeile sichtbar) oder Scrollen Sie mit der Website (hier wird die Kopfzeile zusammen mit der Seite gescrollt).
- Klebrige Navigation – Aktivieren oder deaktivieren Sie die Sticky-Navigation im Falle von SScrollen Sie mit der Website Kopfposition.
- Sticky Menu – Legen Sie die Position des Sticky-Menüs fest, wenn die Seite nach links oder in die Mitte des Bildschirms gescrollt wird.
Bei der Sticky-Navigation wird die Kopfzeile angezeigt, nachdem der erste Abschnitt zur Hälfte auf dem Bildschirm gescrollt wurde
Schauen Sie sich das Header-Padding in Aktion an:
Schauen Sie sich den Header einer Live-Website an.
Sehen Sie sich verschiedene Desktop-Header-Layouts an
Sehen Sie sich verschiedene zweispaltige Desktop-Header-Layouts an
Suchbasierte Header-Layouts, die sich auf die Website-Suche konzentrieren
Kopfzeile – Rahmen
- Rand: Aktivieren oder deaktivieren Sie den Rahmen für die Kopfzeile.
- Dicke: Geben Sie die Breite der Randlinien für die Kopfzeile an.
- Position: Legen Sie die Position des Kopfzeilenrands fest. Sie haben vier Optionen: Alle Seiten, Oben und Unten, Nur Oben und Nur Unten.
Kopfzeile – Pille
Der pillenförmige Header von Pixpa verleiht Ihrer Website-Kopfzeile mit abgerundeten Ecken und flexibler Abstände ein elegantes, modernes Aussehen. Dieses Design ist ideal für Kreative und professionelle Anwender, die ihre Kopfzeile optisch unverwechselbar und stilvoll gestalten möchten.
Sie können diesen Stil auf jedes Header-Layout anwenden und haben somit volle Gestaltungsfreiheit für verschiedene Header-Typen.
- Kopfzeile – Pille: Aktivieren Sie den Umschalter „Kopfzeile – Pille“, um die Pillenformatierung für Ihre Kopfzeile zu aktivieren.
- Eckenradius: Passen Sie die Rundung der Kopfzeilenecken mit dem Schieberegler oder Feld „Eckenradius“ an. Höhere Werte machen die Ecken runder.
- Obere Polsterung: Geben Sie den Abstand über dem Inhalt in der Pillenüberschrift an, um den vertikalen Abstand zu steuern.
- Bodenpolsterung: Definieren Sie den Platz unter dem Inhalt, um ein ausgewogenes Erscheinungsbild zu gewährleisten.
- Kompakte Breite: Hier können Sie auswählen, wie breit Ihre Pillenüberschrift angezeigt wird:
- Gesamtbreite: Streckt die Kopfzeile über die gesamte Bildschirmbreite aus.
- Seitenbreite: Richtet die Kopfzeile an der Gesamtbreite des Site-Inhalts aus.
- Kompakt: Verkleinert die Kopfzeile zu einem engeren, zentrierten Block – ideal für minimalistische Designs.
Header für Mobilgeräte
Mit diesen Einstellungen können Sie steuern, wie der Header Ihrer Site auf Mobilgeräten angezeigt wird. Dies gewährleistet ein übersichtliches und optimiertes Layout für kleinere Bildschirme.
- Layout – Überprüfen Sie das aktuell angewendete Header-Layout auf die Mobile Ausführung. Klicken Sie auf die Layout ändern Schaltfläche, um aus den verfügbaren Header-Layout-Optionen auszuwählen und auf Ihre Website anzuwenden.
- Vertikale Polsterung – Speichern Vertikaler Raum (oben und unten) zum Header Ihrer Website auf Mobilgeräten (angegeben in vh).
- Mobile Kopfzeile – Geben Sie an, ob die mobile Kopfzeile nur auf Mobilgeräten (bis zu 768 Pixel) angezeigt werden soll oder ob sie auch auf Tablet-Geräten (bis zu 1199 Pixel) angezeigt werden soll.
Vergessen Sie nicht, nach der Änderung auf die Schaltfläche „Veröffentlichen“ zu klicken, um sicherzustellen, dass die Änderungen auf Ihrer Website live geschaltet werden.
Sehen Sie sich verschiedene mobile Header-Layouts an
- Das Punktsymbol im mobilen Header bezieht sich auf die Kundenkonten.
- Es wird nur angezeigt, dass die Option „Kundenkonto“ im Geschäft aktiviert ist. Mehr erfahren.
Arten von Headern
Sie können zwischen vier verschiedenen Header-Typen wählen:
Normaler Header
Das normale Header-Layout zeichnet sich durch ein klares und unkompliziertes Design mit einem Logo, Navigationslinks, sozialen Symbolen und einer horizontal angezeigten Menüschaltfläche aus. Es ist ideal, um ein klassisches und benutzerfreundliches Browsing-Erlebnis zu bieten.
Zweispaltige Überschrift
Das zweispaltige Kopfzeilenlayout unterteilt die Kopfzeile in zwei unterschiedliche Abschnitte und ermöglicht so die Platzierung eines Logos und sozialer Symbole auf der linken oder mittleren Seite und des Navigationsmenüs und anderer Elemente der Kopfzeile auf der rechten Seite als anklickbare Seitenleiste.
Dieses Layout ist perfekt für Websites, die gleichzeitig ihre Marke und wichtige Aktionen hervorheben müssen.
Suchbasierter Header
Das suchbasierte Header-Layout enthält eine Suchleiste, die es Benutzern erleichtert, schnell bestimmte Inhalte zu finden. Dieses Design ist besonders nützlich für inhaltsreiche Websites, bei denen die Suchfunktion im Mittelpunkt steht.
Header-Elemente
- Logo/Site-Titel – Das allererste Element des Website-Headers ist das Website-Logo/der Titel. Legen Sie den Seitentitel fest/laden Sie das Seitenlogo hoch für Ihre Website.
Hinweis: Wenn Sie das Website-Logo nicht hochgeladen haben, wird der Website-Titel in Ihrem Website-Header angezeigt. Wenn Sie beides bereitgestellt haben, wird das Website-Logo in Ihrem Website-Header sichtbar sein. - Menu – Ein weiteres Element des Site-Headers ist das Menü (Menülinks). Du kannst Reihenfolge der Site-Navigationslinks, or Löschen/Ausblenden eines beliebigen Menüpunkts von Ihrer Website.
- Social Icons – Sie können die hinzufügen Social Icons die mit Ihren Social-Media-Profilen verbunden sind, mit Ihrem Website-Header. Sie können eine hochladen Social-Sharing-Bild die als Miniaturansicht verwendet werden, wenn die Website oder eine der Seiten der Website in sozialen Medien geteilt wird. Wählen Sie auch, wo die Social-Media-Symbole würde auf Ihrer Website erscheinen. Die verfügbaren Positionen sind Kopfzeile, Fußzeile, beides oder keine.
- Suchbox - Füge hinzu ein Suchfeld Damit können Ihre Website-Besucher nach beliebigen Inhalten in Produkten (wenn Sie einen Shop auf Ihrer Website aktiviert haben), Bildern, Blog-Beiträgen und Seiten (Galerien, Ordner und andere Seiten) in Ihrem Website-Header suchen.
- Einkaufswagen-Symbol – Fügen Sie ein Floating hinzu Einkaufswagensymbol die leicht zu erreichen und immer sichtbar ist, ohne Ihre Website zu Ihrem Website-Header zu beeinträchtigen.
- Menütaste - Füge hinzu ein Menütaste zu Ihrem Site-Header, dh eine Call-to-Action-Schaltfläche, die zu einer bestimmten URL weiterleitet. Sie können die angeben Label und der URL für die Menütaste. Wählen Sie außerdem die Knopfgröße sein Klein, Mittel oder Groß.