{"id":941,"date":"2025-03-24T14:28:05","date_gmt":"2025-03-24T14:28:05","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/elementor-pro-css-hide-conditions\/"},"modified":"2025-04-03T15:24:26","modified_gmt":"2025-04-03T14:24:26","slug":"elementor-pro-css-hide-conditions","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/builders\/elementor-pro-css-hide-conditions\/","title":{"rendered":"Elementor Pro CSS Hide Conditions"},"content":{"rendered":"<p>\n\tWith <strong>Elementor Pro and GeoDirectory,<\/strong>&nbsp;you can use CSS Hide Conditions to hide information if the GD custom field is not set or is set to a specific value.&nbsp; Individual elements can be hidden, or whole sections can be hidden.<\/p>\n<h3>CSS Hide Conditions<\/h3>\n<p>\n\tCSS Hide Conditions are available on most elements that support dynamic content.&nbsp; Find them by selecting and element &gt; <strong>Advanced &gt; Layout &gt; CSS Classes.&nbsp; <\/strong>Click the <strong>dynamic button<\/strong> and <strong>scroll to the bottom<\/strong> of the list and look for &#8220;<strong>GD CSS Hide Conditions<\/strong><\/p>\n<p>\n\t<img width=\"308\" height=\"346\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-07Fl1cmDNA.png\" class=\"attachment-large size-large\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-07Fl1cmDNA.png 308w, https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-07Fl1cmDNA-267x300.png 267w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><\/p>\n<p>\n\tClick the wrench icon and then select the GD custom field to use.<br \/>\n\t<img width=\"283\" height=\"272\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-gNb5C4aOKr.png\" class=\"attachment-large size-large\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/p>\n<p>\n\tYou have many options when it comes to the actual condition, which gives you all the possibilities for creating the ideal hide condition.<\/p>\n<h3>Notes on Elementor Icon List Element:<\/h3>\n<p>\n\tIf you are using the Elementor <strong>&#8220;Social Icons&#8221; element, this will automatically hide the icon <\/strong>if the value is empty, <strong>however,<\/strong> if you are using the <strong>&#8220;Icon List&#8221; element,<\/strong> this would still show the icon and then an <strong>empty value:<\/strong><\/p>\n<p>\n\t<img width=\"341\" height=\"173\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-B18hLM4D7r.png\" class=\"attachment-large size-large\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-B18hLM4D7r.png 341w, https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-B18hLM4D7r-300x152.png 300w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/p>\n<p>\n\tFor the Icon List element, the solution to this is to only add one item to the list and then duplicate the whole list to add a new item, this way you can use the CSS Hide Conditions to hide the element:<\/p>\n<p>\n\t<img width=\"132\" height=\"63\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-JUnxjgelLV.png\" class=\"attachment-large size-large\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With Elementor Pro and GeoDirectory,&nbsp;you can use CSS Hide Conditions to hide information if the GD custom field is not set or is set to a specific value.&nbsp; Individual elements can be hidden, or whole sections can be hidden. CSS Hide Conditions CSS Hide Conditions are available on most elements that support dynamic content.&nbsp; Find [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[211,436],"class_list":["post-941","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-tips-tricks-more","gd_placecategory-builders"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=941"}],"version-history":[{"count":0,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/941\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=941"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=941"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}