Welcome to this week’s Divi UI Challenge! Today’s tutorial provides you with the how-to in building a pretty awesome looking Podcast Audio Module. This beauty was certainly inspired by the recent series by Elegant Themes on styling the Divi Audio Module, and here we focus on utilising the module’s settings (plus some CSS) to build a podcast feature.

Here’s a look at what we’ll be building today.

Ok, Let’s go!

Firstly from your Dashboard homepage in the top function bar select +New and Page

Give your page a title (The Podcast) and in the far right function column under Template select Blank Page (this removes the footer and menu from the page which makes it a bit easier to design when previewing back and forth).

Now click on Use the Divi Builder. 

In this tutorial we’re going to be working with the Visual Builder again, so click on the Visual Builder Icon.

This wil bring up an ’empty’ section that looks something like this.

Firstly we’re going to set our page up with a 3-column-row. So click on the Insert Row Icon and select the 3-column-row Option.

An Insert Module box will pop up for the left-hand column, but exit out of that box because we’re going to build the centre column.

Click on the dark grey Add New Module Icon in the centre of the middle column and select Audio.

Under Audio Settings, upload your audio file via the Upload button. Then fill in your Audio Settings as follows.

Title: Podcast Episode

Artist Name: Podcaster 

Album Name: Podcaster Series

Then upload your chosen Cover Art Image via the Upload Button.

Both of our chosen images used in this tutorial are from unsplash.com 

This is a fantastic resource for stock images, with amazing photography. Every image is licensed under CC0 licensing, which essentially means that there is no attribution required, so can be used for anything.

Text Color:  Light

Leave the rest of the General  settings as is, and pop on over to Design Settings

And fill in as follows.

Background Color: Ours is a dark grey (#111111)

Title Font: Abel (All Caps and Bold)

Title Font Size: 16

Title Text Color: Leave blank

Title Letter Spacing: Leave as is (0px)

Title Line Height: Leave as is (1.7em)

Caption Font: Abel (Italic)

Leave everything else and Save and Exit.

Should be looking something like this.

What we’ve done so far does demonstrate that the Divi Builder Audio Module is pretty amazing to start with, but we’re going to add a few extra things to really make it stand out.

Pop on over to the Section Settings (the blue settings icon in the very top left corner)

And upload a Background Image via the Upload Button. 

Ours is once again from unsplash.com

We added some extra padding once it was uploaded (using the visual builder). Do this by ‘hovering’ your cursor over the top (and then the bottom) ‘padded’ sections, you’ll notice the sections will then highlight.

Then click-hold-and-drag the cursor to extend the padded areas at the top and the bottom of the section. We increased the padding to 90px.

Now, click on the Audio Module Settings Icon

All our changes are being made in CSS at the moment, so pop over to there,

Scroll down to Main Element and input the following

padding-top: 10%;

border-radius: 6px;

Then in Audio Cover Art

max-width: 80%;

margin: auto;

border-radius: 4px;

Save & Exit

This is what we should be looking at.

Looking good!

Now, we’re going to add the ‘red bar’ around the Audio Title/Artist/Series.

To do this, pop back into Audio Settings.

And over to CSS.

Scroll right down to Audio Title and input the following.

background-color: #d92f2c;

width: 140%;

left: -20%;

position: relative;

padding-top: 10px;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

Then in Audio Meta input the following.

background-color: #d92f2c;

width: 140%;

left: -20%;

position: relative;

padding-bottom: 10px;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

Then Save & Exit

And this is what our finished product should be looking like…

Looking good! Well done everyone, another week down! As always, let us know if there’s anything you’d like us to tackle in upcoming UI Challenges in the comments section below.

The Download

Want to add this to your Divi Library? Here’s the download for the section. Remember you’ll need to unzip the file to get the uploadable .json file.

Download Now