So erstellen Sie mit Divi . eine schöne Podcast-Seite

Du hast einen tollen Podcast. Aber Ihre Website benötigt möglicherweise etwas Arbeit. Es macht seinen Job, aber es fällt nicht auf. Keine Angst, Podcaster! Ich habe dich abgedeckt.

Ich werde Ihnen eine einfache Möglichkeit beibringen, mit Divi nicht nur eine leicht zu aktualisierende Homepage für Ihren Podcast zu erstellen, sondern auch eine stilvolle Archivseite und eine Vorlage für einzelne Episoden.

Das heutige Endprodukt: Podcast-Homepage mit drei Abschnitten

Ich wollte das Design einfach und so minimal wie möglich halten, ohne die Persönlichkeit zu verlieren, die ein guter Podcast bewahren muss. Dieses Design ist für einen fiktiven Indie-Podcast namens You're An All-Star , dessen Fokus auf Schuhen und Glücklichsein liegt. Ich wollte, dass das Design dieses Thema widerspiegelt.

Der erste Abschnitt verwendet eine helle Farbe, um die Aufmerksamkeit des Benutzers zu lenken, bietet links einen kurzen Klappentext darüber, worum es im Podcast geht, und verwendet das Divi-Audiomodul, um eine Podcast-Episode zum sofortigen Anhören zu präsentieren.

Wenn der Benutzer nach unten scrollt, verschiebt sich die Ästhetik leicht in den Abschnitt „Ausgewählte Episoden“, der wiederum das Divi-Audiomodul verwendet, um leicht zugängliche Inhalte zu präsentieren und die Archive der Show zu besuchen. Der Hintergrund ist Parallaxe, um auf die Episoden selbst aufmerksam zu machen.

Der letzte Abschnitt ist einfach eine E-Mail-Anmeldung. Jede Marke, jeder Podcast, jeder Blog und jedes Unternehmen braucht einen, und um ihn hervorzuheben, habe ich diesen Abschnitt wieder auf einen farbigen Hintergrund umgestellt und ihn so klein gemacht, dass die Parallaxe aus dem zweiten Abschnitt zusätzliche Aufmerksamkeit darauf lenken würde.

Im Folgenden zeige ich Ihnen Schritt für Schritt, wie ich jedes Modul, jeden Abschnitt und jede Seite der Site gestaltet und erstellt habe.

Vermögenswerte, die Sie benötigen

Das Tolle an diesem Design ist, dass es nicht viele Ressourcen außerhalb von Divi selbst benötigt. Alles, was Sie brauchen, sind 5 hochauflösende Bilder, die Sie für Hintergründe und alle Podcast-Grafiken und Miniaturansichten verwenden können, die Sie für Ihre Episoden verwenden.

Alle meine Bilder stammen von Unsplash (alle Bilder für diese Site sind in dieser Sammlung zu finden). Ich habe Vorschau verwendet, um einige von ihnen in Schwarzweiß zu konvertieren, aber Sie können jede beliebige Bildbearbeitungssoftware verwenden. Bei so ziemlich allen können Sie entweder eine Graustufen- / Schwarzweißoption auswählen oder die Sättigung auf Null senken.

Abgesehen davon befinden sich alle benötigten Ressourcen direkt in Divi. Kommen wir also dazu!

Homepage der Podcast-Website: Erster Abschnitt

Beginnen Sie damit, eine neue Seite in Ihrem WordPress-Dashboard zu erstellen und sie als Startseite Ihrer Website festzulegen. (Ich habe meine bequemerweise „Zuhause“ genannt.)

Gehen Sie nun zurück, um Ihre neue Seite zu bearbeiten. Ändern Sie im Feld Seitenattribute in der rechten Seitenleiste die Standardvorlage in die leere Seitenvorlage.

Als erstes erstellen wir eine dreispaltige Zeile.

In die mittlere Spalte möchten wir ein Divi-Teilermodul einfügen.

Stellen Sie in den Trennereinstellungen auf der Registerkarte Design die Höhe auf 600 ein. Dadurch werden nicht nur die beiden äußeren Spalten (der Hauptinhalt des Abschnitts) getrennt, sondern der Abschnitt auch hoch genug, um ausreichend Leerraum auf einer Reihe von Auflösungen des Ansichtsfensters. (Während standardmäßig auf Mobilgeräten ausgeblendet.)

In der linken Spalte fügen wir nun zwei Textbausteine ​​hinzu. Ich entschied, dass für dieses Projekt eine horizontale Kopfzeile fehl am Platz ausgesehen hätte, sodass das erste Textmodul einfach ein Titel sein wird.

Fügen Sie auf der Registerkarte Inhalt der Texteinstellungen den Titel zum Inhaltsfeld hinzu.

Aktualisieren Sie auf der Registerkarte Design die Textfarbe auf „Light“ und ändern Sie die Textausrichtung auf „Center“. Passen Sie dann die Schriftart und -größe des Textes an. Ich habe die Schriftart „Special Elite“ wegen ihres Distressed-Looks gewählt und dann ihre Größe auf 60 gesetzt. Stellen Sie auch die Textzeilenhöhe auf 1em ein.

Sobald dies erledigt ist, ist es an der Zeit, zum zweiten Textfeld zu wechseln. Wir verwenden diesen als kurzen Klappentext für den Podcast.

Aktualisieren Sie auf der Registerkarte Inhalt die folgenden Optionen:

Inhalt : Geben Sie Ihren Text für die Beschreibung ein (ich würde eine verkürzte Version der Beschreibung vorschlagen, die Sie bei iTunes und anderen Diensten verwenden)
Hintergrundfarbe : rgba(0,0,0,0.4)

Wählen Sie auf der Registerkarte Design "Light" für die Textfarbe und wählen Sie "Center" für die Textausrichtung wie im vorherigen Feld. Stellen Sie auch die Textschriftart auf „Special Elite“ bei einer Größe von 20px ein.

Fügen Sie schließlich 10px Padding um den gesamten Textrahmen hinzu.

Gehen Sie danach zur Registerkarte Erweitert und geben Sie dies unter Benutzerdefiniertes CSS in das Feld Hauptelement ein, um die Ecken des Textfelds abzurunden:

border-radius: 10px;

Sobald Sie das getan haben, sind Sie mit den ersten beiden Spalten Ihrer neuen Website fertig! Hurra! Speichern Sie Ihre Arbeit, indem Sie unten auf der Seite auf den violetten Kreis klicken und auf die grüne Schaltfläche zum Speichern klicken.

Ausgezeichnete Arbeit!

Um es optisch etwas ansprechender zu gestalten, müssen wir jedoch den Hintergrund des Abschnitts festlegen, gehen Sie also in die Einstellungen des blauen Felds (Abschnitt) und laden Sie ein Hintergrundbild hoch. Ich neige dazu, meine Auflösung bei 1920 × 1280 zu halten.

Sie sollten jetzt etwas sehen, das so aussieht:

Jetzt fragen Sie sich vielleicht: „Was ist mit den Podcasts? Es ist eine Podcast-Site, und wir haben noch nichts mit einem Podcast gemacht!“ Du hast vollkommen Recht. Lassen Sie uns also etwas Audio in Gang bringen, indem Sie das (Sie haben es erraten) Audiomodul in der dritten Spalte unserer Reihe auswählen.

Das Standard-Audiomodul passt nicht genau zu dem Thema, das wir für diese Site verwenden, also nehmen wir es davon:

Dazu:

Öffnen Sie die Einstellungen des Audiomoduls. Im Audio-Feld können Sie entweder Ihre eigene Datei auf den von Ihnen verwendeten Host hochladen oder direkt auf die Mediendatei des von Ihnen verwendeten Podcasting-Dienstes verlinken. Ich verwende Libsyn für meine, also habe ich mir einfach die Medien-URL geholt und sie eingefügt.

(Lustige Tatsache: Jeder, der über dieses Modul auf Ihrer Website auf Play klickt, wird auch in Ihrem Libsyn-Dashboard als Download gezählt. Ergebnis!)

Dann sollten Sie den Titel der Episode, auf die Sie verlinkt haben, unter Titel und Ihren Namen unter Künstlername (oder was auch immer Sie in Ihrer Show sehen) eingeben. Wie könnte ich für unseren fiktiven Podcast über Schuhe etwas anderes als Chuck Taylor wählen? ). Der Albumtitel ist der Name Ihres Podcasts.

Als nächstes ändern wir diese grünlich-blaugrüne Farbe in einen vollständig transparenten Hintergrund. Die Farbe ist egal. Schieben Sie den Transparenzbalken einfach ganz nach unten oder bis die letzte Ziffer des RGBA 0 ist.

Für das Cover-Bild verwenden Sie am besten entweder das Miniaturbild dieser bestimmten Episode oder das Podcast-Bild, das Sie in iTunes und anderswo verwenden.

Sobald die Podcast-Details sortiert sind, gehen Sie zur Registerkarte Design, damit Sie diesen Player wirklich zu Ihrem machen können.

Wählen Sie „Licht“ für die Option Textfarbe. Stellen Sie die Schriftarten auf „Special Elite“, die Titelgröße auf 50px und die Untertitelgröße auf 20px ein.

Ich habe auch den oberen Rand bei diesem bestimmten Player auf 50px gesetzt, da dieser Rand den Player horizontal im Abschnitt zentriert hält und wenn Sie zu Mobile wechseln, ermöglicht dies einen guten Abstand zwischen den Elementen. (Die Einstellung gilt für alle Ansichtsfenstergrößen, solange Sie nicht auf das Smartphone-Symbol klicken.)

Da der Hintergrund transparent ist, müssen die Ecken nicht abgerundet werden, damit sie mit dem Textfeld in der ersten Spalte übereinstimmen. Klicken Sie also auf Speichern.

Da dieser Podcast-Player der Star der Show ist, möchten wir ihn nicht jedes Mal neu erstellen, also speichern wir dieses Modul in der Divi-Bibliothek, damit wir es problemlos auf der Website duplizieren können bearbeiten, wie wir es brauchen.

Geben Sie einen beliebigen Vorlagennamen ein und aktivieren Sie NICHT "Make this a global item". Wir werden diese Option in Teil 2 dieser Serie verwenden, aber jetzt nicht.

Gut! Nur noch ein Element und der erste Abschnitt ist fertig. (Aber keine Sorge. Es ist das involvierteste von allen.)

Die meisten Podcasts führen einen Blog oder zeigen Notizen an, auf die die Hörer zurückgreifen und die in der Episode besprochenen Inhalte noch einmal aufgreifen können. Ihr Podcast ist nicht anders, da bin ich mir sicher. Das Hinzufügen eines Links zu den Shownotes Ihres Podcasts ist völlig problemlos.

Erstellen Sie in der dritten Spalte einen neuen Textblock, öffnen Sie die Einstellungen und geben Sie den gewünschten Linktext ein. Für dieses Beispiel ist es das selbsterklärende „Lesen Sie die Shownotes“.

Klicken Sie auf das Symbol in der Symbolleiste, um einen Link hinzuzufügen, und geben Sie die URL für Ihre Shownotes ein bzw. fügen Sie sie ein. (Auch in Teil 2 zeige ich Ihnen, wie Sie Blog-Posts für Shownotes erstellen und gestalten.) Da ich die WordPress-Permalink-Struktur auf „Post Name“ gesetzt habe, muss ich nur den Slug des eingeben Post, den ich für diese Folge geschrieben habe.

(Randnotiz: Indem Sie die Domain-Informationen nicht eingeben und nur den Slug, weisen Sie WordPress an, Benutzer unabhängig von den Domain-Informationen auf diese Seite zu leiten. Dies ist wirklich nützlich, falls Sie jemals die Domain ändern, und hilft, fehlerhafte Links zu vermeiden!)

Speichern Sie einfach diesen Link und schon können Sie loslegen!

Sie sollten dieses Modul ebenso in Ihrer Bibliothek speichern wie Ihren Podcast-Player.

Voila! Dein ganz persönlicher ... warte. Äh oh. Ihr Shownotes-Link ist...ist...hässlich!

Aber keine Sorge. Hässliche Links sind eine einfache Lösung! Selbst wenn Sie die Einstellungen im Textmodul verwenden, um die Textfarbe zu ändern, hat dies keine Auswirkungen auf diese Wörter, da es sich um einen Link handelt.

Gehen Sie zum Feld Custom CSS in Ihrem Divi -> Theme Options und geben Sie dieses unten ein.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

Dies bewirkt, dass der Text weiß bleibt (in Übereinstimmung mit dem restlichen Text der Website, stellen Sie sicher, dass er wie die meisten anderen Links unterstrichen ist, und stellen Sie ihn fett ein, wenn Sie mit der Maus darüber fahren.)

Stellen Sie sicher, dass Sie es speichern, und jetzt ist Ihr Podcast-Player fertig!

Und für die letzten Anpassungen in diesem ersten Abschnitt klicken Sie in die Zeileneinstellungen (grünes Feld).

Wählen Sie "Benutzerdefinierte Breite verwenden". Stellen Sie sicher, dass die Einheiten auf Prozentsätze eingestellt sind, und bewegen Sie den Schieberegler auf 80. Dadurch nimmt diese Zeile 80% der Größe des Ansichtsfensters des Benutzers ein, wodurch verhindert wird, dass sich alles zusammenballt.

Und so ist auch der obere Bereich der neuen Website Ihres Podcasts! Es sollte jetzt ungefähr so ​​aussehen.

Speichern Sie es und schon ist die meiste Arbeit erledigt! Und dank Divis Bibliotheksfunktion werden die nächsten Abschnitte wie im Flug vergehen! Schau nur.

Homepage der Podcast-Website: Zweiter Abschnitt

Dieser Abschnitt wird ausgewählte Episoden unseres Podcasts präsentieren und Benutzern ermöglichen, die Archive zu besuchen (die wie die Shownotes-Seiten in Teil 2 enthalten sind).

Als erstes erstellen wir einen neuen Abschnitt, indem wir auf das blaue + am unteren Rand des Abschnitts klicken und einen regulären Abschnitt hinzufügen. Dadurch wird ein weiteres blaues Feld im Visual Builder erstellt. Fügen Sie in einer einspaltigen Zeile hinzu.

Wenn wir das eingerichtet haben, fügen wir einen Hintergrund auf die gleiche Weise wie oben hinzu, nur dass wir diesmal die Option "Parallaxe verwenden" in den Abschnittseinstellungen auswählen. Lassen Sie das Dropdown-Menü auf "True Parallax" statt auf "CSS".

Dies ist der einzige Abschnitt, den wir auf der Homepage mit Parallaxe verwenden. Ich denke, dass der sparsame Einsatz des Effekts mehr Aufmerksamkeit auf den Inhalt lenkt, den Sie hervorheben möchten.

Speichern Sie und fügen Sie dann ein neues Textfeld in die Zeile ein. Geben Sie „Ausgewählte Episoden“ ein, zentrieren Sie es im WYSIWYG-Editor und gehen Sie zu den Einstellungen, um die Textschriftart auf „Special Elite“ und die Textgröße 50px einzustellen. Sie sollten jetzt so etwas sehen:

Erstellen Sie darunter eine neue dreispaltige Zeile, indem Sie auf das grüne + klicken, und geben Sie in der ersten Spalte die Registerkarte "Aus Bibliothek hinzufügen" ein. (Sie haben jetzt nicht alle diese Bibliotheksoptionen, aber später!)

Wählen Sie die „Podcast-Episode“ oder wie auch immer Sie Ihren Player oben genannt haben. Fügen Sie dann ein weiteres Modul darunter hinzu, navigieren Sie erneut zur Bibliothek und fügen Sie Ihr gespeichertes Modul "Notizen-Link anzeigen" hinzu. Tun Sie dies für alle drei Spalten, bis Sie Folgendes sehen:

Fahren Sie damit fort, bis Sie alle gewünschten Episoden hinzugefügt haben. Bearbeiten Sie den Titel, das Albumcover und zeigen Sie Notizen-Links für jede Episode an. Ich habe gerade eine zweite Zeile hinzugefügt und nur die zweite Spalte ausgefüllt, damit das Design zu meinem gewählten Hintergrund passt.

Das einzige, was für diesen Abschnitt übrig bleibt, ist das Hinzufügen einer Schaltfläche "Archive durchsuchen". Erstellen Sie ganz unten eine neue Zeile, indem Sie auf das grüne + klicken, und verwenden Sie ein einzelnes Spaltenlayout. Fügen Sie ein „Button“-Modul ein. Dadurch wird eine sehr schwer lesbare Schaltfläche erstellt (natürlich abhängig von Ihrem Hintergrund), die ein einfaches Styling erfordert.

Öffnen Sie die Einstellungen des Button-Moduls und geben Sie den URL-Slug für die Seite ein, die Ihr Archiv sein soll. Ich ging mit dem offensichtlichen "/archives", benutzte den Text "Browse the Archives" und zentrierte dann die Schaltfläche selbst.

Auf der Registerkarte "Einstellungen" klicken wir auf "Benutzerdefinierte Stile für Schaltfläche verwenden" und setzen die Hintergrundfarbe auf "#ffffff" und die Textfarbe auf "#000000" (das ist Weiß bzw. Schwarz).

Dann möchten wir die Ecken der Schaltfläche abrunden, indem wir den Randradius auf 10px setzen, die Schriftart auf "Special Elite" setzen und das Symbol für die Schaltfläche "Add Button" von "Default" auf "No" ändern.

Schließlich ändern Sie den Hover-Randradius der Schaltfläche auf 10px, damit er abgerundet wird, wenn sich die Maus darüber befindet.

Ich habe dies in meiner Bibliothek gespeichert, damit ich das Styling in anderen Schaltflächen verwenden kann, während ich weitergehe.

Und damit ist Ihr zweiter Abschnitt fertig. Du bist fast fertig, Podcaster! Sie runden den dritten Platz ab – im wahrsten Sinne des Wortes!

Homepage der Podcast-Website: Dritter Abschnitt

Dies wird nur ein einzelnes Modul vor einem statischen Hintergrund sein.
Erstellen Sie zunächst ein neues blaues Feld mit einer doppelt breiten Spalte, wie wir es für Abschnitt zwei getan haben, und wählen Sie das Modul „E-Mail-Optionen“ aus dem Menü aus.

Sie werden dieses beleuchtet sehen, was überhaupt nicht zu unserem Design passt. Es ist jedoch eine super einfache Lösung.

Navigieren Sie in die Einstellungen des Moduls und aktualisieren Sie die folgenden Optionen:

Titel: Ich habe den Titel absichtlich leer gelassen
Inhalt: Fügen Sie Ihren Call-to-Action-Klapptext hinzu und zentrieren Sie ihn.
Dienstanbieter: Ich benutze Mailchimp, also habe ich das hier genommen.
Hintergrundfarbe: transparent; Dadurch wird auch die Schaltfläche selbst transparent.

Sie müssen nur noch sicherstellen, dass Ihr E-Mail-Dienst bereitgestellt wird, oder das Formular wird nach dem Speichern und Beenden des Builders nicht angezeigt. Wenn Sie Mailchimp verwenden, finden Sie in der Support-Dokumentation eine großartige Dokumentation zum Auffinden Ihres API-Schlüssels.

Sobald Sie Ihren Schlüssel haben, gehen Sie zu Ihrem WordPress-Dashboard, gehen Sie erneut zu Divi -> Theme Options und geben Sie Ihren Mailchimp-API-Schlüssel in das passend benannte Feld "Mailchimp API-Schlüssel" ein.

Nachdem das gespeichert wurde, müssen Sie nur noch einen Hintergrund für den dritten Abschnitt festlegen, bevor Sie eine schöne, fertige Seite haben. Das Endprodukt sollte ungefähr so ​​aussehen:

Du hast es geschafft! Hurra! Sie haben jetzt eine voll funktionsfähige Homepage für Ihren Podcast. Es ist an der Zeit, eine Aufnahme zu machen und der Welt davon zu erzählen, oder?

Morgen: Erstellen Sie schöne Archive und zeigen Sie Notizenseiten für Ihren Podcast an

Da Sie jetzt eine großartige Homepage haben, können Sie die tollsten Inhalte präsentieren, die Sie haben. Aber wenn deine Fans wahre Fanatiker werden, werden sie tief in deine Show eintauchen wollen.

Morgen zeige ich dir, wie du ein paar einfache, aber schöne Seiten für dein gesamtes Archiv von Podcast-Episoden zusammenstellst, sowie einzelne Seiten für jede Episode, die den Lesern erzählen, was du in jeder Episode besprichst, und ihnen die Möglichkeit geben, sich anzumelden für Ihre super-erstaunliche E-Mail-Liste.

Bis morgen!

Hinweisseite anzeigen:

Archivseite: