Content Teaser Sneak Peek ????
In this article, I'll show you how to create a content teaser with a nice fade away effect for your paid posts and premium content.
This works great if you want to tease your audience with a great paragraph from one of your premium paid posts.
The teaser paragraph will be visible while the rest of the content will be hidden and replaced with your fully customizable Call-to-Action (CTA).
Your readers can either login (if they're members), sign up (free or paid), or pay to access the rest of the post—”pay per view” style.
The choice is yours!
Requirements
1 – MemberPress – our WordPress membership plugin of choice and the basis for this tutorial.
*Note: you can do this with other membership plugins but the steps will be different.
2 – CSS snippets – the pieces of CSS code that we will provide for you in this post to style your Call to Action.
Table of Contents
ToggleCreating your Unauthorized message in MemberPress
The first step is to create the message that you'll show to folks who try to access your content but don't have permission.
This is also your Call to Action.
1 – Go to:
WordPress Dashboard -> MemberPress -> Settings-> Pages tab -> Click on Default Unauthorized Message:
2 – Add some custom CSS to make the title colorful (optional).
To do this, click on the “Visual” tab at the top-right corner of the content box to switch away from the Text editor.
Now just highlight your title and change the color as you see fit.
3 – Next, let's make your call to action button look awesome.
To do this, go back to the unauthorized message screen, select the text editor in the content box like before, and add to your button the following class: mf-btn
Here's how the code looks:
<a class="mf-btn" href="#">Your Button Text Goes Here</a>
4 – Now we have to tell WordPress what the styling for that class should look like.
To do that, go to WordPress => Appearance => Customize => Additional CSS.
5 – If you have any custom CSS in this section, go to the very bottom and hit enter to create a line of whitespace.
On the next line, enter the following CSS:
.mf-btn{
padding: 8px 14px;
border-radius: 5px;
background-color: #20c174;
border: 1px solid #20c174;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: .3s ease-in-out;
}
.mf-btn:hover{
background-color: #fff;
color: #20c174;
text-decoration: none;
}
Create the MemberPress rule
After you create your unauthorized access message, you'll need to create a MemberPress content protection rule.
In this example, I created a rule to protect ALL WordPress posts because I want the fade away effect to apply to all of the posts on the site.
If you only want to protect certain posts, you'll need to use a different rule that protects Single Posts only.
After you select your rule conditions, go to MemberPress => Rules => Unauthorized access and select the “More tag” from the Excerpts dropdown.
Save changes.
Note: The unauthorized message dropdown allows you to add a different message than the one you set in the MemberPress general settings. This message will override the default global setting for this rule.
Add the Read More tag to your posts
Gutenberg Read More Block
In the Gutenberg editor, add a new block and search for the “Read More” module.
Add that to your post.
Classic Editor Read More Element
If you're using the Classic Editor you'll have to insert the “read more” element from the toolbar by clicking the icon shown in the screenshot below:
Add Custom CSS snippets to create the fade effect
With this snippet, you will be able to make your unauthorized access box stand out.
Go back to WordPress Dashboard -> Appearance -> Customize -> Additional CSS.
Scroll to the bottom, create a line of whitespace, and paste the following CSS there:
/* Making the box of the unauthorized message stand out
*
* add the background color and the border
*/
.mp_wrapper .mepr-unauthorized-message, .mp_wrapper .mp_login_form{
background-color: #f9f9f9;
border-top: 2px dashed #bcbcbc;
padding: 1.875rem;
}
/* Remove the second border and adjust the large margins and padding from top and bottom */
.mp_wrapper .mepr-unauthorized-message p:last-child{
margin-bottom:0;
}
.mp_wrapper .mp_login_form{
border-top: none;
padding-top: 0;
}
/* Adjust the margins of the H3 tag */
.mepr-unauthorized-message h3{
margin: 1rem auto 2rem;
}
To make the background or border have the color of your choosing, you'll need to change the hex code of the color.
For example, the hex code for black is #000000
You can select your hex code in this free online Color Picker.
So if you wanted to change the background color to black, you would edit the CSS snippet above from this:
background-color: #f9f9f9;
To this:
background-color: #000000;
*Note that the only thing you have to change is the 6 digit color code which I've highlighted for you; everything else remains the same.
Likewise, if you want to modify the border color to be black, you would change the border color element from this:
border-top: 2px dashed #bcbcbc;
To this:
border-top: 2px dashed #000000;
Once you're happy with your box design, simply add the final snippet to the Custom CSS area in the Customizer, and you are ready to go!
/* Adding the fadeaway effect on the posts */
.mp_wrapper .mepr-unauthorized-excerpt:after {
background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.9));
bottom: 0;
content: "";
height: 40%;
left: 0;
position: absolute;
width: 100%;
}
.mp_wrapper .mepr-unauthorized-excerpt{
position: relative;
}
Me Want This! You help?
Want some help implementing this awesome protected content teaser box with fade away effects on your MemberPress site?
No problem!
Just fill out and submit the form below and tell us what you want…we're always keen to make it happen for you.
"*" indicates required fields