R1 – Super Slim Bloom Optin Form

by | Jan 2, 2016 | Bloom

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

For the first tutorial from Divi Soup I’m going to show you how to create a Super Slim Bloom Optin Form just like the one above this post.

Inspired by the amazing Geno’s Super Slim Signup Module Tutorial, the Bloom Optin form allows for the same look as Geno’s but with the capability of integrating with all of the email service providers that Bloom supports, rather than just the MailChimp, Feedburner and AWeber default options provided in the standard Divi email optin module.

So let’s get cooking!

UPDATED: 25/06/2016 – fixed issue with Bloom 1.1.7 adding extra margin.

ingredients

The Bloom plugin from Elegant Themes

The Divi Theme or Divi Builder Plugin from Elegant Themes

cooking-time

This should take you around 10 – 15 minutes max.

preparation

The first thing we need to do is create the actual optin form, so navigate to Bloom under plugins and hit New Optin and then select Inline from the form options.

bloom-optin-1

Next, give your form a name and select your email service provide, account, email list and whether you want to enable double optin. Then hit Design Your Optin.

bloom-optin-2

Choose a form template, the second one on the top row is just fine, then hit Customise at the bottom of the page.

bloom-optin-3

On the Design Your Optin Form page, remove the text from both the title and message boxes, we will add text elsewhere later. Then change the settings as shown in the images below.

bloom-optin-4

bloom-optin-5

bloom-optin-6

Now when you click on the blue eye icon in the top right to preview your form it should look like this.

bloom-optin-7

Finally hit Generate Shortcode, copy and paste the code Bloom gives you into Notepad as we will be using it later and then click Save & Exit.

Now let’s get onto creating our module. Create a new page or open up the page you want to add the optin form to and add a new standard section with two columns and a text module in each column.

bloom-optin-8

Open up the section settings and set the background colour to black, set the top and bottom custom padding to 0px and select Keep custom padding on mobile.

bloom-optin-9

bloom-optin-10

Then open up the row settings and give it the same custom padding and keep on mobile settings as we did in the section settings.

Next, open up the left hand text module and give it a custom css class, I’m using slim-optin-text. You will also want to set your text colour and orientation and then add the text you want before the form in the content area, then save & exit.

bloom-optin-12

Now we need to open up the right hand text module and paste in the Bloom shortcode we put into Notepad earlier. Leave the text colour as Dark and text orientation as Left.

bloom-optin-13

Then scroll down and add a custom css class, I’m using slim-optin-form.

Then save & exit.

bloom-optin-14

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

 

/*----------Super Slim Bloom Optin Form----------*/ /* Set the padding for the content */ .slim-optin-form .et_bloom_form_container .et_bloom_form_content { padding: 0px !important; } /* Hide the header area */ .slim-optin-form .et_bloom_form_container .et_bloom_form_header { display: none !important; } /* Set the font size of the optin text module */ .slim-optin-text { padding-top: 15px !important; } /* Set the margin for the optin form module */ .slim-optin-form { margin: 0px 0; } .slim-optin-form .et_bloom_inline_form { margin: 10px 0 !important; } /* Add a little padding for smaller screens */ @media only screen and (max-width: 1110px) { .slim-optin-form { margin-bottom: 25px; margin-top: 0px; } } /* Set the font colour for the sucess and error messages */ .slim-optin-form h2.et_bloom_success_message, h2.et_bloom_error_message { color: #888 !important; } /* Set the border radius for the sucess and error messages */ .slim-optin-form .et_bloom_form_container h2.et_bloom_error_message, h2.et_bloom_success_message { border-radius: 0px !important; } /* Hide the checkmark on success message */ .slim-optin-form .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark { display: none; }

And that’s it, now your optin form should look like the one above this post.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!