Super Slim Bloom Optin Form

In this article, we are going to show how we can make super slim bloom optin or bloom optin form with minimum height. There is no inbuilt option in the Divi theme for creating super slim bloom optin form, but you can using this post for creating super slip bloom optin just by doing a little bit of customization.

The process of Creating Super Slim Bloom Optin Form

• Firstly, we need to create an inline optin form by using bloom plugin, for this please go to WordPress Dashboard >> Bloom >> Optin Forms and in the Optin Forms please select “Inline Optin”.

• After selecting “Inline Optin” complete the setup by providing “name of optin” and then select the preferred “Email Service Provider”, add the “Account” and “List” as shown in the below image. Then click “Next” for making changes in the design of optin.

• In design section, we leave blank “optin title” and “optin message”.

• Also in the design section, we keep image orientation as “No Image” and select corner style according to your need here we select “Square corners”, you can select either “round” or “squared”. And we select form orientation as “inline” we can also customize footer text, its style and much more according to your need.

• After this click on “page” and then on “Add New” here we use “Divi Builder on this page” and add two text modules as you can see in a diagram.

• Now click on “Module Setting” and set background color according to your need and then click on “Design”, here set top and bottom custom padding to “0px”.

• After this click on “Advance” option of “Section Module Settings” and here place the “Custom CSS” code in “Main Element” as shown in the below image.

• Now go to “row module setting” then click on “design”, here set top and bottom padding to “0px” and then click on “Save” to save these changes.

• Now please open the left “Text Module” and then write content in “content” text area that we want to appear before “Optin Form”. After this, move to its advance section and assign CSS Class as “slim-optin-text” in the “CSS Class” field.

• Now open the right text module and in the content text area place the shortcode of inline optin and then click on “Advance”, assign CSS Class as “slim-optin-form” in the “CSS Class” field.

• Now please go to Divi >> Theme Options >> Custom CSS and add the below CSS Code to Custom CSS Field.
  
  .slim-optin-form .et_bloom_form_container .et_bloom_form_content { padding: 0px !important; } .slim-optin-form .et_bloom_form_container .et_bloom_form_header { display: none !important; } .slim-optin-text { padding-top: 15px !important; } .slim-optin-form { margin: 0px 0; } .slim-optin-form .et_bloom_inline_form { margin: 10px 0 !important; } @media only screen and (max-width: 1110px) { .slim-optin-form { margin-bottom: 25px; margin-top: 0px; } } .slim-optin-form h2.et_bloom_success_message, h2.et_bloom_error_message { color: #888 !important; } .slim-optin-form .et_bloom_form_container h2.et_bloom_error_message, h2.et_bloom_success_message { border-radius: 0px !important; } .slim-optin-form .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark { display: none; }

  1 2 3 4 5 6 7 8

  .slim-optin-form .et_bloom_form_container .et_bloom_form_content { padding: 0px !important; } .slim-optin-form .et_bloom_form_container .et_bloom_form_header { display: none !important; } .slim-optin-text { padding-top: 15px !important; } .slim-optin-form { margin: 0px 0; } .slim-optin-form .et_bloom_inline_form { margin: 10px 0 !important; } @media only screen and (max-width: 1110px) { .slim-optin-form { margin-bottom: 25px; margin-top: 0px; } } .slim-optin-form h2.et_bloom_success_message, h2.et_bloom_error_message { color: #888 !important; } .slim-optin-form .et_bloom_form_container h2.et_bloom_error_message, h2.et_bloom_success_message { border-radius: 0px !important; } .slim-optin-form .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark { display: none; }

Once the above process is completed we will found super slim bloom optin as shown in the below image:

We hope this article is quite helpful for enhancing your site appearance if you still face any trouble you can comment below and you can subscribe us to get the latest update about latest themes and their customizations.