Create Your First Content Teaser

Updated on February 28, 2024

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.

  1. Click Addons.
  2. Under Teasers, click Install.

Cc V2 Pro Teasers Addon Install 1

Steps for Creating a Simple Gradient Content Teaser

1. Create or edit a global restriction

Cc V2 Edit Global Restriction 722W

If you need to learn how to create a restriction, read A Quick Start to You First Global Restriction.

2. Click Protection

Global Restriction Protection Tab Selected

3. Click Content Teaser

4. Keep Content selected for the Content Teaser > Source

Content is the default Source.

Cc V2 Global Restriction Content Teaser Source 783W

Don’t touch the other settings in this section. I.e., keep the default settings for:

  • Teaser length: 55 Words
  • Remove remaining content: unchecked

Cc V2 Global Restriction Content Teaser Length And Remaining 793W

5. Keep Simple Gradient selected for the Teaser Transition > Transition Type

Simple Gradient is the default Transition Type.

Cc V2 Content Teaser Simple Gradient 787W

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.

Cc V2 Content Teaser Gradient Colors White 1024W 1

When you’re ready, here’s how to change the gradient colors.

To change colors, click on the left or right handle.

Cc V2 Content Teaser Gradient Left Color Selected 704W

Drag the color palette handle, change the hue, or type in the hex code for the color you want.

Cc V2 Content Teaser Gradient Left White Marked 474W

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

Cc V2 Content Teaser Linear 180 703W

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).

Cc V2 Content Teaser Gradient Max Height 777W

9. Keep Button for the Teaser CTA > CTA Type

Button is the default CTA Type.

Cc V2 Content Teaser Cta Type 781W

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.

Cc V2 Content Teaser Cta H3 678W

Then, we’ll center-align our text.

Cc V2 Content Teaser Cta Align 510W

11. Enter your Button Text

Leave the Background Color, Text Color, and Button URL alone for now.

Cc V2 Content Teaser Cta Button Text 777W

12. Click Disabled to turn on your restriction

If you haven’t yet, click Disabled to turn on your restriction.

Cc V2 Global Restriction Disabled Toggle 387W

The Disabled toggle turns into Enabled when your restriction is on.

Cc V2 Global Restriction Enabled Toggle 368W

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.

Cc V2 Content Teaser Add Restriction 1024W

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.

Cc V2 Glass Overlay Teaser Demo

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!

Cc V2 Content Teaser Cta Type Block Pattern 1024W

Stay tuned for our complete how-to guide coming soon.

Is this article helpful? What are your feelings