Now that you've set up your Exclusive Content widget(s), you'll need to implement them on your site!
Exclusive Content widgets can be implemented in a few different ways depending on what you’re locking. Examples include recipes, printables, patterns, packing lists, meal plans, workouts, tools, guides -- the possibilities are endless! 🎉
- Locking an Image or PDF? Add a CSS class to an element on your website.
- Locking a Create Card? Add a CSS class to an element on your website.
- Wanting to lock a whole page, block of text, or a few blocks of content? You’ll use our Manual Placement option to wrap that content in an HTML code.
- Not using Gutenburg or WordPress? You’ll likely need to use our Manual Placement option
There are two ways to implement Exclusive Content on your website
Option 1: By adding a CSS class to an element on your website
This is the best way to lock images or PDF's as well as Create Cards. You can find the help article on how to add CSS here.
Option 2: By manually placing the Grow Exclusive Content widget code into the HTML editor of your site.
This is the preferred method for locking a whole page, a block of text, or multiple blocks of content. Manual placement is also the method to use if you are not using Gutenberg with WordPress. You can find the help article on how to manually place the Grow Exclusive Content widget here.
Once this is set up and enabled you'll be on your way to adding more subscribers to your email list!
Size Requirements
The area you are trying to lock needs to be tall enough so that the Grow widget has space to cover it. We recommend the element be 500px in height or higher. If you are trying to lock a single button or a very short image, it won’t work.
If you want to lock a single button or very short image, you’ll want to add an additional image to create some more space, and then GROUP those blocks together in WordPress and apply the CSS code to the GROUPED block.
- Note: Gutenberg File Blocks will only display the PDF preview on desktop and use a text link on mobile devices. This will make the File Block too small to lock on mobile devices. Grouping your File Block in a Group Block can solve this issue!
To group blocks together in WordPress, hold down the shift key while selecting them, and then choose the “Group Blocks” option.