Exclusive content is a Feature that needs some manual setup, here’s how to get Exclusive Content running on your site.

If you haven’t yet, first visit your Exclusive Content settings within your Grow Dashboard, decide if you want a default widget to display or a customized widget to display.

You can find these settings in the Dashboard > Grow (Beta) > Exclusive Content; keep these settings blank, for a default widget to appear. The widget will display a solid color, taken from your icon color in your dashboard. If you decide to add an image, it will be blurred behind the lock.

Or

You can update the default text for your locked content by editing the following fields-

Header: This is the title of your Exclusive Content widget.

Subtext: This text will show under the header. This is where you can give your readers more detail about what is behind the lock.

Button: The text that will show on the button.


Locking Content

The Exclusive Content feature can work either by adding a CSS class to an element on your website like an image or PDF, or by wrapping that content in an HTML code with our Manual Placement option.

Important note: To TEST your exclusive content widget, please make sure to use an incognito or private window.

How to lock a single image or element in a blog post using the CSS method:

If you are locking a PDF or almost any format of printable image, in WordPress you’ll have the ability to add “Additional CSS” to that image.

In WordPress using the Gutenberg editor, click on the object itself and go to the Advanced section on the right-hand side of the screen:

Then, grab the CSS code from the Grow Dashboard:

Go back to Wordpress and place the Exclusive Content CSS Class Placement code under the Additional CSS class(es) section:


Using Exclusive Content in Your Create Card:

Once you've selected the Create Card, scroll down to the Custom Fields section:

Under the CSS Class, you will paste the Exclusive Content CSS Class Placement code from your Mediavine Dashboard:


How to lock multiple elements or chunks of your post with Exclusive Content by using the Manual Placement code:

You can find the Manual Placement code next to the CSS Class Placement code:

To use the manual placement code, you need to put the first chunk of the code BEFORE the content you want to be locked, and the final closing </div> at the end of the content you want locked.

If you are using a platform with an HTML editor, you can paste this manually. If you are using WordPress Gutenberg, you can place these code chunks in an HTML block.

Note: If you use the HTML block in Gutenberg, it will think that the code is broken. It isn’t. It is just incomplete. You can ignore this.

When using the manual placement code, you’ll need to remove the <!-- Your content between this --> portion of the code. That’s where the content you are hiding belongs.

Quick Video on how to lock content using the Manual Placement code:

IMPORTANT NOTE ON 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 being 500px in height or higher.

If you are trying to lock a single button or a very short image, it won’t work.

In this case, 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.

To group blocks together in WordPress, hold down the shift key while selecting them, and then choose the “Group Blocks” option.


How Does Exclusive Content Flow for a Reader?

Did this answer your question?