• a

POPULAR DIVI PRODUCTS

Molti Ecommerce

Go-On 2.0

Molti

Marko

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

Live Chat Now

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

POPULAR

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Go-On 2.0

The Most Modern Child Theme for Selling Digital Products.

Molti

Multipurpose Business Child Theme for Divi.

Marko

Premium Layout for your next Digital Marketing Agency Site.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Live Chat Now

Need Quick Help? You can also Live Chat with us anytime you like.

Send us a Message

Need Help? Send us a Message and we’ll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you’ll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

Earn Money while Promoting our Products today.

How to Hide a Section for Logged out Users in Divi/Elementor.

Hi guys.

In this tutorial, I am going to show you how you can hide a Specific section for Logged out users in Divi and Elementor or any other Page Builders out there. There are many reasons why you wanted to do this so this is a solution for you.

It’s so easy no need of any plugin we just need to add a class to that section(that will not available for logged out user) and a few lines of CSS.

First of all, we need to add a class to that section which will be: hide-for-logged-out.

Then add a Code Module.

And paste this CSS in the that Box(You can add this code anywhere you paste your CSS codes just make sure to remove the style tags when you paste it in Theme Options and other places).

<style>
      body:not(.logged-in) .hide-for-logged-out {
    display: none !important;
}
</style>

Now, logout from your site and see that Section will not appear as you’re logged out.

In Elementor

The same thing goes for the Elementor as well just add class to that section:hide-for-logged-out

Now add a new module as HTML and paste that code in this box.

Make Beautiful websites with ease using our Handmade Beautiful Child Themes

For Divi

Related Video

Now try to logout from your site and see that Section will not appear as you’re Logged out.

So that’s it for this tutorial Hope you’ve liked it and if you found any problem just put a comment in the section below and I’ll try to help you as soon as possible.

Feeling Generous

Give me a Cup of Coffee and have a gift for giving me a Coffee

Buy me a coffeeBuy me a coffee

Written by : Samar Jamil

"

Get Freebies and new blog post notification straight in your inbox!

20 Comments

  1. Incze Ábel

    hi i would like the opposite, but isnt work when i change the words. I would like to hedi when logged in and sho when logged out. what can i do? thx

    Reply
  2. Mauricio Gil-Angove

    Hi Samar! great job, but if i want to hide the section just for logg in users?

    Reply
    • Samar Jamil

      Hi Mauricio,
      Very soon I’ll post a video on my Channel where I’ll show you in detail how to do it. You’ll have full control. And I’ll be using Divi Supreme Plugin to do so. You can follow the link to get a 10% discount.
      Have a great day!

      Reply
    • Philippe Sudan

      There you go Mauricio, add this to your child CSS stylesheet or in your theme

      /* Hide a class if logged-in or out */

      /* Class hide-for-looged-out */
      body:not(.logged-in) .hide-for-logged-out {
      display: none !important;
      }
      /* Class hide-for-looged-in */
      body.logged-in .hide-for-logged-in {
      display: none !important;
      }

      Thanks Samar, nice job!

      Reply
      • SHAILENDRA

        I am facing an issue in Elementor
        If I use the hide for logged in, then I am not able to see the section in editor.

        Reply
        • Samar Jamil

          Hi Shailendra
          That’s how it works. You can use Layer View to edit your section/widgets after inserting this code.

          Reply
      • Muneeb Ashraf

        thank you very much, Philippe! It worked 🙂

        Reply
      • Lisan E.

        Jajakallah

        Reply
  3. Jéssica

    Thaaaanks!!! you save-me, and it’s soo easy. Thank you, really.

    Reply
    • Samar Jamil

      You’re very welcome. I’m glad that It was helpful to you.

      Reply
  4. chas

    This also saved me $25 a year for a plug in i would have to purchase. THANK YOU!

    Reply
    • Samar Jamil

      That’s awesome, I’m glad that this was helpful for you!

      Reply
      • Tanveer Malik

        I wonder if these are kind of sudo classes provided by Elementor or other similar page builders?, I am interested in reading a bit more about these classes if that’s the case.
        I am interested in hiding a particular section from my header if it’s not ‘Front Page’ or ‘Home Page’, any help will be highly appreciated.
        TIA

        Reply
        • Samar Jamil

          Hi Tanveer
          Yup those pseudo-classes are provided by WordPress, I’m pretty sure about that.
          And regarding your question to hide a specific part of the header on Homepage/Frontpage, well you can easily do that with Theme Builder. Just create a new template and assign it to the Homepage then duplicate the Global Header to create a custom Header for homepage only and remove the section you don’t want to show on the Homepage.
          Hope that helps!

          Reply
  5. mone27

    Thanks really useful!
    It a simple and versatile system (and I guess should work also with other page builders)

    Reply
  6. Rafi

    Hello Samar,

    Please show how to hide elements for specific role-based users. For example, I have both shop customers and subscription members. They both are different, but they can logged into the site based on their roles. If I want to hide elements for logged-in shop customers, but show for logged-in subscription members, can you please show me the code snippet I have to add for specific role?

    Reply
    • Samar Jamil

      Hi Rafi,
      You might wanna use a Plugin for this kind of thing. I’ve recently released a video on this, you can find it here: https://youtu.be/K2buGgTd4aM
      Hope that helps!

      Reply
  7. Luis

    Thanks a lot! Works like charm.

    Reply
    • Samar Jamil

      You’re most Welcome, I’m glad it was helpful to you!

      Reply
  8. Andy

    Hi, just to be sure, with this tip, the content will be hidden but still accessible in the code of the page right ?
    is there a php way of not loading the content at all if the user is not logged in ?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

Share This