Verkleinerter Header

Übersicht

Der verkleinerte Header ist eine kleinere Version des Website-Headers. So können Sie in geringerer Größe wichtige Hinweise zur Navigation in fixierter Position anzeigen, ohne dass Benutzer beim Scrollen auf der Seite abgelenkt werden. Die Funktion entspricht der eines angehefteten Headers. Die Größe der Logos und anderen Widgets im Header wird reduziert. Dieses Feature ist besonders nützlich auf Websites mit großen Headern und Websites mit langen Abschnitten zum Scrollen. 

shrinkingheader.gif

Anleitung

Öffnen Sie den Designeditor für den Header, indem Sie auf das Headersymbol klicken und „Design bearbeiten“ auswählen.

Aktivieren Sie den verkleinerten Header über die Schaltfläche zum Überprüfen.

shrinkingheader2.png

Was passiert bei Aktivierung des verkleinerten Headers?

Aktionen bei Aktivierung des verkleinerten Headers:

  • Die Website scrollt ein wenig nach unten, um die Wirkung des verkleinerten Headers anzuzeigen.
  • Die Anheftfunktion wird automatisch auf den Header angewendet.
  • Durch die Abstandseinstellungen des Headers werden die Abstände und Ränder oben und unten auf 0 geändert. Beachten Sie, dass dadurch nur die Abstände und Ränder des Headers, nicht jedoch die der Zeilen des Headers geändert werden. 
  • Bilder im Header werden auf die Einstellung des Reglers für die prozentuale Logogröße verkleinert (Standardeinstellung: 66 %). Beachten Sie, dass alle Bilder im Header entsprechend der Logogröße verkleinert werden.
  • Änderungen des Header-Layouts wirken sich nicht auf die Einstellungen des verkleinerten Headers aus.
  • Nicht alle Widgets sind kompatibel und werden im verkleinerten Header angezeigt. Es werden nur die folgenden Widgets im verkleinerten Header angezeigt:
    • Navigation
    • Widget für mehrere Sprachen
    • Social-Media-Symbole
    • Click-to-Call-Schaltfläche
    • OpenTable-Schaltfläche
    • Click-to-Email-Schaltfläche
    • vCita
    • PayPal-Schaltfläche
    • „Gefällt mir“-Schaltfläche von Facebook
    • Bilder und Logos
    • Warenkorb
    • Absatz-Widgets
    • Titel-Widgets
    • Schaltflächen

Anpassungsoptionen für das Design

Im Designeditor können Sie folgende Einstellungen ändern, um den verkleinerten Header anzupassen:

  • Nur Navigationszeile anzeigen – bei verkleinertem Header wird nur die Zeile mit der Navigation angezeigt. Diese Funktion kann nur verwendet werden, wenn der Header mehr als eine Zeile umfasst.
  • Logogröße – legt die Größe fest, auf die das Logo oder Bild beim Verkleinern des Headers reduziert wird (Standardwert: 66 %)
  • Hintergrundfarbe – ändert die Hintergrundfarbe des verkleinerten Headers. Beachten Sie, dass durch die Zeilenhintergrundfarbe die Hintergrundfarbe des verkleinerten Headers überschrieben wird. 
  • Header-Abstand – ermöglicht dem Benutzer, die oberen und unteren Abstände des verkleinerten Headers anzupassen. Sie können den Header-Abstand gerätespezifisch festlegen. 

Wie funktioniert ein verkleinerter Header?

Wenn der Benutzer über die Höhe des Headers hinaus gescrollt hat, wird dieser verkleinert. Dies hat folgende Effekte:

  • Wenn Spalten ein sichtbares Widget enthalten, wird dieses vertikal zentriert in der Spalte positioniert. Die oberen und unteren Abstände und Ränder werden auf 0 festgelegt.
  • Wenn Spalten mehrere sichtbare Widgets enthalten, werden diese nicht vertikal ausgerichtet. Die oberen und unteren Abstände und Ränder werden auf 10 px festgelegt.
  • Wenn leere Zeilen mit Spalten vorhanden sind, nehmen die Spalten den gesamten Raum der Zeile ein. 
  • Für die Verarbeitung von Vorlagen mit einem Wert für die Mindesthöhe im Header wird die Mindesthöhe des Headers auf „automatisch“ festgelegt.

Überlegungen

Kann ich in verkleinerten Headern Widgets bearbeiten?

Nein. Sie müssen an den Anfang der Seite scrollen, um den Header zu bearbeiten.

In welchen Ansichten und Einstellungen ist der verkleinerte Header verfügbar?

Der verkleinerte Header ist in der Desktop- und der Tablet-Ansicht verfügbar. Verkleinerte Header lassen sich nur umschalten, wenn der Header in eine Zeile umgewandelt wurde. Wenn der Header keine Zeile ist und die Vorlage einen festen Header hat, ist die Option für den verkleinerten Header nicht verfügbar.

Ändert der verkleinerte Header die Abstände und Ränder der Zeilen innerhalb des Headers?

Nein, die Funktion „verkleinerter Header“ verkleinert den Header, indem die oberen und unteren Abstände und Ränder auf 0 festgelegt werden. Wurden jedoch innerhalb des Headers Abstände für die Zeilen festgelegt, werden die Abstände und Ränder dieser Zeilen nicht geändert. 

Setzen die Designeigenschaften des verkleinerten Headers die Zeileneigenschaften (z. B. Hintergrundfarbe) außer Kraft? 

Nein, die Eigenschaften des Zeilendesigns setzen die Eigenschaften des verkleinerten Headers außer Kraft. Wenn Sie beispielsweise im Header einen Zeilenhintergrund einstellen, wird dieser über dem Hintergrund des verkleinerten Headers angezeigt. 

Was passiert, wenn im Header ein Widget vorhanden ist, das im verkleinerten Header angezeigt wird?

Wenn Sie im Header ein Widget platziert haben, das nicht mit dem verkleinerten Header kompatibel ist, wird beim Anwenden des verkleinerten Headers anstelle des Widgets eine leere Spalte angezeigt. 

Werden im verkleinerten Header leere Zeilen angezeigt?

Ja. Selbst wenn Sie das Widget aus einer Zeile entfernen, um eine Leerzeile zu erstellen, bleiben die Abstände und Ränder der Zeile erhalten undwerden im verkleinerten Header angezeigt.

Was passiert, wenn ich ein mittleres Logo zur Navigation hinzufüge oder das Logo ändere?

Das mittleres Logo wird genau wie das normale Logo verkleinert. Sie müssen jedoch die Logogröße neu definieren, wenn Sie das Logo ändern.

Werden Widgets an der Zeile oder an der Spalte ausgerichtet?

Widgets werden vertikal an der Spaltenmitte ausgerichtet.

Mein verkleinerter Header wird nicht angezeigt! Was ist passiert?

Wenn die Seitenlänge der Größe des Viewports entspricht, wird der verkleinerte Header nicht angezeigt. Ihre Website muss genügend Zeilen zum Scrollen aufweisen, damit der verkleinerte Header durch Abwärtsscrollen ausgelöst werden kann. Wenn die Seite nur eine Zeile enthält, kann die Website nicht scrollen und der verkleinerte Header wird nicht ausgelöst.