Wpdaily

Daily WordPress News

How to Show Divi’s Comments Module to Logged-In Users Only

The comments section of any blog can be a place of great discussion. However, there may come a time when you want to build your community online. With the Divi Condition Options feature, we can prevent users not part of your blog from commenting on posts. This could work for a members-only community or as a perk of a membership site.

In this tutorial, we’ll show you how to display Divi’s Comments Module to logged-in users only, this will allow you to directly interact with your community! We’ll use the Film Lab Blog Post Template for the base of this Divi tutorial.

How to Create a Members-Only Comment Section

Divi’s Condition feature allows us to choose a set of parameters with which modules, rows, columns, and sections can interact. For our case, we’ll want to set the display conditions based on a user’s logged-in status. Here’s a summary of the steps we’ll take in this tutorial to achieve our members-only comment section:

  1. Upload your blog post template to the Divi Theme Builder (or create your blog template!)
  2. Create your members-only comment section containing a Login Module
  3. Activate Display Conditions for the row containing the Login Module
  4. Activate Display Conditions for the row containing the Comment Module
  5. Save and test the template in an incognito window

Before: A Free-for-All All Comment Section

This is what the Film Lab Blog Post Template looks like without the members-only comment section. Notice that anyone can land on a blog post, read it, and interact with the comments section.

How to show Divi's Comments Module to logged in users only, after login

After: A Members Only Comment Section

Using Divi’s Condition Options, we can now show a Login Module. Once a user has logged in, they can interact with the Comment Module. If they are not a logged-in user, they cannot see or submit a comment.

How to show Divi's Comments Module to logged in users only, before login

Installing the Blog Post Template

Before we start creating our members-only comment section, we need to download the template we’ll use. You can download the Film Lab Blog Post Template here.

Download the Film Lab Blog Post Template from the Divi blog

Go to Divi Theme Builder

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

Getting started with the Divi Conference Layout Pack

Upload Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

Importing the Header and Footer Layout into the Divi Theme Buidler

Navigate to the import tab, upload the JSON file you could download in this post, and click ‘Import Divi Theme Builder Templates.’

Import settings for the header and footer layout pack

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new template with a new body area assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template activated.

Save the imported blog post layout within the Divi Theme Builder

Modifying The Template

Open Post Template

Now that our template is installed and assigned to all the blog posts on our site, we can begin building our members-only comment section. We start by opening the template.

Begin editing the blog post body template within the Divi Builder

Add a New Row for the Login Module

Add a new row within the same section as the Comment Module of this template. Switch to wireframe view to make it easier. Then, click the green plus icon to add a new row above the row containing the Comment Module.

Add new for for Login Module

Next, we’re going to add one column to the row.

Add a one column layout to the newly added row

Add Login Module

In our new row, we’re going to add a Login Module. We want users to log in to our website to access our members-only comment section. Scroll through the Module modal box till you see the

Add login module as we start to create our members only comment section

Add Text to Login Module

Let’s add a title to the Login Module. We’ll also use this title to ask users to log in before accessing our comments section.

Add title to Login Module

Style Login Module

Now, we will style our newly added Login Module to match the branding of the Film Lab Blog Template.

Setting the Background of the Login Module

Click on the paint bucket icon. This will add a solid fill color of #ff4125 to the module’s background. Next, click on the Use Background Color toggle.

Add background color to Login Module for our members only comment section

Background

  • Background Color: #ff4125
  • Use Background Color: Yes

Styling the Fields

For the Fields, we will use the same color as the section for its background with black text.

Start styling the fields of the Login Module

Fields: Background and Text Styling

  • Fields Background Color: #eae9e4
  • Fields Text Color: #000000
  • Fields Focus Background Color: #eae9e4
  • Fields Focus Text Color: #000000

We will also give the fields a border and no rounded corners. This will imitate the styling of the Comment Module.

Login fields border styling

Fields: Background and Text Styling

  • Fields Rounded Corners: 0
  • Fields Border Styles: All
  • Fields Border Width: 1px
  • Fields Border Color: #000000
  • Fields Border Style: Solid

Styling the Title

The title will use the same font used throughout the template and will be white.

Styling the title text of the Login Module

Title Text

  • Title Heading Text: H2
  • Title Font: Mulish
  • Title Text Color: #ffffff

Notice that we add responsive sizes for the title to look good on different screen sizes.

Setting the title text font sizes for the Login Module

Title Text: Font Size

  • Title Text Font Size (Desktop): 64px
  • Title Text Font Size (Tablet): 48px
  • Title Text Font Size (Mobiler): 48px

Styling the Button

To save time, copy and paste the button settings from the Comment Module to our Login Module. Click on the settings icon for the Comment Module.

Copying the button settings from the comment module

Navigate to the Design tab. Scroll down to the Button tab. Right-click on the button tab and click Copy Button Styles.

Copying the button settings -again -from the comment module

Afterward, exit the Comment Module. Enter the Login Module by clicking on the gear icon.

Enter Login Module settings

Again, click the Design tab and scroll down to the Button tab. Next, right-click and select Paste Button Styles. Voila! The button looks close to the button within the Comment Module.

Paste Button Styles from Comment Module to Login Module

Now, our Login Module’s button closely matches the styling of the Comment Module buttons. Yay us!

Login module Button styling

Apply Display Condition to Login Module Row

With our Login Module styled, we can now put our first Display Condition into place. The Display Condition is critical for creating a members-only comment section. Divi provides various options within the Display Condition feature that help make this possible. Click on the gear icon to enter the settings for the row containing the Login Module.

Enter the row settings for the row with the Login Module

Click on the Advanced tab within the row settings, then click the Conditions tab. Then, click on the plus icon.

Preparing to activate the Display Conditions for our members only comment section

When you click on the plus icon, you’ll have many options for what condition you’ll display (or hide) this row. Scroll down to User Status, and then click Logged In Status.

Activating logged in status display condition for the Login Module row

Once that is done, we’ll receive another modal box. Within this modal box, we want to click on the dropdown that says, User is Logged In and change that to User is Logged Out. This is what contributes to our members-only comment section. As we want people to be site members, they must have a valid login credential to access our comments section. If they don’t have valid credentials, they can’t access the comment section of our site.

Display this row only if the user is logged out

Display Conditions

  • Display Only If: User is Logged Out
  • Enable Condition: Yes

Once you’ve selected your Display Condition, ensure that you save your changes by clicking on the green check button of the modal box. Be aware of the notification regarding caching plugins.

Save display conditions settings in preparation for our members only comment section

Activating Display Conditions for the New Members Only Comment Section

The final piece of this tutorial is setting up the Display Condition for the row containing the Comment Module. To do this, click the gear icon to access the row settings.

Editing the row containing the Comment Module to create our members only comment section

Like the row containing the Login Module, once inside the Row Settings, we’ll click on the Advanced tab, then click the Conditions tab and press the plus icon to add our Display Condition.

Activating the Display Condition for the Comment Module row

For the row containing the Comment Module, instead of displaying only if the user is logged out, we want it to display only if the user is logged in.

Display Conditions for the row containing the Comments Module for our members only comment section

A Finished Members Only Comment Section

Now that we’ve added Display Conditions to both the Comment Module and the row with the Login Module, we can do a quick test. Visit a blog post on your site in an incognito or private browsing window.

Our members only comment section in a private browser

We use a private browser or incognito window to test our display conditions because the window will temporarily log us out of our website while browsing within it. When you go back to regular browsing and you *are* logged into your website, you should see your comment section. Alternatively, you can log out of your WordPress website to see your finished work! While we did this tutorial on a Comment Module, this can be applied to any module, row, column, or section natively within Divi; no additional plugin is needed. Take some time to mix and match the different display settings and see what you make.

In Conclusion

Creating a community on your WordPress website allows you to deepen the trust of those who use your website the most. A way to do this is by creating a members-only comments section that allows members to interact with each other easily. Divi has built-in tools and features that make doing this a breeze. With Divi’s native Display Conditions, allowing your users to only interact with each other is possible. Furthermore, you can easily style your Comments Module using the Design tab and Divi’s complete editing tools. To build an agile private community, you don’t need to install a membership plugin when you use Divi. By activating certain features in Divi’s core, you can create a logged-in user comment section, strengthen your online community, and keep your WordPress website light and agile. Before reaching for a plugin to add simple membership features to your website, consider checking out Divi’s Display Conditions for aspects of your website today.

The post How to Show Divi’s Comments Module to Logged-In Users Only appeared first on Elegant Themes Blog.

Source