Advanced Content Teasers With Page and Glass Overlays

Updated on January 30, 2024

What’s in This Guide

Full-Width Overlays

This guide shows how to create full-page-width content teasers that look similar to the ones on the New York Times site.

In the Create Your First Content Teaser guide, we used a Simple Gradient style teaser. Here, we’ll teach you how to work with the other 2 Teaser Transition Types.

  1. Page Overlay
  2. Glass Overlay

If you’ve never made a Content Control Content Teaser, please check out the Create Your First Content Teaser guide.

Reusable Block Patterns

Don’t want to reinvent the wheel?

If you’re into reusability, you’re going to love this bonus feature! You can use WordPress Block Patterns as your call-to-action content in Page and Glass Overlays. The tutorial below shows how to do that.

Read the WordPress Block Patterns doc to learn how to create a Block Pattern.

Make sure you’ve got the Block Pattern you want to use ready to go. Below is a visual of the Block Pattern we’ll use for the Content Teasers in this doc.

Wp Theme Editor Pattern Teaser 1024W

Feel free to copy/paste the source code for our Content Teaser to jump-start your own teaser.

Page Overlay Content Teaser

Demo of the End Result

Here’s an example of the page overlay style we’re going for.

Cc V2 Nyt Teaser Demo 2

Follow these steps to make a Page Overlay content teaser.

1. Click Logged In Users under General > User Status > Who can see this content?

Cc V2 Nyt Content Teaser Logged In 1024W

2. Click Content Teaser under Protection > Protecting Content

Cc V2 Nyt Content Teaser Protection 1024W

3. Set Teaser Content > Teaser length to 20 Sentences

Keep Content as the Source. But change Teaser length from 55 words to 20 sentences.

Cc V2 Nyt Content Teaser Length 1024W

4. Select Page Overlay for the Teaser Transition > Transition Type

Cc V2 Nyt Content Teaser Transition Type 1024W

5. Keep Transition Scrolling set to Limit to end of teaser

Here, we keep the default Transition Scrolling and Background Color.

Cc V2 Nyt Content Teaser Transition Scrolling 1024W

6. Set the Minimum Height to 30 VH

Bump up the Minimum Height from 25 VH to 30 VH. Keep the Maximum Height set to 50 VH.

Cc V2 Nyt Content Teaser Height 1024W

7. Select Block Pattern for the Teaser CTA > CTA Type

This is where block patterns come in. You can stay with the default CTA Type, which is Button. Or follow along with the rest of the tutorial to see how to leverage existing content.

Below, we select Block Pattern.

Cc V2 Teaser Type Block Pattern 1024W

8. Pick the block pattern you want for the CTA Template

Following our example, we pick our NYT Style Content Teaser pattern.

Cc V2 Teaser Cta Template Pattern Selection 1024W

9. Keep the defaults for Handling matches in archives and everywhere else

Cc V2 Handling Matches Archives Everywhere 850W

10. Add a rule to your restriction

For our example, we have a post called NYT Style Teaser. So, we use the Content Is A Selected Post rule and select our NYT Style Teaser post.

Cc V2 Content Selected Post Nyt Teaser 1024W

11. Enable your restriction

Cc V2 Global Restriction Enabled Toggle 368W

12. Click Add Restriction

Click Add Restriction to save your new Global Restriction.

Cc V2 Add Restriction Button 389W

13. Test Your Content Teaser

Here’s where the rubber meets the road.

Remember, we set up our restriction to allow logged-in visitors to see the full content. Only logged-out visitors can see the teaser.

Heads up!

If you don’t see the content teaser, but you can see the full post/page, then double-check:

  • You’re logged out.
  • All the Content Teaser restriction settings match what’s in this tutorial.
  • You saved and enabled the Content Teaser restriction.

Glass Overlay Content Teaser

The glass overlay style looks exactly like the Page Overlay, except the teaser background is slightly transparent (like frosted glass).

Demo of the End Result

Cc V2 Glass Teaser Demo

Choose Glass Overlay for the Teaser Transition Type

For the Glass Overlay content teaser, all the teaser settings are the same as the Page Overlay except for the Transition Type (see step 4).

So follow the same steps for the Page Overlay. But when you reach step 4, select Glass Overlay instead of Page Overlay.

Cc V2 Teaser Transition Type Glass Overlay 712W

Is this article helpful? What are your feelings