Written By Samar Jamil
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.
By Samar Jamil
Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder
You would also like one of these
How to create a Fly-In Popup like Elegant Themes in Divi
There’s a Fly-In Popup being used on the Elegant Themes website for more than 2 years and How about we duplicate it for our Divi site as well. If you want to add something more interesting to your site Follow this.
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...
How to create Image Switcher on Custom Tabs click in Divi
In this tutorial, I’ll show you how to make an Image Switcher on Custom Tabs Click. This is a very interesting article and you’re not gonna miss it.
Useful, but I’ve run into an issue where I can see the shortcode column for items in my divi library, but it’s not generating a shortcode for them. Even new items saved to the divi library aren’t generating a shortcode.
That’s strange. Please send me a message in the Chat I’ll help you out 😊
Hello,
Very interesting, but I have the same problem than Kit White.
How can I fix the code to generate the shortcakes ?
Thank you.
Please open the chat & I’ll look for you!
Hi, same issue as above – the shortcode column is blank. Then, I created a shortcode through DIVI SWITCH (left the bloom.php file with the amended code in line 4847 in tact) to give me this code:
[et_bloom_locked optin_id="optin_12"]
[divi_switch_layout id=”7096″]
[/et_bloom_locked]
…but on the front end I only get: [divi_switch_layout id=”7096″]
BTW: I tried this with other plugins disabled.
If you were able to meanwhile fix the code, it may be helpful to others with the same issue to amend this blog.
Any thoughts?
Hi again, actually it now works! When setting up the Bloom optin, I only clicked on ‘copy shortcode’, but I had not saved the optinn. That of course, prevented it from showing up on the front end. It also wors well with the DIVI SWITCH shortcode.
I had also made the mistake to place the shortcode in a text module INSIDE a row, which the layout itself is a section. Of course that wouldn’t work.
So, all is well.
Thanks for the great tip.
I am trying to do what you outline but am getting this error. Any ideas?
Your PHP code changes were rolled back due to an error on line 17 of file wp-content/themes/Bright-divi-child-theme/functions.php. Please fix and try saving again.
syntax error, unexpected ‘}’, expecting end of file
Tried this with the latest Bloom, Divi & WordPress versions. I had the same problem as noted above… I can see the new ShortCode column in my library, but it’s not generating a code for new layouts. Backed out all the changes and I’ll look for another solution. Thanks for posting this tho.
Hi Brian,
Sorry about that, I’ve just updated the code can you please try again?
Thank you so much for sharing this, and doing so in such an incredibly coherent and detailed manner. I was able to get this working with the Divi Builder plugin (I’m working with a website with a non-Divi primary theme), and it was 100% effective. This solution seems complicated, but for anyone on the fence TRY IT, because it only takes about 10 minutes to implement (less if you’re doing it a second time.)
Thanks a lot, Trevor, Glad It was helpful to you.
Dude, you are a lifesaver.