Music block

Music block helps you add audio to your page. For example, creatives can add their work samples or promote their tracks on the website using Music block. 

Here’s how to add the Music block:

1. Choose a location where you want to add your Music block and click the Add a block (+) Plus button.
2. In the Block library, scroll down the list to the Music block (or use the search at the top of the menu to reach it faster) and click it.  
3. Click on the pre-designed Music block layout to add it to your page. 

Customizing music block settings

You have several customization options for the Music block with the control pane. To activate its control pane, click anywhere on the block and then click the Block settings icon. 

In the Layout tab, you can choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to the element’s name.

In the Appearance tab, you can make the following changes:

• Block style: Change the color scheme of the block.
• Block spacing: Change the whitespaces on the top and bottom of the block.
• Media settings: Add a black & white filter to the video within this block.

Read about block customization options in detail in our Block settings article. 

Editing block elements

To replace the demo text with your own text in the Music block, click the text element and type new text in. You can also paste the text from a text editor you are using.

Learn more about how to edit your text.

Note: Remember to click Save in the top right corner of your screen to keep the changes and Publish to make the changes live.

Embedding the music

The best way to add an audio file to your website is by using a sound hosting platform, for example, SoundCloud or Mixcloud. Upload the file to the sound hosting platform and receive an HTML embed code or a URL (link). Copy the code or the URL and paste it to the respective tab in the Sitebuilder. 

Here’s how to do this: 

1. Click the audio container to activate the control pane and click the iFrame settings icon.
   
   
2. In the iFrame settings, choose the corresponding tab: Embed URL for links and Embed code for the code snippet you previously copied from the sound hosting platform.
3. Paste the link or the code to the corresponding field and click Submit.

Your audio file will be added to the website right away. 

Editing buttons

You can edit buttons in your music block to lead to different pages on your website or to an external link. To edit buttons, follow the steps outlined here: Editing buttons.

Duplicating the Music block

If you would like to showcase more music on your page, you can make copies of the Music block. 

Here’s how you can do it:

1. Hover over the Music block to trigger its control pane.
2. Click the Duplicate icon.
   
   
3. The identical Music block will appear beneath the original one. Edit it as described in this tutorial.