Divi UI Challenge #7 – Podcast Audio Module

by | Nov 20, 2016 | Divi UI Challenge, Tutorial

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.

Video Tutorial

Ok, Let’s go!

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

Add new 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).

Blank Page under Template

Now click on Use the Divi Builder. 

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.

Use Visual Builder

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

screen-shot-2016-11-03-at-11-42-12-am

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.

3-column-row-select

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.

screen-shot-2016-11-19-at-10-05-09-pm

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

Design

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.

Save & 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)

screen-shot-2016-11-03-at-10-20-40-am

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

screen-shot-2016-11-20-at-11-25-21-am

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

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.

screen-shot-2016-11-20-at-11-25-21-am

And over to CSS.

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

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

Get 1 Free Divi Layout Pack, Child Theme or Plugin

In your Inbox. Once a month. Every month.

Want Free Divi Resources?

Subscribe to receive a free Child Theme, Layout Pack or Plugin in your inbox. Once a month. Every month.

Welcome. :). Check your inbox for your first Divi Freebie.

Interested in levelling up your Divi skills?

We're creating something special. A space where we can share and teach what we know and what we do with Divi. If you're interested in hearing when it launches, add your email here.

Brilliant! We'll be in touch as we approach launch. :)

Pin It on Pinterest