There are cases where clients want to hide certain elements or containers based on a URL parameter. For example, in the FareClock project, the client is using website pages in their mobile app. They requested that, based on a query string (inapp) already defined on their old website, the header and footer of the website be hidden, as these pages are used in their mobile application. To implement this functionality, I utilized the GET parameter feature within Elementor without the need for custom functions. See the steps below:
Step 1:
Step 2:
Step 3:
Step 4:
Add the following CSS into the global code block in Script Organizer. So, when the query string is true the header of the website will be hidden, see the demo below.
.fc-hide-inapp {
display: inherit;
}
.fc-hide-inapp.true {
display: none;
}
Demo:
See the demo when the query string is true vs the without query string:
- Page with query string: https://www.fareclock.com/terms/?inapp=true
- Page without query string: https://www.fareclock.com/terms/
That’s it. hope you find value in it!
Happy Developing! 