Möchten Sie einen Header erstellen, der beim Laden der Seite kleiner wird? Auch wenn Sie diesen Effekt nicht verwenden möchten, sollten Sie darüber nachdenken, ob er eine gute Ergänzung für Ihre Website wäre.
Hier zeigen wir Ihnen genau, wie Sie Elementor Pro verwenden, um den Header Ihrer WordPress-Site zu verkleinern. Mit Hilfe von benutzerdefiniertem CSS zeigen wir Ihnen genau, was Sie tun müssen, um die Arbeit zu erledigen.
Was ist ein schrumpfender Header?
Ein schrumpfender Header ist genau derselbe Header, den Sie sehen, wenn eine Website angezeigt wird, aber er wird etwas kleiner, wenn Sie mit dem Scrollen beginnen. Zu Beginn gibt es einen standardmäßigen Top-Header. Die Kopfzeile wird "schrumpfen", wenn der Benutzer die Seite nach unten scrollt, und Sie können anpassen, wie stark sie schrumpft und wie durchscheinend sie wird.
Obwohl es kleiner wird, ist die Kopfzeile immer noch da, wenn Sie die Seite nach unten scrollen. Es gibt verschiedene Optionen, wie z. B. den Header vollständig zu vergraben und ihn nur anzuzeigen, wenn der Benutzer wieder nach oben scrollt.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangenVorteile eines schrumpfenden Headers
Wenn Sie einen schrumpfenden Header verwenden, haben Sie mehr Platz für Ihren Inhalt. Es gibt weniger Konkurrenz um Aufmerksamkeit durch den vollständigen Header, was bedeutet, dass Sie sich auf Ihre Hauptinhalte konzentrieren können.
Wenn Sie die Kopfzeile vollständig ausblenden, während ein Benutzer nach unten scrollt, können Sie Benutzern nicht jederzeit Zugriff auf Ihr gesamtes Navigationsmenü gewähren.
Dies gibt Ihnen in gewissem Maße zusätzlichen Platz für Ihre Inhalte, während Sie dennoch Ihr vollständiges Menü anzeigen können. Um das Ganze abzurunden, ist dieser Effekt ästhetisch ansprechend und fügt den Besuchern Ihrer Website beim Erkunden ein kleines zusätzliches visuelles Bonbon hinzu.
So erstellen Sie einen schrumpfenden Header
Wenn Sie Ihren vorgefertigten Header fertig haben, können Sie loslegen. Der Rest des Beitrags führt Sie zum Verkleinern. Sie werden eine Menge benutzerdefiniertes CSS benötigen. Wir geben Ihnen jedoch den benötigten Code und zeigen Ihnen, wie Sie ihn an Ihre Website anpassen können.
Mit Elementor bearbeiten
Bearbeiten Sie zunächst die Kopfzeilenvorlage mit Elementor Theme Builder.
Um Ihre Header-Vorlage mit Elementor zu bearbeiten, gehen Sie in Ihrem WordPress-Dashboard zu Templates Theme Builder und wählen Sie Edit With Elementor.
Basic CSS Housekeeping
Sie müssen Ihren Header ein wenig aufräumen, bevor Sie den CSS-Code anwenden, den Sie in den nächsten Abschnitten sehen werden.
Der erste Schritt besteht darin, auf die Einstellungen des Header-Bereichs zuzugreifen. Setzen Sie das HTML-Tag-Dropdown-Menü auf die Kopfzeile auf der Registerkarte „Layout“.
Es sollte keine Mindesthöhe geben und die vertikale Ausrichtung sollte im Layout-Tab auf Mitte eingestellt sein.
Wechseln Sie zur Registerkarte Erweitert und ändern Sie die CSS-Klasse des Header-Abschnitts in stick-header.
Öffnen Sie schließlich das Bild-Widget mit Ihrem Logo und wählen Sie die Option Erweitert aus dem Dropdown-Menü. Geben Sie dann im Bereich CSS-Klassen Ihres Logo-Bildes logo ein:
Bewegungseffekte, um Ihren Header Stick zu machen
Die Bewegungseffektfunktion von Elementor kann verwendet werden, um Ihre Kopfzeile oben auf der Seite zu halten, während die Betrachter nach unten scrollen.
Sie können auf die Kopfzeileneinstellungen des Abschnitts zugreifen, indem Sie darauf klicken. Klicken Sie anschließend auf die Seite Erweitert und sehen Sie sich die Optionen für Bewegungseffekte an
- Angenommen, im Dropdown-Menü ist unter „Sticky“ die Option „Oben“ ausgewählt.
- Bitte entfernen Sie alle anderen Geräte, die nicht im Feld „Sticky On“ aufgeführt sind.
- Der Effects Offset sollte auf 90 eingestellt werden (die Höhe Ihres Headers).
Benutzerdefinierte CSS
Der letzte Schritt, bevor wir fertig sind, ist das Hinzufügen des benutzerdefinierten CSS-Codes. Hier ist der grundlegende Code, den Sie verwenden werden. In den nächsten Abschnitten erfahren Sie, wie Sie es anpassen können:
Der folgende CSS-Code wird:
- Um auf das Hamburger-Menü zuzugreifen, gehen Sie in die obere linke Ecke der Elementor-Oberfläche und klicken Sie darauf.
- Der Themenstil kann aus dem Dropdown-Menü „Globaler Stil“ ausgewählt werden.
- Wählen Sie Benutzerdefiniertes CSS (es wird blau statt des "normalen" Element oder rot sein, sobald die Benutzeroberfläche des Designstils geöffnet wurde)
/***
* class: .sticky-header
*/
header.sticky-header {
--header-height: 100px;
--shrink-header-to: 0.6;
--transition: .45s cubic-bezier(.4, 0, .2, 1);
background-color: rgba(244, 245, 248, 1);
transition: background-color var(--transition),
backdrop-filter var(--transition),
box-shadow var(--transition);
}
/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8);
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
header.sticky-header {
--header-height: 70px;
}
}
/***
* class: .logo
*/
header.sticky-header .logo img {
transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
transform: scale(.8);
}
CSS anpassen
Dieses CSS kann an Ihre speziellen Anforderungen angepasst werden, also gehen wir jetzt darauf ein, wie das geht. Die Verwendung eines Code-Editors wie Visual Studio Code oder Atom wird empfohlen, anstatt CSS direkt in der Elementor-Oberfläche zu bearbeiten. Windows-, Mac- und Linux-Benutzer können alle von diesen Open-Source-Editoren profitieren.
Benutzerdefinierte CSS-Eigenschaften sind unser bevorzugtes Werkzeug (oder CSS-Variablen). Mit diesen Steuerelementen können Sie den abnehmenden Header-Effekt feinabstimmen. Wenn Sie eine einzelne Änderung an einer benutzerdefinierten Eigenschaft vornehmen, wird der gesamte CSS-Code aktualisiert, um diese Änderung widerzuspiegeln.
Es gibt insgesamt fünf Faktoren, die Sie anpassen können. Sie müssen sie nicht einmal ändern, wenn Sie nicht wollen, – lassen Sie sie einfach so, wie sie sind, wenn Ihnen ihre Funktionsweise gefällt!
Um Ihnen zu helfen, haben wir die fünf CSS-Variablen und ihre Standardwerte unten eingefügt:
- –Header-Höhe: 90px;
- – Deckkraft: 0,90;
- –Header verkleinern auf: 0,80;
- –Sticky-Hintergrundfarbe: #0e41e5;
- –-Übergang: 300 ms Ease-in-out;
Wenn Sie sich unseren Beispielcode ansehen, werden Sie feststellen, dass wir einige benutzerdefinierte Eigenschaften anstelle des doppelten Bindestrichs „–“ eingefügt haben. Nach dem Doppelpunkt und vor dem Semikolon müssen Sie nur noch eine kleine Änderung vornehmen.
Wenn Sie beispielsweise die Kopfzeilenhöhe auf 100 Pixel ändern, würde dies vorher und nachher so aussehen:
- Vorher : –Kopfzeilenhöhe: 90px;
- Nachher : –Kopfzeilenhöhe: 100px;
Lassen Sie uns diese Variablen kennenlernen.
Klebrige Hintergrundfarbe (--sticky-background-color)
Die Hintergrundfarbe des "geschrumpften" Headers, der angezeigt wird, wenn Besucher nach unten scrollen, wird von der Eigenschaft Sticky Background Color gesteuert. Das Ändern der Farbe muss nicht mit der Farbe Ihres Headers übereinstimmen, wenn Sie dies nicht bevorzugen.
In der Vorlage Digitale Agentur beispielsweise hat der Header-Hintergrund zunächst einen Farbverlauf. Die Farbe der Kopfzeile wechselt zu einem durchgehenden Blau, wenn Besucher nach unten scrollen, und die Kopfzeile wird kleiner (Sie können dies im Beispielvideo von Anfang an sehen).
Kopfzeilenhöhe (--header-height)
In Elementor bestimmt das Attribut Kopfzeilenhöhe die Höhe Ihrer Kopfzeile – es muss mit der Höhe Ihres Kopfzeilenabschnitts übereinstimmen. Das Festlegen auf 90 Pixel war ein guter Anfangspunkt in der Anweisung.
Wenn Sie sich jedoch dazu entschließen, die Höhe zu ändern, stellen Sie sicher, dass Sie dies sowohl in der CSS-Eigenschaft als auch in den Einstellungen des Kopfbereichs tun.
Um Probleme mit dem Schrumpfeffekt zu vermeiden, befürworten wir keine Header-Höhen von mehr als 100Pixel.
Deckkraft (--opacity)
Der Grad, zu dem Ihre abnehmende Kopfzeile durchscheinend ist, wird durch die Opacity-Eigenschaft gesteuert:
- 0 bedeutet, dass der Header unsichtbar ist.
- 1 bedeutet, dass überhaupt keine Kopfzeile sichtbar ist (keine Transparenz)
Die Deckkraft ist in unserem Beispielcode auf 0,9 eingestellt, wodurch sie fast vollständig undurchsichtig wird. Diese Nummer kann Ihren Anforderungen entsprechend geändert werden. Reduzieren Sie den Wert auf Null, um ihn deutlicher zu machen.
Header verkleinern auf (--shrink-header-to)
Wenn ein Besucher nach unten scrollt, bestimmt das Shrink Me-Attribut, wie stark Ihre Kopfzeile und Ihr Logo verkleinert werden. Das bedeutet, dass Ihre Kopfzeile und Ihr Logo beispielsweise auf 800 x 025 ihrer ursprünglichen Größe verkleinert werden.
Übergang (--Übergang)
Wenn das Übergangsattribut auf „geschrumpft“ gesetzt ist, wird der Header von seiner ursprünglichen Größe auf diesen Wert verkleinert.
Es ist am besten, etwas so zu lassen, wie es ist, aber Sie haben die Möglichkeit, es bei Bedarf zu ändern.
Das aktualisierte CSS für den schrumpfenden Header lautet also -
header.sticky-header {
--header-height: 100px; /* Set your own header height */
--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
background-color: rgba(244, 245, 248, 1); /* Set your own background color */
transition: background-color var(--transition-timing),
backdrop-filter var(--transition-timing),
box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
width: auto;
}Endgedanken
Es ist sehr einfach, mit Elementor zu arbeiten, da es zu einem der gefragtesten Seitenersteller für unzählige Webentwickler auf der ganzen Welt geworden ist. Ein solches interaktives Design bringt mehr Besucher auf Ihre Website. Wenn Sie Fragen haben, können Sie diese gerne stellen. Wir haben eine große Anzahl von Elementor-Tutorials auf unserer Website, sehen Sie sich diese an und lassen Sie uns wissen, was wir als Nächstes behandeln sollen.
