Erstellen Sie schöne Archive und zeigen Sie Notizseiten für Ihren Podcast an

Gestern haben wir mit Divis Visual Builder eine Homepage für Ihren Podcast erstellt, die Ihre Hörer absolut beeindrucken wird, aber was ist, wenn sie tiefer in Ihre Show eintauchen möchten?

Sie werden zu den schönen Archiven gehen und Notizenseiten zeigen, die ich dir heute beibringen werde.

Die heutigen Endprodukte: Notizen- und Archivseiten anzeigen

Die Seiten selbst sind so gestaltet, dass sie die Homepage ergänzen, aber ihre Elemente nicht direkt widerspiegeln.

Auf der Seite mit den Shownotizen wollte ich sicherstellen, dass jeder Besucher die Episode direkt in seinem Browser anhören, die Highlights und Links für diese bestimmte Episode sehen und sich für Ihre E-Mail-Liste anmelden kann.

Die Archivseite ist genauso einfach, aber funktional wie die Seite mit den Shownotes. Archivseiten haben einen Zweck: Ihre Benutzer können Ihren Backkatalog schnell und einfach sehen. Genau das macht diese Seite. Mit einem kurzen Auszug über die Sendung können Ihre Zuhörer Ihre Sendung durchsuchen, um genau das Thema zu finden, das sie hören möchten.

Vermögenswerte, die Sie benötigen

Wie gestern benötigen Sie einige hochauflösende Hintergrundbilder. Die beiden, die ich verwendet habe, befinden sich in dieser Sammlung auf Unsplash (die auch die Hintergründe von der gestrigen Homepage enthält). Ich habe sie in der Vorschau auf Graustufen bearbeitet, aber jede Bildbearbeitungssoftware kann entweder einen Schwarzweiß-/Graustufeneffekt anwenden oder den Sättigungsschieberegler auf 0 herunterschieben.

Ihr Leben wird auch ein bisschen einfacher, wenn Sie die Homepage bereits erstellt haben, da Sie einige der gleichen Stile verwenden.

Das war's, also kommen wir zum Bauen!

Erstellen der Seite mit Shownotizen

Die Shownotes sind in WordPress nur „Posts“, also navigiere zu deinem Dashboard und gehe zu Posts –> Add New.

Dies machst du jedes Mal, wenn du eine Seite mit Shownotizen für eine einzelne Episode deiner Show erstellen möchtest. Benennen Sie es wie Sie wollen und setzen Sie den URL-Slug auf etwas Einfaches (damit sich Ihre Hörer nach dem Ende Ihrer Episode daran erinnern).

Stellen Sie zunächst sicher, dass Sie auf „Use The Divi Builder“ klicken.

Das sollte uns die nächsten Optionen eröffnen, die wir brauchen. Stellen Sie rechts auf der Seite den Beitrag auf „Volle Breite“, da wir keine Seitenleiste für unsere Shownotes verwenden werden. Und setzen Sie den Beitragstitel auf „Ausblenden“, damit die Metadaten wie Autor, Kommentare und Datum für den Beitrag selbst nicht angezeigt werden.

Dann möchten Sie den Visual Builder aufrufen und eine entzückend leere Webseite sehen.

Das erste, was Sie tun möchten, ist auf das Zahnradsymbol im blauen Abschnitt in der oberen linken Ecke der Seite zu klicken, um die Abschnittseinstellungen einzugeben.

Laden Sie von dort aus Ihr Hintergrundbild hoch. Scrollen Sie etwas weiter nach unten in die Einstellungen und schalten Sie den Parallax-Effekt verwenden ein. Belassen Sie die Parallax-Methode auf der Standardeinstellung „True Parallax“.

Speichern Sie diese Einstellungen, und Sie sollten etwa Folgendes sehen:

Nicht genau das, was oben im Endprodukt enthalten war, oder? Wir müssen es etwas ausdehnen, indem wir den Inhalt zur Seite hinzufügen.

Klicken Sie auf das grüne + und fügen Sie eine einspaltige Zeile ein (die in der oberen linken Ecke).

Als nächstes werden Sie froh sein, dass Sie die gestrige Homepage bereits erstellt haben. Sobald Sie Ihre Zeile auswählen, werden Sie von einem Fenster begrüßt, in dem Sie aufgefordert werden, ein Element auszuwählen. Sie wählen den Podcast-Player aus, den wir gestern gespeichert haben, indem Sie auf "Aus Bibliothek hinzufügen" klicken.

Ich hatte meine einfach "Podcast-Episode" genannt, aber wenn Sie etwas anderes gewählt haben, stellen Sie sicher, dass Sie es auswählen.

Badabing-badaboom, Sie haben eine Podcast-Episode wie von Zauberhand zu Ihrer Shownotes-Seite hinzugefügt.

Denken Sie daran, dass Sie den Titel und die Medien (und möglicherweise das Episodenbild) für jede neue Seite mit Shownotizen bearbeiten müssen. Was Sie gerade hinzugefügt haben, ist eine exakte Kopie dessen, was Sie gespeichert haben.

Ihre aktuellen Shownotizen werden direkt unter den Podcast-Player angezeigt, fahren Sie also mit der Maus über den Player und drücken Sie das schwarze +. Scrollen Sie nach unten, bis Sie das Textmodul sehen. Fügen Sie es der Seite hinzu.

Geben Sie unter der Registerkarte Inhalt in den Texteinstellungen Ihre Notizen in den WYSIWYG-Editor ein und gehen Sie zur Registerkarte Design.

Aktualisieren Sie auf der Registerkarte Entwurf die folgenden Optionen:

Textfarbe: Hell
Textausrichtung: Links
Textschriftart: Special Elite
Schriftgröße des Textes: 20px
Text Textfarbe: #ffffff

Speichern Sie es und Sie sollten einen glänzenden neuen Textblock und eine Seite sehen, die dieser ähnelt.

Wir erreichen die Zielgeraden für die Seite mit den Shownotes – nur noch zwei Elemente zu gehen. Klicken Sie erneut auf das schwarze + und fügen Sie die gestern gespeicherte Schaltflächenvorlage hinzu.

Anstatt die Benutzer in die Archive zu führen, wie es gestern der Fall war, wird sie diese auf die Startseite zurückbringen. Navigieren Sie zur Einstellungsseite der Schaltfläche und legen Sie die URL auf einen einfachen umgekehrten Schrägstrich fest.

Warum nicht nach /home oder ähnlichem? Nun, wenn Sie nur einen Backslash verwenden, wird Ihr Benutzer auf die Titelseite Ihrer Website weitergeleitet, egal was passiert. Und da Sie sich auf derselben Site befinden, hat selbst das Verschieben von Domains keinen Einfluss auf die Schaltfläche. Es wird immer nach Hause zurückkehren. Das ist genau das, was Sie wollen!

Gehen Sie durch und füllen Sie die restlichen Einstellungen der Schaltfläche aus. Lassen Sie es im selben Fenster öffnen, ändern Sie den Schaltflächentext in „Zurück nach Hause“ (oder was auch immer Sie möchten) und die Schaltflächenausrichtung auf „Rechts“ (beide, um den Inhalt nicht im Weg zu halten und um sie aufrecht zu erhalten gegen den Inhalt). Das Styling der Design-Registerkarte sollte aus der Divi-Bibliothek importiert worden sein.

Sie haben jetzt eine schöne Navigationsschaltfläche, und ich schlage vor, sie zu Ihrer Bibliothek hinzuzufügen, damit Sie sie auf mehreren Seiten verwenden können.

Und zum Schluss richten wir die E-Mail-Anmeldung ein, damit wir diese süßen, süßen E-Mail-Adressen erhalten, um die Benutzer mit Neuigkeiten über den Podcast auf dem Laufenden zu halten.

Dafür wollen wir eine ganz neue, einspaltige Zeile. Klicken Sie also auf das grüne + und setzen Sie es ein. Fügen Sie dann ein E-Mail-Optin-Modul aus der Dropdown-Liste hinzu. Navigieren Sie wie gestern zu den Moduleinstellungen und geben Sie den gewünschten Titel sowie den gewünschten Call-to-Action-Text im WYSIWYG-Editor ein.

Fügen Sie auch den gewünschten Text für die Schaltfläche selbst hinzu. Ich habe mich für das völlig einzigartige "Abonnieren" entschieden.

Wählen Sie Ihren E-Mail-Dienstanbieter und Ihre Liste aus (denken Sie daran, dass das vollständige Modul von gestern nicht auf der Seite angezeigt wird, wenn es live ist, wenn Sie keine Liste auswählen).

Ändern Sie den RGBA-Hintergrund in transparent.

Stellen Sie auf der Registerkarte Design die Header-Schriftart auf "Special Elite" und die Größe auf 36px ein.

Sie werden auch die Körperschriftart auf „Special Elite“ und die Größe auf 16px einstellen.

Im Gegensatz zu fast allem anderen für diese Site möchten wir für das E-Mail-Optin-Modul einen Rahmen verwenden. Verschieben Sie also "Benutzerrahmen" auf "Ja", und stellen Sie die Farbe auf #ffffff und die benutzerdefinierte Auffüllung auf 15px auf allen Seiten ein.

Wenn das erledigt ist, wechseln Sie in die Registerkarte Erweitert und fügen Sie dies dem Hauptelement unter Custom CSS hinzu, um die Ecken des Moduls abzurunden:

border-radius:10px;

Speichern Sie Ihre Arbeit und Sie haben eine E-Mail-Option!

Das Einzige, was Ihre Seite mit Shownotizen erfordert, ist, dieses Modul für die Verwendung auf anderen Seiten zu speichern. Da Sie möchten, dass Ihre E-Mail-Optionen auf der gesamten Website konsistent sind, werden wir dies als globales Element speichern. Klicken Sie auf die Schaltfläche "Zur Bibliothek hinzufügen", wenn Sie mit der Maus über das Modul fahren, und stellen Sie sicher, dass Sie das Kontrollkästchen "Dies zu einem globalen Element machen" aktivieren.

Jetzt haben Sie ein einzelnes Element, das Sie auf mehreren Seiten verwenden können. Und wenn Sie Änderungen daran vornehmen, werden diese in allen Instanzen angezeigt, im Gegensatz zum Podcast-Player und der Schaltfläche oben, wo jedes Modul einzeln geändert werden kann.

Und da, meine Freunde, ist Ihre Seitenvorlage für Show Notes! Ich empfehle auch, die gesamte Seite in Ihrer Bibliothek zu speichern, damit Sie sie einfach importieren und die Elemente ändern können, die Sie für jede Episode benötigen.

Nun… weiter zum Archiv! Die Ziellinie ist in Sicht!

Aufbau Ihrer Archivseite

Gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Neue Seite hinzufügen, benennen Sie sie (meine ist "Archive") und öffnen Sie den Divi Visual Builder. Kinderleicht.

Sobald Sie dort sind, fügen Sie eine neue einspaltige Zeile mit einem Textmodul hinzu.

Navigieren Sie zu den Einstellungen und geben Sie Ihren Seitentitel in den WYSIWYG-Editor ein.

Legen Sie auf der Registerkarte Design die Textfarbe auf Hell und die Ausrichtung auf Mitte fest. Stellen Sie die Schriftart auf „Special Elite“ und die Schriftgröße auf 50px ein.

Damit der Text auf Mobilgeräten gut aussieht, ändern Sie den oberen und unteren Rand auf 40 Pixel.

Speichern Sie Ihre Arbeit und machen Sie sich bereit, einen Hintergrund zum Archiv hinzuzufügen! Öffnen Sie die Einstellungen im blauen + Feld, wählen Sie Ihr Hintergrundbild aus und stellen Sie die Parallaxe wie bei den Show Notes ein. Auch hier habe ich diese eine Graustufe mit Vorschau erstellt.

Stellen Sie auf der Registerkarte Design den oberen und unteren Abstand auf 55px bzw. 176px ein, damit die gesamte Seite den Parallax-Effekt sehen kann, unabhängig davon, wie viele Beiträge Sie in Ihren Archiven haben.

Warum 176px statt 175? Weil ich ein Rebell bin, deshalb.

Sie sehen Folgendes, wenn Sie Ihre Arbeit speichern:

Als nächstes fügen Sie eine neue einspaltige Zeile hinzu, nur diesmal fügen Sie ein Blog-Modul ein. Dadurch wird der von Ihnen eingestellte WordPress-Loop angezeigt, und wir möchten nur, dass es Auszüge und Titel sind, damit Ihre Zuhörer wissen, was sie erwartet.

Gehen Sie zu den Einstellungen und aktualisieren Sie die Optionen auf der Registerkarte Inhalt wie folgt:

Beitragsnummer: 10 (oder was auch immer Sie denken, dass es für Ihre Website am besten aussieht – es wird paginiert, nachdem diese Nummer angezeigt wurde)
Inhalt: Ausschnitt anzeigen (weil wir möchten, dass sich der Benutzer durchklickt und die Episode im Player anhört)
Ausgewähltes Bild anzeigen: JA
Rasterkachel-Hintergrundfarbe: rgba(73,73,73,0.72)

Aktualisieren Sie auf der Registerkarte Entwurf die folgenden Optionen:

Layout: Gitter
Header-Schriftart: Special Elite
Kopfzeilentextfarbe: #ffffff
Körperschriftart: Special Elite
Textkörperfarbe: #ffffff
Meta-Schriftart: Special Elite
Metatextfarbe: #ffffff
Rand verwenden: JA
Rahmenfarbe: #ffffff
Randbreite: 1px
Rahmenstil: Solid

Wenn das alles fertig ist, haben Sie noch ein letztes bisschen Styling zu tun. Das Raster selbst hat scharfe, quadratische Ecken in jeder Box, und wir möchten einen Randradius von 10px erhalten, damit er mit dem Rest der Site übereinstimmt.

Navigieren Sie zu Ihrem WordPress-Dashboard -> Divi -> Theme-Optionen und scrollen Sie dann ganz nach unten zu Custom CSS. Fügen Sie diesen Code in das Feld ein, um die Ecken der einzelnen Auszugsfelder abzurunden:

.et_pb_post {
 border-radius: 10px;
}

Denken Sie daran, dass „.et_pb_post“ die CSS-Klasse ist, die Divi verwendet, um diese Boxen als Ganzes anzupassen.

Danach speichern Sie Ihre gesamte Arbeit.

Sie müssen nur noch die Schaltfläche Return Home aus Ihrer Bibliothek hinzufügen, und Sie sind fertig. Klicken Sie auf das schwarze +, um es derselben Zeile wie Ihr Blog-Modul hinzuzufügen.

Hot diggity dog, du hast gerade deine Archivseite eingerichtet.

Herzlichen Glückwunsch! Sie haben gerade Ihre Archivseite eingerichtet. Speichern Sie Ihre Archivseite als Vorlage, indem Sie unten auf dem Bildschirm auf das violette + klicken. und Vorlage für individuelle Shownotes.

Abschließend

Und das ist es! Vielen Dank, dass Sie meinen beiden Podcast-Seiten-Tutorials gefolgt sind. Sie können die erste Anleitung zum Erstellen einer schönen Podcast-Seite mit Divi unter diesem Link abrufen. Wenn Sie Fragen oder Kommentare haben, können Sie diese gerne unten hinterlassen und ich werde mein Bestes tun, um sie zu beantworten!