If you want to embed an audio file to your website, to show your latest song, podcast or something you have been listening to, the Audio module of the page designer is the perfect solution.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the audio module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

The content tab is where you will add the contents that will appear in your module, including the audio file.

Text

Define the title of the audio module, which is usually the name of the song or podcast, the artist name that will show below the title, and the album name if you are uploading a song from an album.

 

Audio

Upload the audio file here. The maximum upload size is 50MB.

Image

Here you can upload a cover art image, that will appear to the left of above the audio controls, depending on the column width.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Text

Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.

Image

Adjust the tonality of the image, including hue, saturation, blur, and brightness.

Title Text

Define the heading level, font, color, alignment, line height, and other settings for the title.

Caption Text

Customize the font settings for the caption text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

For this example, we simply added an audio file, a background image, and the text presented in light. This is what we get!