Use the ‘custom html’ option and leave it empty. Then use the normal title, text and image settings for all other settings.
For an inline button add this + the css below
<a class="hws_button" href="url">Buttontext</a>Code language: HTML, XML (xml)
Custom styling
.et_bloom_form_container{
top: 15vh !important
}
.et_bloom_form_content {
display: none;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding: 0 !important;
}
.et_bloom .et_bloom_form_header p {
color: #000000 !important;
}
.et_bloom_form_text {
padding-bottom: 25px !important;
}
.hws_button{
color: #ffffff! important;
font-weight: 500 !important;
padding: 0.7em 2em !important;
background-color: #000000 !important;
border-width: 0px !important;
}
.hws_button:hover {
background-color: rgba(0, 0, 0, 0.7) !important;
}Code language: CSS (css)
For the light text to be white (yes 3x the class)
.et_bloom_header_text_light.et_bloom_header_text_light.et_bloom_header_text_light
p { color: #ffffff !important; };Code language: CSS (css)
For the light text to be black(yes 3x the class)
.et_bloom_header_text_dark.et_bloom_header_text_dark.et_bloom_header_text_dark
p { color: #000000 !important; };Code language: CSS (css)
For the background overlay to be darker
.et_bloom .et_bloom_popup:after{ background-color: #000000d4 !important; }Code language: CSS (css)
To remove the (X) close button
.et_bloom_close_button{display:none}Code language: CSS (css)
Only an image
.et_bloom_form_content {
display: none;
}
.et_bloom_form_text,
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding: 0 !important;
}
.et_bloom .et_bloom_form_header img {
padding: 3px !important; width: 100% !important;
}Code language: CSS (css)
Only a video
Add the following html as the optin message (in text mode).
Note that the video must be muted, otherwise it won’t start playing when the popup is shown (blocked by browsers).*
- Muted: video always auto plays in Bloom popup (on click and after time delay). Visitor must enable sound.
- Unmuted: video only auto plays with sound on click in Bloom popup if you use the below script* and does not auto play in popup with time delay
<video width="100%" autoplay muted controls>
<source src="https://tst.hrcws.nl/wp-content/uploads/Palux-Landgoed-Groenendaal-Heemstede.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Code language: HTML, XML (xml)
* You also need to add the following helper script to the bottom of the page (page builder footer), to force the video to start/stop playing.
<script>
// Helper for video's in Bloom popups
// Muted video's always auto play, browsers block auto play unmuted video's
// Script forces unmuted video's to play on click/interaction (not time delayed popups)
// Forces video to stop playing and rewind when popup is closed (or it keeps playing in background)
(function () {
function getVideo() {
return document.querySelector('.et_bloom_optin_1 video');
}
function playVideo() {
var video = getVideo();
if (!video) return;
video.currentTime = 0;
var promise = video.play();
if (promise !== undefined) {
promise.catch(function () {
document.addEventListener('click', function retry() {
video.play();
document.removeEventListener('click', retry);
});
});
}
}
function stopVideo() {
var video = getVideo();
if (!video) return;
video.pause();
video.currentTime = 0;
}
function observePopup() {
var popup = document.querySelector('.et_bloom_optin_1');
if (!popup) return;
var observer = new MutationObserver(function () {
var classes = popup.classList;
if (classes.contains('et_bloom_exit_animation')) {
// Popup is closing — stop immediately
stopVideo();
} else if (classes.contains('et_bloom_visible')) {
// Popup just opened — start playing
playVideo();
}
});
observer.observe(popup, {
attributes: true,
attributeFilter: ['class']
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', observePopup);
} else {
observePopup();
}
})();
</script>Code language: HTML, XML (xml)
Then add the following custom css.
The default max-width is 640px, increase if needed.
.et_bloom .et_bloom_form_container {max-width:1280px !important;}
.et_bloom_form_content {display:none;}
.et_bloom_form_header {padding:0 !important;}
.et_bloom_form_header p {margin:0 !important; line-height:0 !important;}
.et_bloom_form_text {padding:0 !important;}
.et_bloom_form_text p {margin:0 !important; line-height:0 !important;}Code language: CSS (css)
Popup on click
Give the module, button or link a CSS Class on the Advanced Tab, for example bloompopup.
In Bloom » display settings
- Trigger On Click: enable
- CSS Selector (string): .bloompopup