EN
Suche ...

Website-Header – Design

Das Kopfzeile enthält den ersten Satz sichtbarer Elemente, wenn Ihre Website geladen wird. Sie können die Elemente wie Logo, Navigationsmenü und soziale Symbole so anordnen, wie sie in der Kopfzeile angezeigt werden sollen.

In diesem Artikel:

Sie können den Header-Stil (für Desktop und Mobilgeräte) über verwalten Technologie (1) Abschnitt.

Sobald Sie sich im Abschnitt „Design“ befinden, klicken Sie auf Kopfzeile (2) Registerkarte.

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

  1. 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. 
  2. 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.
  3. Vertikale Polsterung – Fügen Sie Ihrem Website-Header (angegeben in vh) Leerzeichen (oben und unten) hinzu. WEITERE INFORMATIONEN .
  4. 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). 
  5. Klebrige Navigation – Aktivieren oder deaktivieren Sie die Sticky-Navigation im Falle von SScrollen Sie mit der Website Kopfposition. 
  6. Sticky Menu – Legen Sie die Position des Sticky-Menüs fest, wenn die Seite nach links oder in die Mitte des Bildschirms gescrollt wird.

Hinweis

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:

Werfen Sie einen Blick auf ein Header auf einer Live-Site.

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

  1. Rand: Aktivieren oder deaktivieren Sie den Rahmen für die Kopfzeile.
  2. Dicke: Geben Sie die Breite der Randlinien für die Kopfzeile an.
  3. Position: Legen Sie die Position des Kopfzeilenrands fest. Sie haben vier Optionen: Alle Seiten, Oben und Unten, Nur Oben und Nur Unten.

Kopfzeile – Pille

Das Pillenförmiger Header in Pixpa verleiht Ihrem Website-Header ein elegantes, modernes Aussehen mit abgerundete Ecken und Flexibilität bei der Abstandsgestaltung. Dieses Design ist ideal für Kreative und Profis, die ihre Kopfzeile optisch unverwechselbar und stilvoll gestalten möchten.

Sie können diesen Stil anwenden auf beliebiges Kopfzeilenlayout, sodass Sie bei der Gestaltung verschiedener Header-Typen volle Freiheit haben.

  1. Kopfzeile – Pille: Aktivieren Sie den Umschalter „Kopfzeile – Pille“, um die Pillenformatierung für Ihre Kopfzeile zu aktivieren.
  2. Eckenradius: Passen Sie die Rundung der Kopfzeilenecken mit dem Schieberegler oder Feld „Eckenradius“ an. Höhere Werte machen die Ecken runder.
  3. Obere Polsterung: Geben Sie den Abstand über dem Inhalt in der Pillenüberschrift an, um den vertikalen Abstand zu steuern.
  4. Bodenpolsterung: Definieren Sie den Platz unter dem Inhalt, um ein ausgewogenes Erscheinungsbild zu gewährleisten.
  5. 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.

  1. 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.
  2. Vertikale Polsterung – Speichern Vertikaler Raum (oben und unten) zum Header Ihrer Website auf Mobilgeräten (angegeben in vh).
  3. 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.

Stellen Sie sicher, dass Sie auf klicken Veröffentlichen Klicken Sie nach dem Vornehmen von Änderungen auf die Schaltfläche, um sicherzustellen, dass die Änderungen auf Ihrer Website verfügbar sind.

Sehen Sie sich verschiedene mobile Header-Layouts an 

Hinweis

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

    1. Normaler Header
    2. Zweispaltige Überschrift
    3. Suchbasierter Header

 

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.

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

  1. 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.
  2. 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. 
  3. 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.
  4. 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.
  5. 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.
  6. 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ß.
Stichwort:

Können Sie nicht finden, wonach Sie suchen?

Wenden Sie sich an einen Pixpa-Experten.

Kontakt
Pixpa Studio wurde komplett überarbeitet. Wir aktualisieren derzeit alle Screenshots der Hilfeartikel.