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

Sep 15, 2019 | Divi Tips, WordPress Tutorial | 10 comments

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.

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 coffee

Written by : Samar Jamil

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

10 Comments

Incze Ábel on March 31, 2020 at 1:07 pm
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
Mauricio Gil-Angove on April 1, 2020 at 8:42 am
Hi Samar! great job, but if i want to hide the section just for logg in users?
Reply
- Samar Jamil on April 1, 2020 at 8:52 am
  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 on April 23, 2020 at 1:34 pm
  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
Jéssica on June 9, 2020 at 12:32 pm
Thaaaanks!!! you save-me, and it’s soo easy. Thank you, really.
Reply
- Samar Jamil on June 17, 2020 at 10:59 am
  You’re very welcome. I’m glad that It was helpful to you.
  Reply
chas on July 26, 2020 at 10:12 pm
This also saved me $25 a year for a plug in i would have to purchase. THANK YOU!
Reply
- Samar Jamil on July 27, 2020 at 9:34 am
  That’s awesome, I’m glad that this was helpful for you!
  Reply
  - Tanveer Malik on July 27, 2020 at 12:44 pm
    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 on July 27, 2020 at 1:08 pm
      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