Why is my widget grayed out?

Why is my widget element grayed out in the Elementor Editor?

There are two common reasons for seeing an item "grayed out" in the editor, when you expect to see content there.

Item has been hidden on certain devices

If the visibility of the item has been hidden (on desktop, tablet and / or mobile), you will see that this item is 'muted'. This gives you a clear indication that this item will be hidden on the live site, but still allows you to edit it as needed.

How to edit a hidden / muted item

You can edit that specific area in answer mode where it is not hidden. For example, if the item is visible on mobile but hidden on desktop and tablet, you can edit the item in mobile view.

How to check element visibility

1. Go Section> Advanced> Responsive
2. Set your visibility preferences, choosing between Hide on desktop, Hide on tabletor Hide on mobile.

The element is dynamic and has no content to display

If you are dynamically pulling content, either from a custom field or from WooCommerce products, or even displaying post or page content and metadata within the individual file or templates, you may occasionally encounter a dimmed widget. This occurs because there is no content available to display within the widget. To solve this, you will need to add the content to the products, pages or posts.

Here are some examples:

1. You are setting up your WooCommerce unique product template and one of the product elements, such as the short description, is grayed out. In this example, you need to edit your products in the WooCommerce Products editor to add a short description to each product. Once short product descriptions have been entered, the single product template will display the short description and it will no longer be grayed out. If you only have this content in some of the products, you can verify that it works by previewing one of those products in the template editor.
2. You're setting up your unique post template, and one of the post elements, such as the featured image, is grayed out. In this example, you need to edit your posts in the WordPress editor and add the featured image to each of them. After posts have featured images attached, the single post template will display the featured image and it will no longer be grayed out. If you only have featured images for some of your posts, you can verify that this works by previewing one of those posts in the template editor.
3. You are dynamically including a custom field, but it is grayed out. As with the other examples, the field does not have any content, so you will need to go to the posts or pages in question and add content to the custom field. Once the custom field has content, it will be displayed and will no longer be grayed out.

These are just some examples. You can find this in other ways, but in all cases, you have to assume that if you are trying to dynamically display content and encounter the situation mitigated within the editor, you have to assume that there is no content available to be published. unfolded. Go add content in the relevant area of your site and the mitigated situation within the editor will resolve itself.

Of course, site visitors will never see anything "dimmed". Naturally, in many cases, some products or publications will have this type of content and others will not. This is good. On the live site, if the product or post lacks a specific content item, it just won't show. Those products and posts that have the content will dynamically display it as expected.

Note: If you see gray areas and none of the above applies, it is likely that you are experiencing a conflict with another plugin or have custom code added that is causing this problem. In this case, you will have console errors. You can follow these guidelines to resolve these types of circumstances.