How To Move The Divi Audio Module Image To The Top Tutorial by Pee Aye Creative

How To Move The Divi Audio Module Image To The Top

In this tutorial I will show you how to move the Divi Audio module from the left side to the top and show you why this is helpful.
Categories: Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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

Last updated May 25, 2023 @ 1:09 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

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.

Recent Posts

0

Your Cart