Avada Theme Tutorial: Make Your Music or Podcast Easy to Embed on Your Website with Avada SoundCloud

If you aremusic creator,podcasterOr if you want to embed high-quality audio content in your website, the Avada theme offers the SoundCloud Elements would be a very useful tool. This post will give you details on how to use the Avada (used form a nominal expression) SoundCloud ElementsSeamlessly integrate SoundCloud music or podcast content into your website to create a more compelling web experience.

What is a SoundCloud element?

SoundCloud is a globally recognized music and podcast sharing platform that allows users to upload their own audio content as well as listen to music or shows from other creators. While Avada's SoundCloud Elements, you can simply copy a link to the SoundCloud The content on the page is embedded into the web page without additional plug-ins or complex configurations.

How do I use SoundCloud elements?

Step 1: Insert SoundCloud Element

In Avada Builder, select where you want to insert the audio and click "Adding Elements".

Go to the element form and search for "SoundCloud" and just click Add.

Step 2: Configure SoundCloud Element Parameters

After adding the element, you will see a set of setup items, here is an explanation of the key parameters:

1. SoundCloud URL (required)

This is the most important option. Paste the link to the SoundCloud audio you want to embed here.sound frequencywill play directly in your website.

⚠️ Note: Make sure you own the copyright to the audio.

2. Layout

Two layouts are provided:

• Classic: Default appearance, clean and simple.
• Visual: A version with a background album cover is more visually appealing.

3.Show Comments

• Set it to "Yes" when a user comment is displayed below the player.
• Hover to see specific comment time points and jump.

4. Show Related

• This option displays content similar to the audio at the end of the audio playback.

5. Show User

• The SoundCloud username and avatar that published the audio will be displayed at the top of the player.

6. Autoplay

• Set to "Yes" automatically starts playing when the page loads afterward (caution is advised so as not to disturb the user).

7. Color (icon color)

• Selecting the color of elements such as the play button in the player matches the color scheme of your website.

8. Dimensions

• heightSupport for pixels or percentages (e.g. 100%)
• high degreeOnly pixel settings are supported (e.g. 750px)

9. Margin (outer margin)

• Set the spacing around this player element to fit the overall layout of your page.

10. Element Visibility

• Control how the element is shown and hidden on different screen sizes (desktop/tablet/mobile).

11. CSS Class / CSS ID

• For further customization, the element can be assigned a custom class name or ID for use with CSS.

usage example

If you want the player background to show the album art and take up more space, you can set it like this:

• Layout: Visual
• Height: 750px
• Show Comments: Yes
• Show User: Yes
• Autoplay: No

This configuration is not only aesthetically pleasing, but also enhances visitor engagement.

summarize

Avada's SoundCloud element is a combination of beauty, functionality, and convenience that is particularly well suited:

• Musicians embedding original songs
• Podcasters show what's on the program
• Webmasters presenting audio lessons or background music

With just a SoundCloud link, you can integrate the audio playback experience into your WordPress websitein it, easily enhancing page appeal and interactivity.