If you are looking to lock a PDF or almost any format of printable image, in WordPress you’ll have the ability to add Additional CSS to that image.
To lock a PDF you'll need to add a File Gutenberg block (see note), whereas locking an image is an Image block.
Click here to skip to the video tutorial!
Step 1: 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:
Step 2: Grab the CSS code from the Exclusive Content widget you are using. Make sure you've saved the widget (this will populate the code you need):
Step 3: Go back to Wordpress and place the Exclusive Content CSS Class Placement code under the Additional CSS class(es) section (this should be located on the right-hand side of your editor):
Then you're done!
Go ahead and test your post using an incognito window.
Note for Gutenberg File Blocks:
On mobile, Gutenberg File Blocks will display a text link to the file instead of the PDF preview. This makes the File Block smaller than Exclusive Content's required 500px height. This means File Blocks where the Exclusive Content has been placed via CSS class will not be locked on mobile devices.
To get around this, you can create a Group Block that is at least 500px tall to include your File Block, then apply the Exclusive Content to the Group Block.