Elementor Hidden Elements Guide: Simple Controls for Showing and Hiding Page Elements

Elementor Pro's Hide if Empty method uses CSS, which means that the element is set to invisible (display) even though it still exists in the source code.

The advantage is that it works with all custom field providers such as ACF, JetEngine, Pods, Metabox, etc.

If you want an Elementor hide (if empty) method that completely removes the markup from the document, you'll need to use Dynamic.ooo, JetEngine, or another plugin.

First, add the following code snippet to the functions.php file of the selected plugin or child theme. Since this is PHP code, it cannot be added directly to Elementor's custom code.

1、Using plug-ins

If you choose to use the Code Snippets plugin, follow these steps:

1. Navigate to the WordPress dashboard, Plugins > Add New Plugin, and in the search bar enterCode SnippetsInstall and activate the plugin.

2. Refresh the WordPress dashboard and go to "Snippets" > "Add New".

3. Paste the following code into the code box.

add_action( 'elementor/frontend/section/before_render', function( $section, $args ) {
    $settings = $section->get_settings_for_display();
    if ( empty( $settings['your_field_key'] ) ) {
        $section->add_render_attribute( '_wrapper', 'style', 'display:none;' );
    }
}, 10, 2 );

3. Add a description such as "Hide Elementor Widget if Empty".
4. Click on "Save Changes and Activate".

Ensure that you willyour_field_keyReplace with the key of the field you want to check. This way, if the field is empty, the widget will be hidden.

Using Elementor

To hide an element in an Elementor page if the field is empty, you can follow the steps below:

1. Go to page or template: Go to the Elementor page or template where the element needs to be hidden.
2. Select the element to hide: Selects the element that is hidden when the field is empty.
3. Go to Element Settings: In the Elementor editor, find the selected element in the "Element Settings" panel and select "high level".
4. Adding CSS Classes: Under the "Advanced" tab, find the "CSS Classes" setting and enter a class name in the input box, such as "hide-if-empty".

5. Save page: Save the page or template.
6. Add custom CSS: Go to "Additional CSS" in WordPress Appearance > Customize (exact location may vary) and add the following CSS code:

.hide-if-empty {
    display: none;
}

What if you want a class name?

If you want to use more than one class name on the same element, just follow these steps:

1. Go to the element of your choice in the Elementor editor.
2. Select the Advanced tab in the Element Settings panel on the right.
3. In the "CSS Classes" setting, enter your first class name, then end with a space, and then enter your second class name.

4. Make sure to separate each class name with a space so that Elementor recognizes them correctly.
5. Save your page or template.

3. AddShortcode

If you want to hide elements based on whether the current post has a featured image or post content, you can follow these steps:

1. Select the element to hide: Select the elements you wish to hide based on the condition in the Elementor editor.
2. Go to Element Settings: Select the Advanced tab in the Element Settings panel on the right.
3. Adding CSS Classes: In the "CSS Classes" setting, enter the class name, then end with a space and enter a second class name. Make sure to separate each class name with a space.
4. Add Shortcode Condition: After adding the class name, enter the following in the "Shortcode" field:

[elementor_if has_post_thumbnail="yes"]

Checks if the current post has a featured image. If you want to check if the post content is empty, you can use the following Shortcode:

[elementor_if has_excerpt="yes"]

Add the name of the class to be hidden when the condition is met to the Shortcode. For example, if you want to hide elements, the full Shortcode might be similar to:

[elementor_if has_post_thumbnail="yes"] your-class-name [/elementor_if]

5. Save page: Save the page or template.

Summary:

In Elementor, by using CSS classes and Shortcode conditions, elements can be hidden based on specific conditions. This method is not only easy to use, but also requires no additional plugins, just Elementor Pro. The display of page elements can be flexibly controlled by setting conditions based on whether a field is empty or whether the current post has a featured image or post content. This feature not only improves the flexibility of page design, but also optimizes page loading speed and user experience.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off