Blogging

How to Add a Fixed “Latest Episode” Audio Bar to Your Divi Header

If you’re hosting a podcast website with Divi, chances are high you’re using the built-in Audio Module already. Now, if you’re looking for a special way to put your latest episode in the spotlight, you’re going to love this tutorial. Today, we’ll show you how to include a fixed latest episode audio bar in your Divi header. We’ll include a Text Module loop animation to draw attention to the audio bar and you’ll be able to download the global header template, including the audio bar, as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

audio bar

Mobile

audio bar

Download The Audio Bar Header Template for FREE

To lay your hands on the free audio bar header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Go to Divi Theme Builder & Start Building a Global Header
Go to Divi Theme Builder

Start by going to the Divi Theme Builder in the backend of your WordPress website.

audio bar

Start Building Global Header

Then, start building a global header.

audio bar

Create Global Header with Latest Episode Audio Bar
Section Settings
Background Color

Once inside the template editor, you’ll notice a section. Open that section and change the background color. We’re matching this global header to the Podcast Layout Pack but feel free to use any other kind of design style of your choice.

Background Color: #1a1844

audio bar

Spacing

Then, move on to the design tab and add some custom padding values across different screen sizes.

Top Padding: 50px (Desktop), 80px (Tablet & Phone)
Bottom Padding: 0px

audio bar

Box Shadow

To separate the header from the page/post content, we’ll add a box shadow to our section as well.

Box Shadow Blur Strength: 80px
Shadow Color: rgba(0,0,0,0.3)

audio bar

Add Row #1
Column Structure

Continue by adding a first row to your section using the following column structure:

audio bar

Background Color

This entire row will be dedicated to our latest episode audio bar. But before we get to that, open the row settings and change the background color.

Background Color: #fe4943

audio bar

Sizing

Move on to the row’s design tab and change the sizing settings next.

Use Custom Gutter Width: Yes
Gutter Width: 1
Width: 90%
Max Width: 100%

audio bar

Spacing

We’re adding some custom top and bottom padding too.

Top Padding: 10px
Bottom Padding: 10px

audio bar

Border

Then, we’ll go to the border settings and we’ll add some rounded corners.

Bottom Left: 10px
Bottom Right: 10px

audio bar

Box Shadow

We’re including a box shadow as well.

Box Shadow Blur Strength: 50px
Shadow Color: rgba(0,0,0,0.3)

audio bar

Position

Next, we’ll go to the advanced tab and make the entire row fixed. We’ll increase the row’s z index too to make sure it overlaps the second row we’ll add to our section.

Position: Fixed
Location: Top Center
Z Index: 11

audio bar

Column 1 Visibility

Complete the row settings by setting the column 1 overflows to hidden. This will help with the text animation which you were able to notice in the preview of this post. By setting the overflows to hidden, we’ll make sure the animation is hidden beyond the column container.

Horizontal Overflow: Hidden
Vertical Overflow: Hidden

audio bar

Add Text Module to Column 1
Add Content

Time to add modules, starting with a Text Module in column 1. Add some copy of your choice.

audio bar

Text Settings

Move on to the module’s design tab and change the text settings accordingly:

Text Font: Open Sans
Text Font Style: Uppercase
Text Color: #ffffff
Txt Size: 15px
Text Letter Spacing: 3px

audio bar

Spacing

We’ll add some negative left margin to our module as well. This will help with our loop animation.

Left Margin: -190%

audio bar

Animation

Last but not least, add the following loop animation to your Text Module:

Animation Style: Slide
Animation Direction: Left
Animation Duration: 9000ms
Animation Intensity: 30%
Animation Starting Opacity: 100%
Animation Speed Curve: Linear
Animation Repeat: Loop

audio bar

Add Audio Module to Column 2
Remove All Content

In column 2, the only module we need is an Audio Module. Make sure the content is removed.

audio bar

Upload Audio File

Then, upload an audio file containing your latest episode.

audio bar

Remove Background Color

Remove the module’s background color next.

audio bar

Spacing

Then, move on to the design tab and remove some default padding values by adding ‘0px’ to them.

Top Padding: 0px
Bottom Padding: 0px
Left Padding: 0px

audio bar

Add Row #2
Column Structure

On to the next row. This row will contain our logo, menu and social media icons. Choose the following column structure:

audio bar

Sizing

Without adding modules yet, open the row settings and modify the sizing settings accordingly:

Use Custom Gutter Width: Yes
Gutter Width: 1
Max Width: 100%

audio bar

Spacing

Remove all default top and bottom padding next.

Top Padding: 0px
Bottom Padding: 0px

audio bar

Add Menu Module to Column 1
Select Menu

Then, add a Menu Module to column 1 and select a menu of your choice.

audio bar

Upload Logo

Upload a logo next.

audio bar

Remove Background Color

Then, remove the default white background color.

audio bar

Menu Text Settings

Move on to the design tab and change the menu text settings as follows:

Menu Font: Open Sans
Menu Text Color: #ffffff (Desktop), #1a1844 (Tablet & Phone)
Menu Text Size: 15px
Text Alignment: Right

audio bar

Dropdown Menu Text Settings

We’re changing the dropdown menu line color in the dropdown menu settings too.

Dropdown Menu Line Color: #ffffff

audio bar

Icons Settings

Along with the hamburger menu icon color in the icons settings.

Hamburger Menu Icon Color: #fe4943

audio bar

Sizing

And we’ll complete the module settings by assigning a logo max width in the sizing settings.

Logo Max Width: 65%

audio bar

Add Social Media Follow Module to Column 2
Add Social Networks

In the second column of our second row, we’ll need a Social Media Follow Module. Add the social networks of your choice.

audio bar

Alignment

Move on to the module’s design tab and change the module alignment.

Module Alignment: Center

audio bar

Spacing

Add some custom margin values next.

Top Margin: 20px
Bottom Margin: -4% (Tablet & Phone Only)

audio bar

Border

And complete the header by adding some rounded corners to the module’s border settings. Once you’ve completed the global header, make sure to save all Divi Theme Builder changes and view the outcome on your website!

All Corners: 50vw

audio bar

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

audio bar

Mobile

audio bar

Final Thoughts

In this post, we’ve shown you how to get creative with Divi’s built-in Audio Module. More specifically, we’ve shown you how to include a fixed audio bar in your custom-built global header. This is a great way to emphasize your podcast’s latest episode. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

The post How to Add a Fixed “Latest Episode” Audio Bar to Your Divi Header appeared first on Elegant Themes Blog.

Read more: elegantthemes.com

Tags

Related Articles

Back to top button
Close
Close