Divi UI Challenge #7 – Podcast Audio Module
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
Then in Audio Cover Art
Save & Exit
This is what we should be looking at.
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.
Then in Audio Meta input the following.
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.
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.
Get 1 Free Divi Layout Pack, Child Theme or Plugin
In your Inbox. Once a month. Every month.