Elementor Sound Player Widget

Key Features of the Elementor Sound Player Widget

• Customizable Audio Controls: Control the audio player’s volume, play/pause functionality, and seek options.
• Visual Customization: Style the player, its buttons, background, and text to match your website’s aesthetic.
• Multiple Audio File Support: Easily upload and display your audio files directly in the widget.
• Interactive Buttons: Includes 30 seconds back and forward buttons for enhanced navigation within your audio content.
• Responsive Design: Fully responsive and optimized for desktop, tablet, and mobile devices.
• Dynamic Audio Player: Customize the title, subtitle, and seek bar, allowing for a full-featured audio experience on your website.

Requirements

To use the Elementor Sound Player Widget, you will need:

• Elementor Free Version: The core Elementor page builder.
• Vertex Addons for Elementor: This plugin includes the Sound Player widget and other extended features.

Install and Activate the Elementor Sound Player Widget

To activate the Elementor Sound Player Widget, please follow the steps in our Widget Activation Guide.

How to Configure the Elementor Sound Player Widget in Elementor

Once the widget is installed and activated, follow these steps to configure the Elementor Sound Player Widget. You can customize the widget by accessing three main tabs in the Elementor editor: Content, Style, and Advanced.

Content Tab

1. Audio:
   • Title: Enter a title for your audio file, such as “Podcast Episode 1” or “Sample Music Track”.
   • Subtitle: Provide a subtitle to give more context about the audio, such as “Artist Name” or “Episode Summary”.
   • Audio: Upload your audio file. The widget supports MP3, WAV, and other common audio formats.
   • Image: Add an image (album cover, podcast logo, etc.) that will be displayed alongside the audio player.
2. Settings:
   • Sound Volume: You can enable or disable the volume control feature, allowing users to adjust the sound.

How to Style the Elementor Sound Player Widget?

The Style tab allows you to fine-tune the appearance of your sound player, making it match your website’s design and improve the overall user experience. Below are the main styling options.

Box Styling

1. Background Type: Choose between a Classic solid color or a Gradient background for the player.
2. Padding: Adjust the inner spacing of the sound player to control how much room is around the audio controls.
3. Border Type: Set the border style for the player. Options include solid, dashed, or no border.
4. Border Radius: Round the corners of the player box for a softer look.
5. Box Shadow: Add a shadow effect to make the sound player stand out more on your page.

Image Styling

1. Background Type: Choose between a Classic solid color or Gradient for the background of the image.
2. Size: Adjust the image size for the album art or audio cover.
3. Margin: Control the space around the image.
4. Border Type: Choose a border style for the image area.
5. Border Radius: Round the corners of the image to match the player design.
6. Box Shadow: Apply a shadow to the image for more depth.

Title Styling

1. Text Color: Select a color for the title text.
2. Typography: Customize the font size, family, weight, and style for the title.
3. Alignment: Choose whether to align the title to the left, center, or right.
4. Padding: Adjust padding around the title text.
5. Border Type: Define a border around the title if desired.
6. Border Radius: Round the corners of the title container.

Subtitle Styling

1. Text Color: Choose the color for the subtitle text.
2. Typography: Set the font size, weight, and style for the subtitle text.
3. Alignment: Align the subtitle left, center, or right.
4. Padding: Adjust the padding around the subtitle.
5. Border Type: Add a border style around the subtitle text.
6. Border Radius: Round the corners of the subtitle container.

Play/Pause Button Styling

1. Background Type: Customize the button background, choosing from a Classic color or a Gradient.
2. Text Color: Adjust the text color of the play/pause button.
3. Size: Set the size of the play/pause button.
4. Margin: Customize the space around the play/pause button.
5. Padding: Adjust the padding within the button for a more balanced look.
6. Border Type: Choose the border style for the play/pause button.
7. Border Radius: Round the corners of the play/pause button.

30 Seconds Back & Forward Buttons

1. Text Color: Set the color of the text within the 30-second back and forward buttons.
2. Size: Adjust the size of these navigation buttons.
3. Margin: Set the margin around the buttons to position them effectively.

Volume Button Styling

1. Text Color: Choose the text color for the volume button.
2. Size: Customize the size of the volume button.
3. Margin: Set the margin for positioning the volume button on the player.

Volume Box Styling

1. Background Type: Choose between a Classic color or a Gradient for the volume box background.
2. Bar Color: Set the color of the volume bar.
3. Active Color: Choose a color for the active portion of the volume bar.
4. Height: Adjust the height of the volume box.
5. Padding: Fine-tune the internal padding of the volume box.
6. Border Type: Define the border style for the volume box.
7. Border Radius: Round the corners of the volume box.
8. Box Shadow: Apply a shadow effect to the volume box.

Seek Bar Styling

1. Background Type: Choose between a Classic or Gradient background for the seek bar.
2. Color: Set the color for the seek bar.
3. Active Color: Select the active color that appears as the user progresses through the audio.
4. Margin: Adjust the margin around the seek bar.
5. Border Radius: Round the corners of the seek bar for a smoother design.

Time Counter Styling

1. Background Type: Choose between a Classic or Gradient background for the time counter.
2. Text Color: Set the color for the time counter text.
3. Typography: Customize the font size and style of the time counter.
4. Margin: Set the margin around the time counter to adjust its position.
5. Padding: Control the padding within the time counter.
6. Border Type: Define a border style for the time counter.
7. Border Radius: Round the corners of the time counter for a smoother look.

Fixed Time Styling

1. Background Type: Choose between Classic or Gradient for the background of the fixed time display.
2. Text Color: Set the text color for the fixed time.
3. Typography: Adjust the font size and weight.
4. Margin: Position the fixed time by adjusting the margin.
5. Padding: Adjust padding within the fixed time area.
6. Border Type: Choose the border style for the fixed time area.
7. Border Radius: Round the corners of the fixed time display.

Advanced Tab

The Advanced tab provides additional options that are common across all Vertex Addons widgets:

• Custom Margins and Padding: Customize the outer and inner spacing to suit your layout.
• Z-Index: Adjust the stacking order if the widget overlaps with other elements.
• Custom CSS: Add custom CSS to further fine-tune the widget’s design.
• Responsive Settings: Ensure the widget looks great across all devices by adjusting settings for mobile, tablet, and desktop views.

Final Outcome

Once you’ve configured all your settings, the Elementor Sound Player Widget will display a sleek, fully responsive audio player that users can interact with. The widget includes all essential controls—volume, play/pause, 30-second skip buttons, and a seek bar—while being easily customizable to fit your design. Whether you’re showcasing a podcast, music track, or audio content, this widget provides the perfect solution for integrating audio into your Elementor pages.

With this guide, you’re ready to set up the Elementor Sound Player Widget in Vertex Addons and deliver an interactive, engaging audio experience