Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
Video Transcript
Hi, this is Mark from Wicky Design. In this Elementor tutorial, I’m going to show you how you can easily hide sections on your paginated pages. Now, this is a request that we’ve been getting a lot more often and out of the box, there is no easy way in Elementor to hide sections whenever you’re a few pages deep on your blog posts feed or anything like that. So in this example, I’m going to show you how you can remove sections with one line of CSS code. This isn’t going to require any custom javascript or plugins or anything like that. I found a way to do this with just a simple CSS code.
So first, let me show you an example of what most blog post feeds look like whenever you go a few pages in. So on this page, for example, I have the big call to action section and then I have the posts widget right down here. So by default, when you have your pagination setting on and I click on the next button, it will refresh the page and bring it back up to the top. So every time that the user would want to scroll through and see multiple blog posts, they are going to have to keep scrolling down every single time.
In this example, I’m going to show you how we can do something like this, where, same page, and when you click the next button, I want to hide this whole section up here. So when I click next, it just disappears completely. You can see in the URL whenever I click on the next button, it adds the page number – page 3, page 4. I want to always hide that section and it’s very easy to do, so let’s just jump right into how I did that.
Ok, so now I’m going to show you exactly how I was able to achieve this. So on this page, I have it separated out into 2 sections. The top section has this big call to action area. The bottom section is just using the simple Elementor blog post widget. The area that you would like to hide, you need to target that with either a CSS id or class. You’ll click on the section, go to advanced, and add in your custom id or class right here. So in this example, I’ve added the CSS id of hometop.
Now what you need to do is add the CSS code from the description below to the page settings. To do that, you click down here where the gear icon is and this will open the page settings for the page that has the blog widget.
Paste this code into the settings:
[class*="paged"] #hometop{display: none;}
Change the id or class here to your class name.
How this code works
This part of the code is a selector: [class*="paged"]
WordPress automatically creates this class called “paged” on any paginated pages. So using this selector easily targets just the pages that are in pagination mode and you can target the CSS class or id for the section above and just do display:none
That’s it! Like I said, it’s very easy. There’s not any more code or anything else that you have to do to achieve this. So again, the end result is that you’ll be able to go down here, click next, and that whole section is now gone completely.
So I hope this Elementor tutorial was helpful. Make sure you like this video and subscribe to this channel because we’re going to be kicking out a lot more Elementor tutorials like this. Thanks, this is Mark from Wicky Design.
