How to Create a Beautiful Podcast Page with Divi

Last Updated on September 20, 2022 by 13 Comments

How to Create a Beautiful Podcast Page with Divi
Blog / Divi Resources / How to Create a Beautiful Podcast Page with Divi

You have an awesome podcast. But your website may need some work. It does its job, but it doesnโ€™t stand out. Never fear, podcaster! Iโ€™ve got you covered.

Iโ€™m going teach you a simple way to use Divi to create not only an easily updated homepage for your podcast, but also a stylish archive page and a template for individual episodes.

Todayโ€™s Final Product: Three-Section Podcast Homepage

I wanted to keep the design simple and as minimal as possible, without losing the personality that a good podcast has to maintain. This design is for a fictional indie podcast called Youโ€™re An All-Star, whose focus is shoes and being happy. I wanted the design to reflect that theme.

The first section uses a bright color to draw the userโ€™s attention, provides a quick blurb about what the podcast is about on the left, and uses the Divi Audio Module to present a podcast episode for immediate listening.

As the user scrolls down, the aesthetic shifts slightly into the Selected Episodes section, which again uses the Divi audio module to present easily accessible content, as well as an option to visit the showโ€™s archives. The background is parallax to draw attention to the episodes themselves.

The final section is simply an email opt-in. Every brand, podcast, blog, and company needs one, and in order to make it stand out, I switched this section back to a color background and made it small enough that the parallax from the second section would help call additional attention to it.

Below, Iโ€™ll give you a step-by-step tutorial on how I styled and created each module, section, and page of the site.

Assets Youโ€™ll Need

The great thing about this design is that it doesnโ€™t take a lot of resources outside of Divi itself. All youโ€™ll need are 5 high-res images to use for backgrounds and whatever podcast art and thumbnails you use for your episodes.

All of my images came from Unsplash (all of the images for this site can be found in this collection). I used Preview to convert some of them to black-and-white, but you can use whatever image editing software you want. Pretty much all of them let you either select a grayscale/black-and-white option or lower saturation to zero.

Other than that, all the resources youโ€™ll need are right inside of Divi. Letโ€™s get to it, then!

Podcast Website Homepage: First Section

Start out by creating a new page in your WordPress dashboard and setting it as your siteโ€™s front page. (I conveniently named mine โ€œHome.)

Now go back to edit your new page. Inside the Page Attributes box on the right sidebar, change the default template to the blank page template.

First thing, we create a three-column row.

Inside the middle column, we want to insert a Divi divider module.

Inside the divider settings, under the Design tab, set the height to 600. This will not only keep the two outer columns (the sectionโ€™s main content) separated, but will also keep the section tall enough to allow adequate white space on a number of viewport resolutions. (While remaining hidden on mobile by default.)

Now, in the left column, we are going to add two text modules. I decided that for this project, a horizontal header would have looked out of place, so the first text module will simply be a title.

Under the content tab of the Text Settings, add the title to the content box.

In the Design tab, update the Text Color to โ€œLightโ€ and change the Text Orientation to โ€œCenterโ€. Then adjust the text font and size. I chose the font โ€œSpecial Eliteโ€ because of its distressed look and then set its size to 60. Also set the Text Line Height to 1em.

Once thatโ€™s taken care of, itโ€™s time to move to the second text box. Weโ€™re using this one as a quick blurb for the podcast.

In the Content tab, Update the following options:

Content: enter your text for the description (Iโ€™d suggest a truncated version of the description you use on iTunes and other services)
Background Color: rgba(0,0,0,0.4)

In the Design tab, select โ€œLightโ€ for the text color and select โ€œCenterโ€ for text orientation like you did in the previous box. Also set the text font to โ€œSpecial Eliteโ€ at 20px size.

Finally, add 10px of padding around the entire box of text.

After that, head to the Advanced tab and, under Custom CSS, enter this into the Main Element field to round the corners of the text box:

border-radius: 10px;

Once youโ€™ve done that, youโ€™re done with the first two columns of your new site! Hooray! Save your work by clicking the purple circle at the bottom of the page and hitting the green save button.

Excellent work!

To make it a little more visually appealing, though, we need to set the sectionโ€™s background, so go into settings of the blue (section) box and upload a background image. I tend to keep mine around 1920ร—1280 resolution.

You should see something that looks like this by now:

By now, you may be asking yourself: โ€œWhat about the podcasts? Itโ€™s a podcast site, and we havenโ€™t done anything with a podcast yet!โ€ You are totally right. So letโ€™s get some audio going by selecting the (you guessed it) audio module in the third column of our row.

The default audio module doesnโ€™t exactly fit the theme weโ€™re going with for this site, so letโ€™s take it from this:

To this:

Open up the audio moduleโ€™s settings. The Audio field is where you can either upload your own file to whatever host you use, or you can directly link to the media file of whatever podcasting service you use. I use Libsyn for mine, so I just grabbed the media URL and pasted it in.

(Fun fact: anyone who clicks play on your site through this module also gets counted as a download in your Libsyn dashboard. Score!)

Then youโ€™ll want to put the title of the episode you linked to under Title and your name under Artist Name (or whatever you go by on your show. For our fictional podcast about shoes, how could I choose anything other than Chuck Taylor?). The Album Title will be your podcastโ€™s name.

Next letโ€™s change that greenish-teal color to a totally transparent background. The color doesnโ€™t matter. Just slide the transparency bar all the way to the bottom, or until the last digit of the RGBA is 0.

For the cover art image, itโ€™s best to use either this particular episodeโ€™s thumbnail or the podcast art you use on iTunes and elsewhere.

Once the podcast details are sorted, head into the Design tab so you can really make this player yours.

Select โ€œLightโ€ for the Text Color option. Set the fonts to โ€œSpecial Elite,โ€ the title size to 50px, and the caption size to 20px.

I also set the top margin on this particular player to 50px because this margin keeps the player centered horizontally in the section, and when you swap to mobile, it allows for good spacing between elements. (The setting applies to all viewport sizes, as long as you donโ€™t click the smartphone icon.)

Because the background is transparent, thereโ€™s no need to round the corners to match the text box in the first column, so hit save.

Because this podcast player is the star of the show, we donโ€™t want to have to recreate it each time, so weโ€™re going to save this module to the Divi library, which will allow us to easily duplicate it around the site and edit as we need to.

Enter whatever template name you want and DO NOT check โ€œMake this a global item.โ€ Weโ€™ll be using that option in Part 2 of this series, but not right now.

All right! Just one more element and the first section is complete. (Donโ€™t worry, though. Itโ€™s the most involved of them all.)

Most podcasts keep a blog or show notes for listeners to go back to and revisit what was discussed in the episode. Your podcast is no different, Iโ€™m sure. Adding a link to your podcastโ€™s shownotes is totally painless.

Create a new text block in the third column, open up the settings, and type whatever link text you want. For this example, itโ€™s the self-explanatory โ€œread the show notes.โ€

Click the icon in the toolbar to add a link, and type/paste in the URL for your show notes. (Again, in Part 2, Iโ€™ll show you how to create and style blog posts for show notes.) Because I have the WordPress permalink structure set to โ€œPost Name,โ€ all I have to do is type in the slug of the post I wrote for this episode.

(Side note: By not entering the domain information and only the slug, you are telling WordPress to direct users to that page, regardless of domain information. This is really useful in case you ever change domains, and it helps prevent broken links!)

Just save that link, and youโ€™re ready to go!

You should also save this module to your library in the same way you did your podcast player.

Voila! Your very ownโ€ฆwait. Uh oh. Your show notes link isโ€ฆisโ€ฆugly!

No worries, though. Ugly links are an easy fix! Even if you use the settings in the text module to change the text color, it wonโ€™t affect these words because theyโ€™re a link.

Head to the Custom CSS field in your Divi โ€“> Theme Options and enter this at the bottom.

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

What this will do is keep the text white (in line with the rest of the siteโ€™s text, make sure itโ€™s underlined like most other links, and turn it bold when you hover over it with a mouse.)

Make sure you save it, and now your podcast player is complete!

And for the last bit of tweaking in this first section, click into the Row settings (green box).

Select โ€œUse Custom Width.โ€ Make sure the units are set to percentages and move the slider over to 80. Doing this will make that row take up 80% of whatever size viewport the user has, which keeps everything from bunching up.

And so is the top section of your podcastโ€™s new website! It should look something like this by now.

Save it, and just like that, most of the work is done! And thanks to Diviโ€™s library feature, the next couple of sections are gonna fly by! Just watch.

Podcast Website Homepage: Second Section

This section is going to showcase selected episodes of our podcast and allow users to visit the archives (which are, like the show notes pages, coming in Part 2).

The first thing weโ€™re going to do is actually create a new section by clicking on the blue + at the bottom of the section and adding a regular section. Doing so will create another blue box in the visual builder. Add in a single-column row.

When we have that in place, letโ€™s add a background the same way we did above, only this time, we want to select the โ€œUse Parallax Optionโ€ in the section settings. Keep the dropdown on โ€œTrue Parallaxโ€ instead of โ€œCSS.โ€

This is the only section weโ€™ll use with parallax on the homepage. I think that using the effect sparingly calls more attention to the content you want to highlight.

Save and then insert a new text box into the row. Type in โ€œSelected Episodes,โ€ center it in the WYSIWYG editor, and head to the settings to make the text font to โ€œSpecial Eliteโ€ and the text size 50px. You should see something like this now:

Below that, make a new three-column row by clicking the green +, and in the first column, enter the โ€œAdd From Library Tab.โ€ (You wonโ€™t have all these library options right now, but you will later!)

Select the โ€œPodcast Episodeโ€ or whatever you named your player above. Then add another module under it, navigate to the library again, and add your saved โ€œShow Notes Linkโ€ module. Do this for all three columns, until you see this:

Continue doing this until youโ€™ve added all the episodes you want. Edit the title, album art, and show notes links for each episode. I just added a second row and only filled in the second column to make the design fit with my chosen background.

The only thing left for this section is adding a โ€œBrowse the Archivesโ€ button. Create a new row at the very bottom by clicking the green + and use a single column layout. Insert a โ€œButtonโ€ module. This will create a very hard-to-read button (depending on your background, of course), which will need some simple styling.

Open the Button moduleโ€™s settings and enter the URL slug for the page that will be your archives. I went with the obvious โ€œ/archives,โ€ used the text โ€œBrowse the Archives,โ€ and then centered the button itself.

In the settings tab, we click the โ€œUse Custom Styles for Button,โ€ and will set the background color to โ€œ#ffffffโ€ and the text color to โ€œ#000000โ€ (thatโ€™s white and black, respectively.)

Then weโ€™ll want to round the corners of the button by setting the Border Radius to 10px, set the font to โ€œSpecial Elite,โ€ and change the Add Button Icon from โ€œDefaultโ€ to โ€œNo.โ€

FInally, change the Button Hover Border Radius to 10px so itโ€™s rounded when the button has a mouse over it.

I saved this to my library so that I could use the styling in other buttons as I go along.

And with that, your second section is done. Youโ€™re almost done, podcaster! Youโ€™re rounding thirdโ€“literally!

Podcast Website Homepage: Third Section

This is just going to be a single module over a static background.
First, create a new blue box with a double-width column like we did for section two and select the โ€œEmail Optinโ€ module from the menu.

Youโ€™ll see this lit, which does not fit our design at all. Itโ€™s a super easy fix, though.

Navigate into the moduleโ€™s settings and update the following options:

Title: I left the title intentionally blank
Content: add your Call to Action blurb and center it.
Service Provider: I use Mailchimp, so thatโ€™s what I went with here.
Background Color: transparent; this also makes the button itself transparent.

The only thing you have left to do is make sure your email service is provided, or the form wonโ€™t show up after you save and exit the builder. If you use Mailchimp, thereโ€™s great documentation on finding your API key in their support documentation.

Once you have your key, go to your WordPress dashboard, head over to Divi โ€“> Theme Options once again, and enter your Mailchimp API key in the aptly named โ€œMailchimp API keyโ€ field.

After that is saved, the only step you have left before you have a beautiful, finished page is to set a background for the third section. The final product should look something like this:

You did it! Hooray! You now have a fully functional homepage for your podcast. Time to hit record and tell the world about it, right?

Tomorrow: Creating Beautiful Archives and Show Notes Pages for your Podcast

Since you have a great home page now, you can showcase the most awesome content youโ€™ve got. But if your fans become true fanatics, theyโ€™re going to want to dive deep into your show.

Tomorrow Iโ€™ll show you how to put together some simple-yet-beautiful pages for your entire archive of podcast episodes, as well as individual pages for each episode that tell readers what you discuss in each episode and give them a chance to sign up for your super-amazing email list.

See you tomorrow!

Show note page:

Archives page:

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack thatโ€™ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack thatโ€™ll help you get your next Modeling...

View Full Post

13 Comments

  1. Knocked this out during my lunch break today. Your instructions were very easy to follow. Thanks!

  2. Very cool, thanks for the article!

    Did my first podcast website using Divi for a client and we’re happy with the results.

    Might consider using a CPT in the future, but curious what plugins podcast creators are using to maximize their user experience and get the most conversions (subscribers, downloads, follows, likes, etc).

    • That’s a really good point about the CPT. With a single-purpose site, I haven’t used one for it, but it would be incredibly useful–especially if it’s coming through something like BlueBrry’s Powerpress. Combined with Apple’s recent WWDC announcement regarding podcast analytics, there is a lot of room for growth in that limited field because the options available are kind of stinky.

      I’d love to see the podcast site you set up, too!

      • Sorry to be a dufus but, whats CPT?

        • It’s a Custom Post Type. ๐Ÿ™‚

  3. Please please please add playback speed control option to your audio module. That’s super great for podcasts… In the mean time are there any plugins out there that do this. I know Pat Flynn has one but I think it’s a monthly subscription.

  4. Hi,

    ok thats a fine looking Audiopage. But no Podcast Page.

    Where can i download the Episodes?

    What happens, if a new Episodes goes online?

    What did you think about creating an How to for an real Podcast page? Something using Podlove? Or an external Podcast Service?

    The Pages are build with Extra or Divi ๐Ÿ˜‰

    • Tomorrow’s article has the individual episode pages and archives. ?

      And right now, the episode up top has to manually be added to the home page, but you can have a new episode launch automatically with something like Libsyn’s OnPublush and then go in to add the styling as needed to tweak on the ep pages.

  5. Thank you Nathan. So appreciate all you do to support the Divi community.

  6. Ironic given you still haven’t fixed your iTunes Divi Nation problem…

  7. My podcast page is part of my website but love this look, and can’t wait what for tomorrow’s lesson.

    • I am, too! I really like the Archives and Show Notes pages. They’re simple but stylish, if I do say so myself. ?

  8. thank you ๐Ÿ™‚ it would be great if you could share the template for those who are not webdesigners like me ๐Ÿ˜‰

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today