So fügen Sie Ihrem Divi-Header eine feste Audioleiste „Neueste Episode“ hinzu

Wenn Sie eine Podcast-Website mit Divi hosten, verwenden Sie wahrscheinlich bereits das integrierte Audiomodul. Wenn Sie nun nach einer besonderen Möglichkeit suchen, Ihre neueste Episode ins Rampenlicht zu rücken, werden Sie dieses Tutorial lieben. Heute zeigen wir Ihnen, wie Sie eine feste Audioleiste für die neueste Episode in Ihren Divi-Header einfügen. Wir werden eine Textmodul-Loop-Animation hinzufügen, um die Aufmerksamkeit auf die Audioleiste zu lenken, und Sie können auch die globale Header-Vorlage einschließlich der Audioleiste herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die Audio Bar Header-Vorlage KOSTENLOS herunter

Um die kostenlose Audioleisten-Header-Vorlage in die Hände zu bekommen, müssen Sie sie 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

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.

HERUNTERLADEN

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!

Gehen Sie zum Divi Theme Builder und beginnen Sie mit dem Erstellen eines globalen Headers

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Website.

Beginnen Sie mit dem Erstellen eines globalen Headers

Beginnen Sie dann mit dem Erstellen eines globalen Headers.

Erstellen Sie einen globalen Header mit der Audioleiste der neuesten Episode

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe. Wir passen diesen globalen Header an das Podcast-Layout-Paket an, aber Sie können jeden anderen Designstil Ihrer Wahl verwenden.

• Hintergrundfarbe: #1a1844

Abstand

Wechseln Sie dann zur Registerkarte Design und fügen Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 50px (Desktop), 80px (Tablet & Telefon)
• Untere Polsterung: 0px

Box Schatten

Um den Header vom Inhalt der Seite/des Beitrags zu trennen, fügen wir unserem Abschnitt ebenfalls einen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine erste Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrundfarbe

Diese ganze Reihe wird unserer neuesten Episoden-Audioleiste gewidmet sein. Aber bevor wir dazu kommen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #fe4943

Größe

Wechseln Sie zum Design-Tab der Zeile und ändern Sie als nächstes die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 90%
• Maximale Breite: 100%

Abstand

Wir fügen auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 10px
• Untere Polsterung: 10px

Grenze

Dann gehen wir zu den Rahmeneinstellungen und fügen einige abgerundete Ecken hinzu.

• Unten links: 10px
• Unten rechts: 10px

Box Schatten

Wir fügen auch einen Box-Schatten hinzu.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.3)

Position

Als Nächstes gehen wir zur Registerkarte "Erweitert" und stellen die gesamte Zeile fest. Wir erhöhen auch den Z-Index der Zeile, um sicherzustellen, dass er die zweite Zeile überlappt, die wir unserem Abschnitt hinzufügen.

• Position: Behoben
• Ort: Top Center
• Z-Index: 11

Spalte 1 Sichtbarkeit

Vervollständigen Sie die Zeileneinstellungen, indem Sie die Überläufe von Spalte 1 auf ausgeblendet setzen. Dies hilft bei der Textanimation, die Sie in der Vorschau dieses Beitrags feststellen konnten. Indem wir die Überläufe auf ausgeblendet setzen, stellen wir sicher, dass die Animation hinter dem Spaltencontainer verborgen ist.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textschriftart: Großbuchstaben
• Textfarbe: #ffffff
• Txt-Größe: 15px
• Text Buchstabenabstand: 3px

Abstand

Wir werden unserem Modul auch einen negativen linken Rand hinzufügen. Dies wird bei unserer Loop-Animation helfen.

• Linker Rand: -190%

Animation

Zu guter Letzt fügen Sie Ihrem Textmodul die folgende Loop-Animation hinzu:

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsdauer: 9000 ms
• Animationsintensität: 30%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Linear
• Animationswiederholung: Schleife

Audiomodul zu Spalte 2 hinzufügen

Alle Inhalte entfernen

In Spalte 2 benötigen wir als einziges Modul ein Audiomodul. Stellen Sie sicher, dass der Inhalt entfernt wird.

Audiodatei hochladen

Laden Sie dann eine Audiodatei mit Ihrer neuesten Episode hoch.

Hintergrundfarbe entfernen

Entfernen Sie als nächstes die Hintergrundfarbe des Moduls.

Abstand

Wechseln Sie dann zur Registerkarte Design und entfernen Sie einige Standard-Padding-Werte, indem Sie ihnen '0px' hinzufügen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 0px

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe. Diese Zeile enthält unser Logo, unser Menü und unsere Social-Media-Symbole. Wählen Sie die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Menümodul zu Spalte 1 hinzufügen

Menü auswählen

Fügen Sie dann in Spalte 1 ein Menümodul hinzu und wählen Sie ein Menü Ihrer Wahl aus.

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Hintergrundfarbe entfernen

Entfernen Sie dann die standardmäßige weiße Hintergrundfarbe.

Menütexteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Menütexteinstellungen wie folgt:

• Menüschrift: Open Sans
• Menütextfarbe: #ffffff (Desktop), #1a1844 (Tablet & Telefon)
• Menütextgröße: 15px
• Textausrichtung: Rechts

Texteinstellungen des Dropdown-Menüs

Wir ändern auch die Farbe der Dropdown-Menüzeile in den Dropdown-Menüeinstellungen.

• Farbe der Dropdown-Menüzeile: #ffffff

Symboleinstellungen

Zusammen mit der Farbe des Hamburger-Menüsymbols in den Symboleinstellungen.

• Hamburger Menüsymbol Farbe: #fe4943

Größe

Und wir vervollständigen die Moduleinstellungen, indem wir in den Größeneinstellungen eine maximale Logobreite zuweisen.

• Max. Breite des Logos: 65 %

Fügen Sie das Social Media Follow-Modul zu Spalte 2 hinzu

Soziale Netzwerke hinzufügen

In der zweiten Spalte unserer zweiten Zeile benötigen wir ein Social Media Follow Module. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Modulausrichtung.

• Modulausrichtung: Mitte

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: 20px
• Untere Marge: -4% (nur Tablet und Telefon)

Grenze

Und vervollständigen Sie die Kopfzeile, indem Sie den Rahmeneinstellungen des Moduls einige abgerundete Ecken hinzufügen. Nachdem Sie den globalen Header ausgefüllt haben, stellen Sie sicher, dass Sie alle Divi Theme Builder-Änderungen speichern und das Ergebnis auf Ihrer Website anzeigen!

• Alle Ecken: 50vw

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit dem integrierten Audiomodul von Divi kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie eine feste Audioleiste in Ihren benutzerdefinierten globalen Header einfügen. Dies ist eine großartige Möglichkeit, die neueste Episode Ihres Podcasts hervorzuheben. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.