Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Move The Divi Audio Module Image To The Top

Nelson Miller Profile Orange
In this tutorial I will show you how to move the Divi Audio module image from the left side to the top and show you why this is helpful.

▶️ Please watch the video above to get all the exciting details! 👆

Exploring The Image Layout Options

By default with a wide column, the image displays on the left side. There is no setting or option to change it.

default image layout of the Divi Audio module

By default in a narrow column, the image displays on the top, and there is no setting or option to change it.

default small column image layout of the Divi Audio module

The goal of this tutorial is to modify the image position to the top even if the column is wide. Here is the final result you will achieve:

modified image layout of the Divi Audio module

What Inspired This Tutorial

A customer using our Divi Carousel Maker plugin wanted to show Divi Audio modules in the carousel as slides. At first, I didn’t understand the issue, but then I realized Divi was placing the image on the left even though there were 3 slides showing – it wasn’t changing to the top orientation due to the carousel modules are added to a fullwidth row. So I began to explore how to solve it, and came up with this tutorial.

Here you can see the issue before using the tutorial:

Divi Audio modules in a Divi Carousel Maker before

Here you can see how great it looks after using the tutorial:

Divi Audio modules in a Divi Carousel Maker after

1. Add A Custom CSS Class To The Menu

The first step is to add a custom CSS class to the Audio module. We are doing this so that our code only affects this specific Audio module on your site. Open the Divi Audio module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-audio-image-top” in the CSS Class input field.

move the Divi audio image to the top

2. Add The Custom CSS Code

The next step is to add CSS code which will move the image, make some adjustments, and remove the space on the left. By changing the Image width, adding a height, and setting the position to relative, it will effectively move the image from the left side to the top above the audio title. After the image is moved, the content area needs adjusted by setting the left margin back to zero in order to fill in the space where the image was located.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*adjust the image position and size*/
.pa-audio-image-top .et_pb_audio_cover_art {
	width: 100%;
	height: 200px;
	position: relative;
	background-size: contain;
}

/*remove the space on the left after moving the image*/
.pa-audio-image-top .et_pb_audio_module_content {
	margin-left: 0;
}

/*add some padding to the top*/
.pa-audio-image-top {
	padding-top: 50px;
}

There are several customization options for you to choose. You can remove the background-size: contain; if you want, which will reset the image to a cover size. You can also adjust the height value to whatever you value you prefer. You can also remove or adjust the padding on the top which shows above the image.

FYI: This would go perfectly with our Divi Dynamic Helper plugin to use the Divi Audio module with a custom field. Take a look!

Divi Dynamic Helper Plugin by Pee Aye Creative
Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart