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: I cannot make this work. I’ve used your HTML and your CSS, to no avail. But I did notice that you started the video with a bloom optin that had already been created. Maybe I selected the wrong type of optin? I chose Pop Up – maybe you used inline?
If you are copying and pasting, remember that the quotation marks come up funny so you’ll have to replace them in the code. Try that.