Want to use Bloom for only a button?
If you use Bloom from Elegant Themes, there are going to be times that you want just a button. Not a name or email field, but just a button to redirect someone to your sales page, or website.
Sometimes we want a pop up to do more. Send people to our offer or maybe to a special promo. It’s hard to do if you are using Bloom with the Divi Theme because by default, there are form field for your name and email.
Using HTML and a little CSS, you can do just that!
How to Use This Code
The following code is what I used to create my button, using an image and the custom css. I’ve put the changes you should make in bold.
HTML CODE:
<div class=”popup” align=”center”><a href=”http://WHERE YOU WANT THEM TO GO” target=”_blank” class=”popup”><img src=”http://the path to the button image you want to use“></a></div>
CSS CODE:
The first bold HEX code is the color of the Title on the form.
The second bold HEX code is the color of your background behind the button.
.popup { margin: auto; padding: 0; }
h2 { color: #D4ADA4!important; }
.et_bloom .wedge_edge .et_bloom_form_content { padding-top: 10px!important; }
.et_bloom .et_bloom_form_container .et_bloom_form_content { padding-top: 10px!important; padding-bottom: 20px!important; color: rgba(0, 0, 0, 0.5); width: 100%; background-color: #FFFFFF; position: relative; }
Check out the video below!
Hi Lynne, when I try your steps, neither to link to the form, nor the button work as bloom is putting the page URL in front of the http (https://vital-life-chiropractic.com/5-day-challenge-to-improve-hydration/”https://vital-life-chiropractic.com/wp-content/uploads/5-Day-Button.jpg“). Any ideas, otherwise, this is exactly what I want to do. This double http is happeing in the anchor, too. Lee Ann
Try removing your url and see if the one Bloom inserts is correct.