The Music block helps you add audio to your page – for example, creators can showcase samples of their work or promote their tracks on their site.
Adding the Music block
- Choose where you want the block and click Add a block (+).
- In the Block library, scroll down to Music block (or use the search field at the top of the menu) and click it.
- Click the ready-made Music block layout to add it to your page.
Customising the Music block settings
Click anywhere on the block, then the Block settings icon.
In the Layout tab you can choose which elements appear – remove the blue tick next to an element to hide it.
In the Appearance tab you can change:
- Block style: the block’s colour scheme.
- Block spacing: the space above and below the block.
- Media settings: add a black-and-white filter to the media in the block.
Editing block elements
Click a text element to replace the demo text, or paste in text from elsewhere. Remember to click Save in the top right to keep your changes, and Publish to make them live.
Embedding music
The best way to add an audio file to your site is to use an audio hosting platform such as SoundCloud or Mixcloud. Upload your file there, get an HTML embed code or URL, and paste it into Sitebuilder:
- Click the audio container to activate the control panel, then click the Settings icon.
- The Settings window has two tabs: Media and Appearance.
The Media tab controls how the audio is embedded. In the Embed via dropdown, choose:
- URL – shows a field for audio links.
- Code – shows a field for iframe code.
Paste the link or code into the matching field and click Save, or go to the Appearance tab to customise how the embed looks.
The Appearance tab controls the visual frame around the embedded content:
- Border – turn a border on or off.
- Shadow – turn a shadow on or off.
- Corners – turn on to adjust the iframe’s corner radius. You can set all four corners together, or click Adjust corners for iframe to edit each one individually.
Click Save when done. Your audio is now on the page – to resize the container, click it to activate the resize handle on the bottom edge and drag it.
Editing buttons
You can edit the buttons in your Music block to link to different pages on your site, or to an external link.
Duplicating the Music block
- Hover over the Music block to activate its control panel.
- Click the Duplicate icon.
- An identical Music block appears below the original – edit it as described above.