We introduced a new option that allows you to enter CSS classes or IDs of page elements you want to hide for every location segment.
In case you have something on your page that you want to hide for specific geographical locations this is definitely the best option to use.
It does work best with small amount of content
How selectors are entered
CSS classes and CSS IDs are entered in two separate fields inside each location segment:
CSS classes — enter class names separated by commas, without the leading
.(e.g.my-banner, sidebar-promo)CSS IDs — enter element IDs separated by commas, without the leading
#(e.g.hero-section, modal-overlay)
Both are handled independently. You can use either or both in the same segment.
How hiding is applied
When a visitor matches the location segment, the generated script applies the following CSS to each targeted element:
display: none !important; visibility: hidden !important;
The script runs as soon as the DOM is ready. If the page has already finished loading when the script executes, hiding is applied immediately. If the page is still loading, hiding runs on the DOMContentLoaded event.
Note: elements that are inserted into the page dynamically after the DOM has loaded (for example, by a CMS widget or third-party script) may not be caught by this mechanism, because the hiding function has already run by that point.