In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
TL;DR
- Assign unique IDs to the footer elements you want to hide in Webflow Designer.
- Add a JavaScript snippet to the “Before </body>” section that checks for
?mlsin the URL and hides those elements.
To hide specific footer elements in Webflow when the URL contains a specific parameter like ?mls, you can use a simple custom JavaScript snippet.
1. Identify Elements You Want to Hide
- In Webflow Designer, select each element you want to hide (e.g., “Ramin Khaze The Difference”, “Schedule showing”).
- In the Element Settings Panel, give each a unique custom ID (e.g.,
ramin-footer,schedule-showing).
2. Add Custom Code to Your Project
- Go to Page Settings (for the page where the rule should apply) or Site Settings > Custom Code (for all pages).
- Scroll to the Before </body> tag section.
- Paste this JavaScript snippet:
<script>
window.addEventListener('DOMContentLoaded', function() {
if (window.location.href.includes('?mls')) {
var ramin = document.getElementById('ramin-footer');
var schedule = document.getElementById('schedule-showing');
if (ramin) ramin.style.display = 'none';
if (schedule) schedule.style.display = 'none';
}
});
</script>
3. Publish Your Site
- Click Publish to push changes live and test the behavior.
- Visit a URL like
https://yourdomain.com?mlsand confirm the elements are hidden.
4. Troubleshooting Tips
- Make sure IDs match the ones you applied to elements in the designer.
- You can test URLs locally with preview links or on the live domain.
Summary
To hide footer elements based on a URL parameter in Webflow, assign unique IDs to the target elements and use a custom JavaScript snippet in the Before </body> section. The script checks for ?mls in the URL and hides matched elements accordingly.