/

How to hide a section for logged-out users in Divi and Elementor?

WRITTEN BY :
Aless Design Studio
POSTED ON :
17/10/2021
TAGS :

Table of Contents

In this post, we are going to see how to hide a section for logged-out users in Divi Theme and Elementor Page Builder.

Why do we need to hide a section for logged-out users in Divi and Elementor?

The process of creating a good and professional website is time-consuming. If you want to make a good product and look reliable to your new customers you really need to spend that time, make the research, and launch something amazing.

There are so many different types of websites. At some point, they may look identical, but somehow they are all different – design, functionalities, etc.

The website is created to be shown to your visitors and clients. You want them to show who you are, what your company is all about, and most importantly – how you can help them with their project and be part of the development and growth of their business.

But why do we need to hide a section for logged-out users in the first place?

It is obvious that our website no matter if it is a business website or online store, its main goal is to connect us with our customers. But according to the website logic, sometimes some parts of it are created only for members, logged-in, or logged-out visitors. 

Now we will see one very easy and fast way to make this happen. Let’s do it!

Hide a section for logged-out users for Elementor Page Builder

Go to the section you want to hide. Edit section > Advances > CSS Classes. Then paste the CSS Class: hide-for-logged-out

Hide a section for logged-out users for Elementor

Hide-a-section-for-logged-out-users-for-Elementor-Page-Builder

Then insert a new module as HTML and paste that following code into this box.

Hide-a-section-for-logged-out-users-for-Elementor-Page-Builder 2

This is the code you need to insert. When you are ready, save the changes!

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

Hide a section for logged-out users for Divi Theme

Go to the section you want to hide. Section settings > Advances > CSS Class. Then paste the CSS Class: hide-for-logged-out

Hide-a-section-for-logged-out-users-for-Divi Theme

Add a Code Module and paste the code. When you are ready, save the changes!

				
					<style>
body:not(.logged-in) .hide-for-logged-out {
    display: none !important;
}
</style>
				
			
Hide-a-section-for-logged-out-users-for-Divi Theme 2

That’s it! A really simple, fast, and effective way to show your content only to the logged-in users of your website!

 1,279 total views,  3 views today

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on skype
Share on email

Leave a Reply

Your email address will not be published.

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 781 total views,  2 views today

Read More »
WRITTEN BY :
Aless Design Studio
POSTED ON :
17/10/2021
TAGS :

Table of Contents

In this post, we are going to see how to hide a section for logged-out users in Divi Theme and Elementor Page Builder.

Why do we need to hide a section for logged-out users in Divi and Elementor?

The process of creating a good and professional website is time-consuming. If you want to make a good product and look reliable to your new customers you really need to spend that time, make the research, and launch something amazing.

There are so many different types of websites. At some point, they may look identical, but somehow they are all different – design, functionalities, etc.

The website is created to be shown to your visitors and clients. You want them to show who you are, what your company is all about, and most importantly – how you can help them with their project and be part of the development and growth of their business.

But why do we need to hide a section for logged-out users in the first place?

It is obvious that our website no matter if it is a business website or online store, its main goal is to connect us with our customers. But according to the website logic, sometimes some parts of it are created only for members, logged-in, or logged-out visitors. 

Now we will see one very easy and fast way to make this happen. Let’s do it!

Hide a section for logged-out users for Elementor Page Builder

Go to the section you want to hide. Edit section > Advances > CSS Classes. Then paste the CSS Class: hide-for-logged-out

Hide a section for logged-out users for Elementor

Hide-a-section-for-logged-out-users-for-Elementor-Page-Builder

Then insert a new module as HTML and paste that following code into this box.

Hide-a-section-for-logged-out-users-for-Elementor-Page-Builder 2

This is the code you need to insert. When you are ready, save the changes!

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

Hide a section for logged-out users for Divi Theme

Go to the section you want to hide. Section settings > Advances > CSS Class. Then paste the CSS Class: hide-for-logged-out

Hide-a-section-for-logged-out-users-for-Divi Theme

Add a Code Module and paste the code. When you are ready, save the changes!

				
					<style>
body:not(.logged-in) .hide-for-logged-out {
    display: none !important;
}
</style>
				
			
Hide-a-section-for-logged-out-users-for-Divi Theme 2

That’s it! A really simple, fast, and effective way to show your content only to the logged-in users of your website!

 1,280 total views,  4 views today

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on skype
Share on email

Leave a Reply

Your email address will not be published.

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 781 total views,  2 views today

Read More »