Wedding sites, portfolios, bands and event pages often want a track available without forcing it on anyone. A button in the header does that: audio stays one click away and never starts by itself.
The Header Meta Content widget in The Plus Addons for Elementor adds one as a Music item, pointed at a single .mp3 or .ogg file from your media library.
To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, click here.
Requirement – This part of the widget needs the PRO version of The Plus Addons for Elementor, installed and activated.
Before You Start
- Edition: Pro — the Music item needs the Pro version. In the free plugin the Select Options dropdown labels it (Pro), and turning its Display switch on renders nothing.
- Widget to enable: Header Meta Content, switched on under The Plus Addons > Widgets.
- An audio file uploaded to your media library. The field is labelled Audio .Mp3/.Ogg; copy the file’s URL from the library before you start.
- Where to add it: your header template, so the row shows on every page. The widget’s own Use with Theme Builder section links to a Create Header Template button.
- Two steps, always: adding an item in Meta Content is only half of it. Nothing appears until you also turn on that item’s own Display switch in its section further down the Content tab.
Add the Music Item
- Upload your audio file under Media > Add New and copy its URL.
- Add the Header Meta Content widget to your header template.
- In Meta Content, open the item and set Select Options to Music.
- Turn on Display Music in the Music Options section and paste the file URL into Audio .Mp3/.Ogg.
- Pick an Icon Style and set Music Volume if you want.
Music Options Settings
| Setting | What it does | Default |
|---|---|---|
| Display Music | Turns the music button on. Nothing renders without it | Off |
| Icon Style | Two designs for the button, Style 1 and Style 2 | Style 1 |
| Audio .Mp3/.Ogg | The URL of the file to play | Empty |
| Music Volume | A 0 to 100 slider. See Limitations — it does not reach playback | 50 |
How It Behaves
The button sits in the header row like any other item. Clicking it starts the track and the button changes colour while the audio is playing; clicking it again stops the audio and the button returns to its resting state.
- Nothing plays until a visitor clicks. There is no autoplay.
- The track loops until it is stopped.
- There is no progress bar, no volume control for the visitor and no track name — it is a play and stop button only.
- The Music Bar Style section on the Style tab appears once Display Music is on.
Limitations
- Music Volume does not set the volume a visitor hears. The value reaches the page, but the player fades to its own fixed level before playing: with the slider at 30 the audio played at full volume, and with the slider at 100 it played at half. Set the level in the audio file itself if it matters.
- One file per item. There is no playlist and no second track.
- The field is labelled for
.mp3and.ogg, and the widget does not check what you paste. A URL in another format simply will not play. - The button is given a fixed HTML id, so two Music items on one page produce duplicate ids.
- Browsers block audio that starts without a click, so the track can only begin from the button.
- The whole item needs Pro. In the free plugin the dropdown shows Music (Pro) and nothing is drawn.
Troubleshooting
The music button does not appear
Check both halves: a Meta Content item set to Music, and Display Music switched on in Music Options.
Clicking the button does nothing
Open the URL in Audio .Mp3/.Ogg in a new browser tab. If it does not play there, it will not play here. Check that the file is publicly reachable and is really an .mp3 or .ogg.
The audio is louder or quieter than the slider says
That is expected: Music Volume does not reach playback. Re-export the audio at the level you want.
My Style tab changes do not show
The Music Bar Style section only applies while Display Music is on. Turn it on, then style.
