• a

POPULAR DIVI PRODUCTS

Molti Ecommerce

Go-On 2.0

Molti

Marko

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

Live Chat Now

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

POPULAR

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Go-On 2.0

The Most Modern Child Theme for Selling Digital Products.

Molti

Multipurpose Business Child Theme for Divi.

Marko

Premium Layout for your next Digital Marketing Agency Site.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Live Chat Now

Need Quick Help? You can also Live Chat with us anytime you like.

Send us a Message

Need Help? Send us a Message and we’ll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you’ll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

Earn Money while Promoting our Products today.

Lock/Reveal a Divi Library Layout in Bloom Locked Content Form

Hey Everyone, what’s up?

You know Bloom is a very powerful Newsletter plugin for WordPress. And the Bloom Locked Content Form is one of its awesome feature to lock your content and only show to your Newsletter subscribers.

So In today’s tutorial, we’re going to see how you can Lock a Divi Library Layout in Bloom’s Locked Content Form and show it when the user Subscribe’s to your Newsletter. This could be a very easy way to grow your Email List. So that’s what we’re going to see In today’s Tutorial.

Sneak Peak

Here’s a quick look at how it will look in action. As you can see we’ve got a Bloom Locked Content Form and when I fill the form that will Subscribe to the Newsletter and will Reveal the Library Layout that we’ve added. Very cool way to hide your content and show it to your Subscribers only, right?

 

How to achieve this same Bloom Locked Content Form on your site

So first we’ll need to do a Code Modification in Bloom Plugin and then add some PHP code so we can use every Layout as a shortcode. First, let’s do the modification required in the Bloom Plugin.

For that, make sure you’ve Installed the Bloom Plugin on your site then go to Plugins -> Plugin Editor then select the Bloom Plugin and open the bloom.php File and scroll down to line 4847.

Now replace the line 4847 with this code. This code will help you to render shortcodes in the Locked Content Form. Once the code is added make sure to Update the File.

do_shortcode($content),

Once you’re done with that, we can now make every Layout in Library a shortcode using this code. Simply go to Appearance -> Theme Editor -> and open your Child Theme from there and select your Child Theme’s functions.php file and Paste the Below Code & Update the File. If you don’t have a Child Theme Installed you can download free from here.

// Every Divi Layout as Shortcode with the Below Code
add_filter( 'manage_et_pb_layout_posts_columns', 'sj_create_shortcode_column', 5 );
add_action( 'manage_et_pb_layout_posts_custom_column', 'sj_shortcode_content', 5, 2 );
// Register shortcode
add_shortcode('sj_layout', 'sj_shortcode_mod');
// Adding Layout Shortcode Column 
function sj_create_shortcode_column( $columns ) {
$columns['sj_shortcode_id'] = 'Module Shortcode';
return $columns;
}
//Display Shortcode
function sj_shortcode_content( $column, $id ) {
if( 'sj_shortcode id' == $column ) {
?>
<p>[sj_layout id="<?php echo $id ?>"]</p>
<?php
}
}
// Create Layout Shortcode 
function sj_shortcode_mod($sj_mod_id) {
extract(shortcode_atts(array('id' =>'*'),$sj_mod_id));
return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
}

With that Code added to your Child Theme’s functions.php, you’ll see a new Column for each Layout in the Library that will provide the shortcode of that Layout to use anywhere. Now the great advantage here is that you can use that shortcode to add a Divi Layout inside a Module which is pretty crazy and opens many possibilities in Divi.

Alright so now It’s time to move on and create a new Bloom Locked Content Form. For that, open the Bloom from your WordPress Dashboard Sidebar and click on “New Optin” and then select the Form type as “Locked Content” 

Now give your Form a name and Integrate it with your Email Provider. Then click on Next Button.

On this page, you can select a Template for your Form. Choose the one you like and then click on the “Next: Customize” Button.

On the next screen, you’ll be able to set up your Content or even apply Custom CSS. Once you’re done with Content as well click on “Save & Exit” button.

Now go to Divi -> Divi Library and click on “Add New” button at the top. Then we’ll be able to design the Layout with Divi Builder and that is what the customer will see after subscribing to your Newsletter. This will be our “Content” for Locked Content Form. 

Now give your Layout a Name, and choose the Layout type as “Layout” from the dropdown and click on Submit Button.

In Divi Builder, you can design your Layout the way you like. Here’s what we’ve created.

Now open any page using the Divi Builder and a Text Module where you’d like to show the Locked Content Form. Simply add the Text Module there.

Go to Bloom Settings  and click on the Icon (as shown in this image) and copy the Shortcode for this form.

Once you’ve copied the Shortcode, come back to Divi Builder and paste it in the Text Module content. Make sure you’re in the “Text” Tab.

Now go to Divi -> Divi Library and copy the Layout shortcode you’ve just created.

Then come back to Divi Builder -> Text Module and replace the text “content” with the Shortcode.

So yeah, That’s it. That’s how easily you can create a Locked Content Form that will reveal your Divi Library Layout once the Customer Subscribes to your Newsletter. Pretty easy right and the best way to grow your audience. This is how it looks.

So, everyone, that’s it for this awesome Tutorial. I hope you like this tutorial and found it helpful for your site or in any situation I hope it’s helpful. Do let me know what you think about this awesome technique in the Comment section below, I’d love to hear from you.

Have a great day!

Make Beautiful websites with ease using our Handmade Beautiful Child Themes

For Divi

Feeling Generous

If you found this tutorial helpful, why not buy me a Coffee which really gives me more energy to make more Tutorials Like this.

Buy me a coffeeBuy me a coffee

By Samar Jamil

I provide beautiful and creative Divi Child Themes, Layouts and Sections for everyone to create beautiful websites with ease using Divi.

Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder

 

You would also like one of these

Easiest Way to Create Inline Email Optin Form  in Divi

Easiest Way to Create Inline Email Optin Form in Divi

Hey Everyone, what's up? The Newsletter is the best way to communicate with your audience and give them special content that other users may miss but did you ever think that without a beautiful looking Newsletter form you'll not get more Audience and you'll also miss...