So fügen Sie CSS-Hintergrundfiltereffekte zu einem Sticky Header in Divi . hinzu

Veröffentlicht: 2021-07-21

Das Hinzufügen von CSS-Hintergrundfiltereffekten ist eine unterhaltsame und einzigartige Möglichkeit, das Design eines Sticky-Header-Menüs zu verbessern. Was die CSS-Eigenschaft background-filter so einzigartig macht, ist, dass Sie Filtereffekte auf den Bereich hinter einem Element anwenden können. Dies ist eine perfekte Option für klebrige Kopfzeilen, da das Design Ihrer Seite hinter der Kopfzeile auf magische Weise geändert werden kann, während Sie auf der Seite nach unten scrollen. Möglicherweise haben Sie diesen Effekt auf beliebten Websites wie apple.com gesehen.

In diesem Tutorial zeigen wir Ihnen, wie Sie CSS-Hintergrundfiltereffekte zu einem Sticky-Header in Divi hinzufügen. Zuerst erklären wir den einfachen Prozess des Hinzufügens von Hintergrundfiltereffekten zu einem vorhandenen Header, der 3 einfache Schritte umfasst. Danach werden wir aufschlüsseln, wie Sie den gesamten Header von Grund auf neu erstellen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Beachten Sie die Unschärfe- und Sättigungsfiltereffekte, die beim Scrollen auf die Elemente hinter der Kopfzeile angewendet werden.

Eine einfache Live-Demo dieses Hintergrundfiltereffekts, der einem Header hinzugefügt wurde, finden Sie in diesem Codepen.

Laden Sie die globale Header-Vorlage KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter
Kostenlos herunterladen

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

So laden Sie die Vorlage hoch

Gehe zum Divi Theme Builder

Um die Vorlage hochzuladen, navigieren Sie zum Divi Theme Builder im Backend Ihrer WordPress-Website.

Kopf- und Fußzeilenvorlage für Divis Bushcraft Layout Pack

Globale Standard-Website-Vorlage hochladen

Dann sehen Sie in der oberen rechten Ecke ein Symbol mit zwei Pfeilen. Klicken Sie auf das Symbol.

Kopf- und Fußzeilenvorlage für Divis Bushcraft Layout Pack

Navigieren Sie zum Import-Tab, laden Sie die JSON-Datei hoch, die Sie in diesem Beitrag herunterladen konnten, und klicken Sie auf 'Divi Theme Builder-Vorlagen importieren'.

Kopf- und Fußzeilenvorlage für Divis Bushcraft Layout Pack

Divi Theme Builder-Änderungen speichern

Nachdem Sie die Datei hochgeladen haben, werden Sie eine neue globale Kopf- und Fußzeile in Ihrer Standard-Website-Vorlage bemerken. Speichern Sie die Änderungen im Divi Theme Builder, sobald die Vorlage aktiviert werden soll.

Kopf- und Fußzeilenvorlage für Divis Bushcraft Layout Pack

Kommen wir zum Tutorial, ja?

Hinzufügen von CSS-Hintergrundfiltereffekten zu einem vorhandenen Header

Der einfachste Weg, den Vorgang zu demonstrieren, besteht darin, CSS-Hintergrundfiltereffekte zu einem vorhandenen Header in Divi hinzuzufügen. Eigentlich läuft es auf diese drei einfachen Schritte hinaus:

  1. Fügen Sie dem Kopfbereich eine halbtransparente Hintergrundfarbe hinzu
  2. Fügen Sie dem Header-Bereich das benutzerdefinierte CSS für den Hintergrundfilter hinzu
  3. Fügen Sie dem Header-Abschnitt eine Sticky-Position hinzu

So geht's in Divi.

Kopfzeile im Theme Builder bearbeiten

Navigieren Sie zum Theme Builder und klicken Sie auf , um die vorhandene Header-Vorlage zu bearbeiten.

Fügen Sie dem Abschnitt eine halbtransparente Hintergrundfarbe hinzu

Öffnen Sie die Einstellungen zu dem Abschnitt, der die Kopfmenüelemente enthält. Fügen Sie dann dem Abschnitt eine halbtransparente Hintergrundfarbe hinzu. In diesem Beispiel geben wir dem Abschnitt die folgende Hintergrundfarbe:

  • Hintergrundfarbe: rgba(0,0,0,0.8)

Benutzerdefiniertes CSS für Hintergrundfilter hinzufügen

Als Nächstes können wir die Background-Filter-Effekte (mit der Background-Filter-CSS-Eigenschaft) mit einem benutzerdefinierten CSS-Snippet im Hauptelement des Abschnitts hinzufügen. Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS in das Hauptelement ein: 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Diese Filtereffekte ähneln den in allen Divi-Elementen integrierten Filtereffekten. Der Hauptunterschied besteht darin, dass der Hintergrundfilter den Effekt zu den Elementen dahinter hinzufügt, während die integrierten Filtereffekte von Divi den Effekt dem Element selbst hinzufügen.

Hier verwenden wir 2 Filtereffekte (Sättigen und Weichzeichnen), die den Filtereffekt auf alle Designelemente hinter dem Abschnitt anwenden.

Fühlen Sie sich frei, weitere Filterfunktionswerte (oder eine Kombination davon) hinzuzufügen, um Ihr eigenes einzigartiges Design zu erstellen. Die nützlichsten davon sind:

  • verwischen()
  • Helligkeit()
  • Kontrast()
  • Graustufen()
  • Farbton-drehen()
  • umkehren()
  • Sepia()
  • sättigen()

Klebeposition zum Header hinzufügen

Stellen Sie abschließend sicher, dass Sie dem Kopfbereich eine klebrige Position geben.

Endergebnis

Hier ist ein Blick auf das Endergebnis auf einer Live-Seite. Beachten Sie die Unschärfe- und Sättigungsfiltereffekte, die beim Scrollen auf die Elemente hinter der Kopfzeile angewendet werden.

Erstellen eines Headers mit CSS-Hintergrundfiltereffekten von Grund auf neu

Wenn Sie den gesamten Header mit CSS-Hintergrundfiltereffekten von Grund auf neu erstellen möchten, gehen Sie wie folgt vor.

Globalen Header im Theme Builder erstellen

Navigieren Sie zum Theme Builder und klicken Sie auf , um einen neuen globalen Header zu erstellen.

Erstellen eines klebrigen Abschnitts mit CSS-Hintergrundfiltereffekten

Beginnen wir damit, einen Sticky-Bereich mit den CSS-Hintergrundfiltereffekten zu erstellen, wie wir es im ersten Teil dieses Tutorials getan haben.

Fügen Sie im globalen Kopfzeilen-Layout-Editor dem Abschnitt eine einspaltige Zeile hinzu.

Öffnen Sie die Einstellungen des Abschnitts. Fügen Sie dann dem Abschnitt die folgende halbtransparente Hintergrundfarbe hinzu:

  • Hintergrundfarbe: rgba(0,0,0,0.8)

Aktualisieren Sie die Polsterung wie folgt:

  • Padding: 0px oben, 0px unten

Als Nächstes können wir die Background-Filter-Effekte (mit der Background-Filter-CSS-Eigenschaft) mit einem benutzerdefinierten CSS-Snippet im Hauptelement des Abschnitts hinzufügen. Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS in das Hauptelement ein: 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Stellen Sie abschließend sicher, dass Sie dem Kopfbereich eine klebrige Position geben.

  • Klebrige Position: Bleiben Sie oben

Zeileneinstellungen bearbeiten

Nachdem der Abschnitt fertig ist, öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

  • Dachrinnenbreite: 1
  • Breite: 95%
  • Polsterung: 20px oben, 20px unten

Logobild hinzufügen

Nachdem die Zeileneinstellungen aktualisiert wurden, fügen Sie der Zeile/Spalte ein Bildmodul hinzu, um das Logo zu erstellen.

Laden Sie das Logobild in das Bildmodul hoch.

Aktualisieren Sie die Bilddesign-Einstellungen wie folgt:

  • Breite: 50px
  • Rand: 0px rechts

Menü erstellen

Fügen Sie als Nächstes ein Menümodul unter dem Bildmodul hinzu.

Wählen Sie auf der Registerkarte Inhalt ein Menü aus und geben Sie dem Menü eine transparente Hintergrundfarbe.

  • Hintergrundfarbe: rgba(0,0,0,0)

Aktualisieren Sie auf der Registerkarte "Design" die Einstellungen für das Menüdesign wie folgt:

  • Stil: Linksbündig
  • Farbe des aktiven Links: #fff
  • Menüschrift: Montserrat
  • Schriftstärke im Menü: Halbfett
  • Menütextfarbe: #fff
  • Textausrichtung: Mitte
  • Hintergrundfarbe des Dropdown-Menüs: #333
  • Farbe der Dropdown-Menüzeile: #fff
  • Textfarbe des Dropdown-Menüs: #fff
  • Dropdown-Menü Aktiver Link: #fff
  • Hintergrund des mobilen Menüs: #333
  • Textfarbe des mobilen Menüs: #fff
  • Farbe des Einkaufswagensymbols: #fff
  • Farbe des Suchsymbols: #fff
  • Farbe des Hamburger-Menüsymbols: #fff
  • Breite: 80% (Desktop und Tablet)

Schaltfläche mit Textmodul erstellen

Um den kleinen Button für die Kopfzeile zu erstellen, verwenden wir einen Textbaustein. Fügen Sie ein Textmodul unter dem Menü hinzu.

Aktualisieren Sie den Body-Content mit der Arbeit „Shop“. Geben Sie dem Textbaustein dann eine weiße Hintergrundfarbe.

  • Text: „Shop“
  • Hintergrundfarbe: #fff

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Textschriftart: Montserrat
  • Schriftstärke des Textes: Halbfett
  • Text Textfarbe: #333
  • Textzeilenhöhe: 2em
  • Textausrichtung: Mitte
  • Breite: 50px
  • Abgerundete Ecken: 5px

Hier hat der Textbaustein die gleiche Breite wie das Logobild. Dies hilft bei der perfekten Ausrichtung der Elemente, wenn wir die flex-Eigenschaft für die Spalte mit benutzerdefiniertem CSS verwenden.

Module in Spalte mit CSS Flex-Eigenschaft ausrichten

Sobald das Logo, das Menü und das Textmodul der Spalte hinzugefügt wurden, öffnen Sie die Spalteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS in das Hauptelement ein: 

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

Kopfzeilenlayout und Vorlage speichern

Wenn Sie fertig sind, stellen Sie sicher, dass Sie das Layout und die Vorlage speichern.

Endergebnis

Hier ist ein weiterer Blick auf das endgültige Design. Beachten Sie die Unschärfe- und Sättigungsfiltereffekte, die beim Scrollen auf die Elemente hinter der Kopfzeile angewendet werden.

Browser-Unterstützung

Leider funktioniert die CSS-Eigenschaft background-filter derzeit nicht gut im IE und Firefox. Der Fallback ist jedoch die halbtransparente Hintergrundfarbe, die dem Abschnitt zugewiesen wird, die immer noch funktioniert und gut aussieht.

Abschließende Gedanken

Hoffentlich profitiert Ihr nächstes Projekt von einem Header mit einem schönen Hintergrundfiltereffekt. Es ist wirklich einfach, jeden Header in Divi hinzuzufügen, und es macht Spaß, all die verschiedenen verfügbaren Filterfunktionswerte zu erkunden.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!