How can I hide the main popup div (boarding pass) when using the Webflow editor to add CMS content?
To hide the main popup div (boarding pass) when using the Webflow editor to add CMS content, you can follow these steps:
Identify the specific class or ID of the main popup div element that you want to hide. This can be found by selecting the element in the Webflow designer and checking the class or ID name in the element settings panel.
Go to the Page Editor in Webflow where you want to add CMS content and navigate to the section or element that contains the main popup div.
Add a new HTML Embed element within the section or element that contains the main popup div. You can find this element in the Add panel on the left-hand side of the editor.
In the HTML Embed element, add the following code:
<style> .your-div-class { display: none; }</style>Replace .your-div-class with the appropriate class or ID of your main popup div element.
- Save and publish your changes. The main popup div should now be hidden on your published site when CMS content is added to the page.
Make sure to replace .your-div-class with the actual class or ID name of the main popup div element, and also adjust the code accordingly if you are using an ID instead of a class.
This method is useful when you want to hide specific elements that are part of a Webflow component or CMS template while still allowing content editors to add CMS content without interfering with the overall design and layout of the page.
Example:
Let's say the class name of your main popup div is .boarding-pass.
Your code would look like this:
<style> .boarding-pass { display: none; }</style>With this code, the main popup div with the class .boarding-pass will be hidden when CMS content is added to the page using the Webflow editor.
Additional Questions:
- How do I find the class or ID of an element in Webflow?
- Can I hide other elements using the Webflow editor when adding CMS content?
- How can I show the hidden popup div based on a certain condition using Webflow?
