Support for Content Teasers is a Pro feature. Upgrade to Pro now.
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.
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.
- Launch a new browser window in Incognito mode.
- In the new Incognito browser, bring up the post or page you picked for your restriction rule.
- Make sure you don’t log in while viewing that page/post.
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.
