Divi’s built-in situation choices make it very easy to cover or present any aspect based mostly on plenty of situations, together with the consumer’s logged-in standing. A extremely helpful utility of this conditional performance is to create member-exclusive weblog posts. The thought is to indicate non-members (or logged-out customers) a short excerpt of the put up content material together with a name to motion to enroll or log in to see the total article. Then, for members (or logged-in customers), you present the total put up with all of the content material.
On this tutorial, we’re going to present you the best way to create member-exclusive weblog posts by utilizing Divi’s theme builder and Divi’s new situation choices. As soon as completed, you’ll have a dynamic weblog put up template that can incentivize customers to change into a member of your web site to view the total content material of every put up.
Let’s get began!
Sneak Peek
Here’s a fast take a look at the design we’ll construct on this tutorial.
Here’s a weblog put up exhibiting solely the put up excerpt and a CTA overlay inviting customers to change into a member or log in to view the total article.
When you log in utilizing the login type, you may be redirected to the identical put up exhibiting all the put up content material.
Obtain The Member-Unique Weblog Put up Template For FREE
To put your arms on the free Member-Unique Weblog Put up Template from this tutorial, you’ll first have to obtain it utilizing the button under. To realize entry to the obtain you will have to subscribe to our Divi Every day electronic mail listing by utilizing the shape under. As a brand new subscriber, you’ll obtain much more Divi goodness and a free Divi Format pack each Monday! In the event you’re already on the listing, merely enter your electronic mail handle under and click on obtain. You’ll not be “resubscribed” or obtain further emails.
@media solely display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container type enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container type button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}
Obtain For Free
Be part of the Divi E-newsletter and we are going to electronic mail you a replica of the last word Divi Touchdown Web page Format Pack, plus tons of different wonderful and free Divi assets, suggestions and methods. Observe alongside and you may be a Divi grasp very quickly. In case you are already subscribed merely sort in your electronic mail handle under and click on obtain to entry the structure pack.
You have got efficiently subscribed. Please examine your electronic mail handle to verify your subscription and get entry to free weekly Divi structure packs!
Easy methods to Add The Template
Go to Divi Theme Builder
To add the template, do the next:
- Navigate to the Divi Theme Builder within the backend of your WordPress web site.
- Then, within the prime proper nook, you’ll see an icon with two arrows. Click on on the icon.
- Within the portability popup, choose the import tab
- Add the JSON file that you would obtain on this put up
- Click on on ‘Import Divi Theme Builder Templates’.
- Save Modifications
Easy methods to Create Member-Unique Weblog Posts with Divi’s Situation Choices
Half 1: Importing the Weblog Put up Template
For this tutorial, we’re going to create member-exclusive weblog posts by including situation choices on a weblog put up template. You need to use any customized weblog put up template you need, however for now, we’re going to use the Marina Weblog Put up Template which is already premade and able to obtain on our weblog.
To obtain the Marina Weblog Put up Template, navigate to the put up on our weblog. Below the Obtain part, enter your electronic mail handle to entry the obtain. Then click on the obtain button to obtain the zip file.
As soon as downloaded, unzip the file in order that the JSON file is prepared for add.
To add the weblog put up template to your web site, do the next:
- Navigate to the Divi Theme Builder within the backend of your WordPress web site.
- Then, within the prime proper nook, you’ll see an icon with two arrows. Click on on the icon.
- Within the portability popup, choose the import tab
- Add the JSON file that you would obtain on this put up
- Click on on ‘Import Divi Theme Builder Templates’.
- Click on the edit icon on the customized physique space of the template to start modifying the structure.
Half 2: Creating Put up Excerpt Content material for Logged Out Customers
As soon as the weblog put up template has been imported and you’ve got clicked to edit the customized physique space of the template, you’re prepared so as to add the put up excerpt content material for logged-out customers. Put up excerpt content material is offered as dynamic content material in Divi and is an ideal technique to present a preview of the put up content material with out exhibiting all the put up content material.
Add New Row for Put up Excerpt
Earlier than including the put up excerpt content material, first, add a brand new row instantly beneath the present row containing the put up content material and put up navigation modules.
Then copy the row types of the row instantly above the brand new row and paste the types to the brand new row.
Open the settings of the brand new row and replace the padding as follows:
- Padding Backside: 20px
This may give us a static spacing that we will overlap with our overlapping part in a while.
Add New Textual content Module with Put up Excerpt as Dynamic Content material
Contained in the row, add a brand new textual content module.
Below the content material tab of the textual content settings, click on dynamic content material icon when hovering over the physique space and choose to make use of the Put up Excerpt as dynamic content material.
To match the textual content types with the present structure, open the settings for the put up content material module and duplicate the textual content types.
Then previous the textual content types to the brand new textual content module containing the put up excerpt dynamic content material.
Subsequent, do the identical for the heading types. Copy the heading types from the put up content material module.
Then paste the heading textual content types to the brand new textual content module.
Now any put up excerpt content material will inherit the matching types set within the textual content module.
Half 3: Constructing the CTA Overlay Part for Logged Out Customers
Now that the put up excerpt content material is completed, we’re able to construct the CTA overlay part that we wish to seem for logged-out customers.
Add New Part and Row
To do that, add a brand new common part under the part containing the put up content material and put up excerpts.
Add a two-column row to the part.
Add Name to Motion for Non-Members
Within the left column, add a name to motion module. This may function a name to motion that encourages the consumer to click on a button to sign-up for a membership. So it would be best to be sure you have a membership sign-up web page which you could redirect customers to with the button URL.
Below the content material tab of the Name to Motion Settings, replace the next:
- Title: Entry Premium Content material
- Button: Be part of for $4.99/mo
- Button Hyperlink URL: #
- Background Shade: #12115d
Below the design tab, replace the textual content and button types as follows:
- Title Font: Playfair Show
- Title Font Weight: Daring
- Physique Line Top: 2em
- Button Textual content Dimension: 16px
- Button Textual content Shade: #12115d
- Button Background Shade: #fff
- Button Padding: 0.7em prime, 0.7em backside, 1.7em left, 1.7em proper
Add Login Kind for Present Members
In the precise column, add a login module. This may enable current customers to log in to see the total article in the event that they aren’t already logged in.
Below the content material tab of the Login settings, replace the next:
- Title: Log In To Learn The Full Article
- Redirect to the Present Web page: YES
- Use Background Shade: NO
NOTE: Be certain that to redirect customers to the present web page for a greater consumer expertise. Additionally, you gained’t have the ability to see the white textual content and not using a background shade but, however we’ll repair that.
Below the design tab, replace the next:
- Fields Background Shade: #e3e8f0
- Textual content Shade: Darkish
- Title Font: Playfair Show
- Title Font Weight: Daring
- Title Textual content Alignment: middle
To hurry up the method of getting an identical button type, copy the button types within the E-mail Optin Module in the precise column of the row contained in the part with the title “Join Our Newsletter”.
Then paste the button types to the brand new login module we simply created.
Add Part Overlap Types
To be able to full the design of the overlapping part, we’d like add just a few type parts to the part containing our CTA and Login type. Open the part settings and replace the design settings as follows:
- Margin: -60px prime
- Field Shadow: see screenshot
- Field Shadow Vertical Place: -50px
- Field Shadow Blur Place: 50px
- Shadow Shade: #fff
This may deliver the part upward by 60px in order that the box-shadow overlaps the underside portion of the put up excerpt textual content within the part above.
Below the Superior tab, ensure that the overlay part stays above the opposite parts on the web page by updating the Z Index of the part to 12.
- Z Index: 12
Half 4: Including Show Situations to Parts Based on Person’s Logged In Standing
Now that the put up excerpt row and the overlay part (with the CTA and Login type) are full, we’re prepared to make use of Divi’s built-in situation choices to cover and present parts based mostly on the consumer’s logged-in standing.
Present Full Put up Content material for Logged-In Customers
First, we’re going to add a show situation to indicate the row containing the put up content material module solely to logged-in customers.
To do that, open the row settings and, beneath the Superior tab, click on so as to add a brand new show situation.
Below the drop-down menu, choose the choice “Logged In Status”.
Within the Logged In Standing settings popup, ensure that the choice is ready to Show Solely If Person Is Logged In. Then save adjustments.
Present Put up Excerpt Row for Logged-Out Customers
With the put up content material presently hidden to logged-out customers, we have to present the row containing the put up excerpt content material to these logged-out customers as a substitute.
To do that, open the settings for the row containing the put up excerpt and, beneath the Superior tab, click on so as to add a brand new show situation.
Below the drop-down menu, choose the choice “Logged In Status”.
Within the Logged In Standing settings popup, ensure that and choose the choice to Show Solely If Person Is Logged Out.
Then save adjustments.
Present Overlay CTA Part for Logged-Out Customers
Along with the put up excerpt content material, we additionally wish to present the overlay CTA part to logged-out customers. This may give them the chance to sign-up for a membership and/or log in to view the total article.
To do that, open the settings for the part containing the CTA and Login type.
Below the Superior tab, click on so as to add a brand new show situation.
Below the drop-down menu, choose the choice “Logged In Status”.
Within the Logged In Standing settings popup, ensure that and choose the choice to Show Solely If Person Is Logged Out.
Then save adjustments.
Hiding Further Parts for Logged-Out Customers
Along with the put up content material, you might also wish to disguise further sections or parts that content material put up content material (like associated posts, feedback, and so forth.). To cover the extra put up parts, use Divi’s multi-select function to pick all of the sections you wish to disguise, then open the settings for one of many parts and add a brand new show situation. Choose the Logged In Standing situation and ensure it’s set to Show Solely If Person is Logged In. And save adjustments.
Half 5: Customizing the Put up Excerpt Content material
By default, the put up excerpt dynamic content material will show a small snippet of the put up content material. Nonetheless, you’ll be able to customise the put up excerpt content material to show no matter content material you need. To do that, edit any of your posts and add the HTML content material beneath the Excerpt toggle within the sidebar with the put up editor choices.
Remaining Consequence
To view the ultimate outcome, open a reside model of a weblog put up when you are logged out. It’s best to see the put up excerpt and CTA part overlay.
When you log in utilizing the login type, you may be redirected to the identical put up exhibiting all the put up content material and any of the extra sections you chose to cover.
Remaining Ideas
Hopefully, this tutorial will aid you get the performance it’s essential to get member-exclusive weblog posts in your Divi web site with ease. Don’t neglect, you’ll be able to at all times use Divi’s theme builder choices to assign this member-exclusive weblog put up template to particular posts, posts with sure classes, or to all posts site-wide.
I look ahead to listening to from you within the feedback.
Cheers!
The put up Easy methods to Create Member-Unique Weblog Posts with Divi’s Situation Choices appeared first on Elegant Themes Weblog.