Soundcloud Element

08/10/2019

The Soundcloud Element allows you to easily embed a SoundCloud track directly into your page. You can choose the layout of the track, as well as display various metadata. Read below to discover more about this useful media element.

How To Use The Soundcloud Element

The Soundcloud Element allows you to quickly embed Soundcloud files anywhere on your site.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Soundcloud’ element and click it to bring up its options window.

Step 4 – Using the Soundcloud Element is very easy. Firstly, add the url to the Soundcloud file you wish to embed, and then, choose the layout. There are also options for showing related items, users, and comments (these can only be turned off on tracks uploaded with a Pro Plan) as well as some styling and sizing options.

Step 5 – Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the Soundcloud embed, and remember you can come back into the element to fine tune it.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

  • SoundCloud URL – The SoundCloud URL, ex: https://soundcloud.com/zaaali/miles-davis-kind-of-blue-26-03.

  • Layout – Select the layout of the SoundCloud embed. Choose from Classic or Visual.

  • Show Comments – Choose whether to display comments. Note: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan.

  • Show Related – Choose whether to display related items. Note: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan.

  • Show User – Choose whether to display the user who posted the item. Note: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan.

  • Autoplay – Choose whether to autoplay the track. Note: SoundCloud does not allow autoplay on mobile devices.

  • Color – Select the color of the element.

  • Dimensions – In pixels (px) or percentage (%). Can be independant, ex. 100% width, 100px high.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Global Options

There are no Global Elements for the SoundCloud Element.

Soundcloud Element Parameters

Copy to Clipboard
    • url – The URL path of the SoundCloud track to embed. For example, http://api.soundcloud.com/tracks/110813479.
    • layout – Choose from classic, or visual. Set the SoundCloud’s layout.
    • comments – Choose from yes, or no. Show or hide comments.
    • show_related – Choose from yes, or no. Show or hide related items.
    • show_user – Choose from yes, or no. Show or hide the track’s author.
    • auto_play – Choose from yes, or no. Enable or disable autoplay.
    • color – Accepts a hexcode ( #000000 ). Sets the track’s color.
      • width – Accepts a pixel or percentage value. For example, 1px. Sets the width.
      • height – Accepts a pixel or percentage value. For example, 1px. Sets the height.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.