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?
Here’s a Complete Video Guide As well!
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!
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.
Absolutely excellent! Well done.
Hey Samar, I’m not sure what’s going on. I followed the steps exactly like 3 or 4 times. Deleted the child theme and reinstalled it several times. But no matter what I do I can’t see the new column in the Divi library 😫 HALP!
Hi Ross,
Sorry to hear that, I think this is probably a cache issue. Have you tried to manually add the code instead?
Amazing Samar! Thank you!
You’re most welcome, Glad It was helpful 😀
Good Work Buddy!
Thanks Shahzad 🙌