How to create an audio playlist in Divi

If you need to include audio tracks on your website that feature a play and stop button with information for each song, this tutorial will walk you through how to create one easily using the Divi Theme.

CSS FOR COLUMN SETTINGS INSIDE ROW

display: flex;
align-items: center;
justify-content: center;

Don’t forget to change your row to have a custom gutter width of 1!

CUSTOMIZE THE PLAY BUTTON FOR COMPACT WP AUDIO PLAYER

.sc_player_container1 .myButton_play {
    background: transparent url(https://domain.com/yourimagehere.jpg) no-repeat !important;
  background-size:42px !important;
    cursor: pointer !important;
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}
.sc_player_container1 .myButton_stop {
    background: transparent url(https://domain.com/yourimagehere.jpg
) no-repeat !important;
background-size:42px !important;
    cursor: pointer !important;
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

Resources

Here are links to the programs and sites I mentioned in the video.

Plugin used in the video: https://wordpress.org/plugins/compact-wp-audio-player/

Divi: https://bit.ly/3mun7TN
WordPress: https://wordpress.org/

Udemy
View The Course

Want to learn with me?

Check out my digital course, Recipe For A Sales Page on Udemy. This course features my recipe for a sales or landing page and identifies all the ingredients you need to make a compelling page that will capture your reader’s attention and turn them into paying customers.

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.

Divi WordPress Theme