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.

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.

Follow these steps to make a Page Overlay content teaser.

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

2. Click Content Teaser under Protection > Protecting Content

3. Set Teaser Content > Teaser length to 20 Sentences

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

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

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

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

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.

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.

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

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

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

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.

11. Enable your restriction

12. Click Add Restriction

Click Add Restriction to save your new Global Restriction.

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

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.

Is this article helpful? What are your feelings