What’s in This Guide
This guide gives you instructions for creating your first Content Teaser.
We’ll create a Wall Street Journal-style teaser using the simple gradient default settings. Here’s what we’re going for.
Screen capture of a WSJ-style content teaser paywall.
Before You Start
After upgrading to Pro, install the Teasers addon.
- Click Addons.
- Under Teasers, click Install.
Steps for Creating a Simple Gradient Content Teaser
1. Create or edit a global restriction
If you need to learn how to create a restriction, read A Quick Start to You First Global Restriction.
2. Click Protection
3. Click Content Teaser
4. Keep Content selected for the Content Teaser > Source
Content is the default Source.
Don’t touch the other settings in this section. I.e., keep the default settings for:
- Teaser length: 55 Words
- Remove remaining content: unchecked
5. Keep Simple Gradient selected for the Teaser Transition > Transition Type
Simple Gradient is the default Transition Type.
6. Keep the default left and right gradient colors
Leave the left and right colors as white for now. You can come back to change these later if you need to match your content’s background color.
When you’re ready, here’s how to change the gradient colors.
To change colors, click on the left or right handle.
Drag the color palette handle, change the hue, or type in the hex code for the color you want.
Click outside the color picker modal (popup) to close the color picker and save your color.
7. Keep the Gradient Type as Linear and the Gradient Angle as 180
Keeping the angle to 180 degrees makes the content teaser fully transparent at the top to fully solid off-white at the bottom. Since our content teaser is an overlay, the content starts fully visible and gradually fades until it’s completely covered. Go back to the teaser example screen capture above if you need a visual reminder.
8. Set the Minimum Height to 75%
Make sure you select % for the height unit.
Leave the Maximum Height blank (default).
9. Keep Button for the Teaser CTA > CTA Type
Button is the default CTA Type.
10. Enter your content for the Teaser CTA Description
Following our example, we’re going to type “Do you like what you’re reading?” and change it from a paragraph to a Heading 3.
Then, we’ll center-align our text.
11. Enter your Button Text
Leave the Background Color, Text Color, and Button URL alone for now.
12. Click Disabled to turn on your restriction
If you haven’t yet, click Disabled to turn on your restriction.
The Disabled toggle turns into Enabled when your restriction is on.
13. Click Add Restriction or Save Restriction to save your changes
If this is a new global restriction, click Add Restriction. If you’re editing an existing one, click Save Restriction.
Congrats! You did it 🎉
Are You Ready to Level Up?
Full Page Width Content Teasers
Do you want a full-width content teaser sort of like what the New York Times does? Then, you definitely need to check out our Page Overlay and Glass Overlay transition types. Both of these overlays span the full width of the page.
Here’s a quick demo of what the Glass Overlay looks like.
Here’s a screen capture of the Teaser Transition settings you’d need to change to get that glass overlay effect.
Notice for the Minimum Height and Maximum Height values, we used the VH unit.
Using Block Patterns for Your Teaser CTA
What if you want to reuse a Block Pattern for a CTA you already have throughout your site? Or, maybe you need the design flexibility the WordPress block editor gives you. No sweat. Content Teasers has built-in support for Block Patterns!
Stay tuned for our complete how-to guide coming soon.