Source: https://divicake.com/blog/create-stylish-inline-bloom-optin/ [Blog](https://divicake.com/blog/)/[Tutorials](https://divicake.com/category/tutorials/) # How To Create A Stylish Inline Bloom Optin By Divi Cake·24 June 2017·Updated 5 September 2026·5 min read How To Create A Stylish Inline Bloom Optin We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Preparing Bloom](https://divicake.com#preparing-bloom) - [Custom CSS](https://divicake.com#custom-css) - [Adding the optin to your page](https://divicake.com#adding-the-optin-to-your-page) - [Review](https://divicake.com#review) How To Create A Stylish Inline Bloom Optin: the key points at a glance Bloom is known to be notoriously tricky to style. In this tutorial I’m going to show you how you can transform an inline Bloom optin into a beautiful optin for your website. We will go over setting up the optin, adding a beautiful background image with a gradient overlay, centering bloom in a fullwidth code module, making the entire Bloom area transparent, and creating a rounded corners submit button. Here’s what we’ll be building together: Beautiful Bloom email optin Live Demo – With a before and after For this tutorial you are going to need both Divi and Bloom installed. Being familiar with CSS would also help so you can customize the styling to your needs, but it is not necessary. #### Let’s begin! ## Preparing Bloom Create a new inline Bloom optin. Go to Bloom and click the New Optin button and select the Inline optin. Create an inline Bloom optin Name your optin whatever you’d like and select your desired email provider. Click NEXT: DESIGN YOUR OPTIN. Choose the first template listed on the design tab and click NEXT: CUSTOMIZE. Next, we are going to set all of the required design settings. There are a lot of them, so make sure to read through carefully or pay close attention to the image below. To start, we are going to: - Set the Optin Title to any title you would like. - Remove the Optin Message. Under Image Settings we are going to set the following options: - Set Image Orientation to No Image Under Optin Styling we are going to set the following options: - Click the Select Color button for Background Color and click Clear - Set Header Font as Josefin Slab - Set Body Font as Open Sans - Set Text Color as Light Text - Set Corner Style as Squared Corners - Set Border Orientation as No Border Under Form Setup we are going to set the following options: - Set Form Orientation as Form On Bottom - Set Name Field(s) as Single Name Field - Set Name Text as Name - Set Email Text as Email - Set Button Text as Subscribe! Under Form Styling we are going to set the following options: - Set Form Field Orientation as Inline Form Fields - Set Form Field Corner Style as Squared Corners - Set Form Text Color as Dark Text - Click the Select Color button for Form Background Color and click Clear - Click the Select Color button for Button Color and click Clear - Set Button Text Color as Light To finish off the settings we are going to: - Choose the first Form Edge Style - Do not insert any Footer Text. - Set the Success Message Text to whatever you would like. Below is an image of the settings I used if you would rather copy an image. [ Inline Bloom form settings ](https://divicake.com/wp-content/uploads/2026/09/inline-bloom-form-settings.webp) Don’t click save just yet! We still have to add some Custom CSS. ## Custom CSS Next, we are going to copy and paste the CSS below into the Custom CSS box. This first bit of CSS makes the optin rather slim, sets the header font size, and gives you more control over the optin’s padding in Divi. /* === Slim Bloom Optin by Divi Cake === */ #dc_optin div.et_bloom_header_outer .et_bloom_form_text { padding: 0px!important; } #dc_optin div.et_bloom_header_outer .et_bloom_form_header { padding: 0px 0px 10px 0px!important; } #dc_optin div.et_bloom_header_outer .et_bloom_form_header h2 { font-size: 36px!important; } #dc_optin .et_bloom_form_content { padding: 10px 0px 0px 0px!important; } This second bit of CSS makes the submit button round and adds the transparent button background color and hover. /* === Rounded Bloom Submit Button by Divi Cake === */ #dc_optin .et_bloom_form_content button.et_bloom_submit_subscription { border-radius: 50px!important; -moz-border-radius: 50px!important; -webkit-border-radius: 50px!important; background: rgba(255, 178, 0, 0.8)!important; } #dc_optin .et_bloom_form_content button.et_bloom_submit_subscription:hover { background: rgba(255, 178, 0, 1)!important; } This third bit of CSS makes the entire Bloom area transparent, and allows you to set a custom background image and gradient in Divi. /* === Transparent Bloom Optin by Divi Cake === */ #dc_optin .et_bloom_form_container { background: none !important; } #dc_optin .et_bloom_form_header { background: none!important; } #dc_optin .et_bloom_bottom_inline { background: none !important; } This last bit of CSS makes the text fields slightly transparent to add just a little bit more style to the optin. /* === Transparent Text Fields by Divi Cake === */ .et_bloom .et_bloom_form_container .et_bloom_form_content input { background: rgba(255, 255, 255, 0.9)!important; } .et_bloom .et_bloom_form_container .et_bloom_form_content input:focus { background: rgba(255, 255, 255, 1)!important; } Click the Save & Exit button. At this point, we only have one last thing to do in Bloom. We have to generate and copy a shortcode. Once you click Save & Exit, you’ll be brought back to the Active Optins page in Bloom. We are going to click the Generate Shortcode icon and copy the shortcode in the popup box. Generate Bloom shortcode Keep that shortcode handy! We’re going to need it very soon. ## Adding the optin to your page Here is the rewarding part. We finally get to put all of this together in Divi. Start by creating a new page, or editing an existing page. If you’re creating a new page, make sure to select to use the Divi Builder. Add a new Fullwidth Section and insert a Fullwidth Code module. Fullwidth section with fullwidth code module Enter the Fullwidth Code Mo****dule Settings and copy and paste the Bloom shortcode you copied earlier. Insert Bloom shortcode Next, we are going to enter the Advanced tab in the Fullwidth Code Module Settings to set the CSS ID to dc_optin. This will allow all of the CSS we entered earlier to apply to this code module. Set the Fullwidth Code module’s CSS ID to dc_optin While we are still in the Advanced Tab, we are going to add two simple lines of CSS in the Main Element section. One to set a max-width, and another to center the code module within the fullwidth header. Set max-width and center Click Save & Exit. We are all done with the code module. Now we are going to enter the Section Module Settings and set up the gradient. We are going to use **#**eead92 as our first color and #6018dc as our second color. We are also going to set the Gradient Direction to 165deg. Add a gradient from #eead92 to #6018dc at 165deg While we are still on the Content tab, we are going to add our background image. The background image I used can be downloaded here. Complete the following in the Background section: - Upload your own image or used the one I provided. - Set use Parallax Effect to NO - Set Background Image Size to Cover - Set Background Image Position to Center - Set Background Image Repeat to No Repeat - Set Background Image Blend to Color Burn Add the background image set to Center, No Repeat and Color Burn Next, we are going to enter the Design tab in the Section Module Settings to add some padding. Set the Custom Padding to 50px. Set the section’s custom padding to 50px Click Save & Exit. There you have it! You should now have a beautifully styled slim bloom email optin that looks like this: Beautiful Bloom email optin [](https://divicake.com/wp-content/uploads/DiviCake-StylishBloomOptin.zip) [Click Here to Download](https://divicake.com/wp-content/uploads/DiviCake-StylishBloomOptin.zip) ## Review We successfully transformed an unattractive Bloom optin into a beautiful optin you could use on any website. I hope you have enjoyed this tutorial. We’d like to hear from you. How did you use this optin on your website? Did you find it helpful? Let us know in the comments. About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tutorials [ Getting Started with Divi: Using the Divi Builder Tutorials7 min read ### Getting Started with Divi: Using the Divi Builder A walkthrough of the Divi Builder for new users: the backend and frontend builders, how sections, rows and modules fit together, and a simple contact page built step by step. 1 October 2026](https://divicake.com/blog/getting-started-with-divi-using-the-divi-builder/) [ How to Update the Divi Theme Tutorials4 min read ### How to Update the Divi Theme How to update the Divi theme safely: back up and test first, add your Elegant Themes API key to Theme Options, run the update from the WordPress Updates screen, and what to do with a legacy version. 23 September 2026](https://divicake.com/blog/how-to-update-divi-theme/) [ Top reasons to choose a pre-built theme for your website Blogging10 min read ### Top Reasons to Choose a Pre Built Theme for Your Website Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support. 21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/)