Author 诗语

Why Is My Widget Grayed Out?

Table of Contents

Why Is My Widget Element Grayed Out In The Elementor Editor?The Element Has Been Hidden On Certain DevicesHow to edit a hidden / muted elementHow to check the visibility of the elementThe Element Is Dynamic And Has No Content To Show

Why Is My Widget Element Grayed Out In The Elementor Editor?

There are two common reasons for seeing an element 「grayed out」 in the editor, when you are expecting to see content there instead.

The Element Has Been Hidden On Certain Devices

If the element』s Visibility has been hidden (on desktop, tablet, and/or mobile), you will see that this element is 「muted」. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed.

How to edit a hidden / muted element

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

How to check the visibility of the element

Go to Section > Advanced > ResponsiveSet your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

The Element Is Dynamic And Has No Content To Show

If you are pulling content in dynamically, either from a custom field or from WooCommerce Products, or even displaying Post or Page content and meta data within Archive or Single Templates, you may occasionally encounter a grayed-out 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 a few examples:

You are setting up your WooCommerce Single Product template and one of the product elements, such as the short description, is grayed out. In this example, you must edit your products in the WooCommerce Products editor to add a short description to each product. Once the products have short descriptions entered, the Single Product template will display the short description and will no longer be grayed-out. If you only have this content in some of the products, you can verify it is working by previewing one of those products in the template editor.You are setting up your Single Post template and one of the post elements, such as the Featured Image, is grayed out. In this example, you must edit your posts in the WordPress editor and add the Featured Image to each of them. Once the posts have Featured Images attached to them, the Single Post template will display the Featured Image and will no longer be grayed out. If you only have featured images for some of your posts, you can verify this is working by previewing one of those posts in the template editor.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 only a few examples. You may encounter this in other ways, but in all cases, you should assume that if you are trying to display content dynamically, and you are encountering the grayed-out situation within the editor, you should assume that there is no content available to be displayed. Go add content in the relevant area of your site, and the grayed-out situation within the editor will resolve itself.

Of course, site visitors will never see anything 「grayed out」. Naturally, in many cases, some products or posts will have this type of content and some will not. This is fine. On the live site, if the product or post is lacking a specific content element, it will simply not be shown. Those products and posts that do have the content will display it dynamically as intended.

Note: If you are seeing gray areas and none of the above applies, then you are likely experiencing a conflict with another plugin or you have custom code that has been added which is causing this issue. In this case, you will have errors in the console. You can follow these guidelines to troubleshoot such a circumstance.

HTML Widget

Inside the HTML Widget you can embed HTML, CSS, Shortcodes, and also include JS scripts.

Drag The Widget

From the widget library choose the Elementor HTML widget with the icon. Drag it to the desired location on your page editor indicated by the blue line.

Add your Code

Enter your HTML, Script, or Shortcodes into the the text area. Elementor will attempt to notify you of any errors in your code. The panel window may be resized for larger amounts of code to be viewed.

Advanced

Set the Advanced options that are applicable to this widget

How to Fix the 『Preview Could Not Be Loaded』 Error

Are you seeing an error when you try to use Elementor that states: 『Preview could not be loaded』? This is one of the most common errors on Elementor, and usually, it is quite easy to fix.

This happens when the preview of the page is not available.

The error will try to give more information if possible. For example in the image below, it says 「Preview Debug」. The 「preview debug」 option enables the user to verify that there is no redirect on the page.

Elementor can detect in some cases the exact issue:

No Theme: Some of your theme files are missing.Corrupted .htaccess: 『Your site』s .htaccess file appears to be missing.』HTTP Errors: format is content depends on the code.

When it is not possible to give any other information, use the steps below in this article, to see how you can quickly fix this issue and get back to designing your website with Elementor. 

Note: If this message is received on a WooCommerce template or an archive page, such as the Blog page, this is normal and in this case, please use the WooCommerce Builder or the Theme Builder instead of trying to directly edit these pages.

If you receive the error message 「the preview could not be loaded」, try the following:

Enable Safe Mode. Follow the procedures outlined in What is Safe Mode?Make sure the theme files exist. If no theme is available, go ahead and install or re-install a theme. Check the structure of your permalinks. Try to save your permalinks one more time. Also, try to change the permalink structure to 「Plain」. Some servers do not allow to write to the .htaccess file and as a matter of fact, you cannot always modify your permalink structure and edit with Elementor.Edit in incognito mode with your browser. This rules out an issue with an add-on or with the browser cache. In Chrome, at the top right, click 『More』 and then 『New Incognito Window』. A new window appears. In the top corner, check for the Incognito icon indicating you are in fact in incognito mode. Now, navigate back to Elementor and see if the error persists. You should also make sure no add-ons are working in incognito mode and possibly try a different browser altogether.Solve Rocket Loader issue. Elementor and Cloudflare integrate smoothly with each other. Though there is an issue with Rocket Loader. Click for the solutionVerify that you do not have a redirect on the page. You can see if it is the case by hitting the 「debug preview」 button.If the index.php file has been renamed or if its contents includes anything else other than the WordPress requirement, this will also result in this error.Solve hosting issues. Although this situation is very rare, please verify with your host provider if your WordPress install includes the .htaccess file. If your .htaccess file is missing, check out this link to regenerate. Also, check with your hosting company if your server erases the PHP $_GET variable.HTTP Errors. Possible solutions for each type of HTTP Error listed below:

If you are receiving 403 errors, check the following:

You may have a corrupt .htaccess file. Download your current .htaccess file to save as a backup. Then delete it from your server. Visit your site and a new default .htaccess file will automatically be generated. If this solves your problem, look at the .htaccess file you downloaded to determine if there is any code within it that needs to be corrected.Your file permissions may not be correct. Ask your host to check that your WordPress directories and files have the correct permissions.,This can be due to a security plugin. To sort this out, activate the learning mode of the plugin or contact their support.This issue can also be due to the firewall of your server, such as mod_security, so this has to be checked with your hosting company.Another plugin may be causing a conflict. Deactivate all plugins except Elementor. If the problem clears up, you know that another plugin is the problem. Reactivate each plugin, one at a time, testing your site with each reactivation. Keep testing until you find the plugin that is causing the failure. Get in touch with that plugin』s developers to request assistance or use another plugin with similar functionality.

If you are receiving 401 errors, you are attempting to access a page that requires authentication. If the page shouldn』t be asking for authentication, contact your host for help in removing the authentication requirement or check any security plugins you may be using for options to turn this off.

If you are receiving 500 errors, click here for the debug procedure.

If you are not able to solve the issue following any of these steps, we suggest you raise the issue in the  Elementor Community. If you have our Pro version, you can send us your website login details and our support team will try to pinpoint the cause and fix it.

Create a custom 404 page Using Elementor』s Theme Builder

Creating a 404 Page Template using the power of Dynamic Content, can help you keep your site』s visitors happy even when they』re lost. You can display your recent posts, a search bar or anything you want.

Go to Templates > Theme Builder > Single > Add NewSelect Single from the Type of Template dropdown, select 404 from the Post Type dropdown, name your template and click Create TemplateDesign your own 404 Page Template or choose a pre-designed templateAfter you』ve finished designing your 404 Page Template, click PublishAdd Conditions to your 404 Page

Note: When naming your template, please do not begin the Template name with 「404「. If the template name begins with 404, the resulting permalink will cause a redirect to the home page, when any non-existing page URL is visited. This happens due to the template library』s permalink. Since the library is private, if you hit any URL of the library, this will occur. If a user creates a 404 single template with the name」404 single」, for example, the permalink becomes http://mysiteurl.com/?elementor_library=404-single . Then, if a page like mysiteurl.com/404 is visited,the system will think it』s looking for that template file and redirect you to homepage. Just avoid naming the template with 「404」 in the beginning of the name, and this problem will not happen.

Import Kit

By using the Imports Kit function, you may import your packaged Elementor Export Kit from another website.

To use this feature, activate the Import / Export experiment via Elementor > Settings > Experiments. Once you activate the new Import/Export functionality experiment, you will be able to find the options located in Elementor > Tools

Steps

To Import your Export Kit from another website:

From Elementor > Tools > Import / Export click the Start Import buttonThe Import Kits page will open Drag your Export Kit .ZIP file to the area provided, or click to select the .ZIP file from your local computerYou will now be asked to choose the content you wish to be imported. By default, all items are checked.The importer will notify you of any templates that are currently in use on your existing website and give you the option to overwrite each.Templates left unchecked will still be imported, however, the display conditions will not be set.  Choose the most appropriate options for you at this time.The process will start immediately. Depending on your file size, the process will take several seconds to a couple of minutes to complete. Once completed, you will be prompted to return to your dashboard.

Important: We recommend that you backup your site before importing a kit file.

Tip: If you develop your website locally using Local by Flywheel, Xampp, or other server solutions, you must allow inbound traffic to your web server. The importer must be able to reach the source files in order to grab images and other dependencies.This is done by enabling the Live Link (Local by Flywheel), or by Port Forwarding on others. Refer to your server documentation. If unable to do so, you will need to manually replace the missing dependencies on the new website.

Dynamic WooCommerce Tags

Dynamic WooCommerce Tags refer to content that can be drawn from the product dynamically from the back-end of the product it』s from. Changes made to the product』s values on the WooCommerce side will reflect everywhere the tags are present. 

Product dynamic tags range from price, rating, and sale status, to description, SKU, stock, terms, title, and image. You have the ability to include these tags in most Elementor widgets from the Dynamic Content Settings. Common use examples could be Heading, Text Editor, Call to Action, Flip Box, or Price List widgets as shown here. 

Getting Started

In your Elementor panel, select a widget that uses dynamic values. For this document a Price List widget is demonstrated.

Steps For Use

In the widget fields, click the stack icon to reveal the Dynamic TagsScroll to the WooCommerce optionsSelect a dynamic value that you wish to display (example: Product Title)Click the value a second time to reveal the Settings OptionsIn the input field select the product that you would like to reference by entering a few letters of the products titleIn the Advanced Settings you may enter a before and after value, as well as a fallback valueRepeat for the remaining widget fields.

Links: For the link URL of a product, simply type the first few letters of your product and it will appear in the selector choices rather than using the dynamic stack icon.

Completed Example

Notes And Information

Note: If dynamic values such as product images are not displayed in the editor after being selected, save your changes and refresh the editor window.

How to Fix Elementor Full Width Not Working

When editing a page with Elementor, you may experience the editor not extending to the full width of your screen. This is most likely caused to the page inheriting the default settings of your theme or Single Page template.

How To Fix Your Layout

To override the theme layout and extend your content to full width, click the gear icon in the lower corner, and enter the Page Settings. From the Page Layout options, use the dropdown selector and select Elementor Full Width. This will retain the Header and Footer of your theme.

Note: If you wish to exclude the Headers and Footer you may select the Elementor Canvas option.

I Receive An Error When I Try To Update Elementor Pro

Table Of Contents

I Receive This Error – 「Update: Could Not Copy File」I Receive This Error – 「Update Failed: Download failed. Unauthorized」Please deactivate and reactivate the license following these steps:Once you have done the steps above, please follow these steps:Does the issue persist?

This guide lists some of the specific errors you may receive when trying to update the Elementor plugin.

I Receive This Error – 「Update: Could Not Copy File」

This occurs generally when you work with Elementor Pro from a localhost and/or with any Windows Server. 

You can install a  plugin to solve this issue (which is an incompatibility issue between Easy Digital Downloads, Windows and WordPress).If this did not help, ask your hosting company to verify your permission settings. If nothing helped, you can download Elementor Pro via your Elementor Account in https://my.elementor.com. You will find the file in  Purchases > View Details and Downloads. Once the file downloaded, go to your WP Dashboard, delete Elementor Pro, then in Plugins, click on 「Add New」 and upload the file of the new version downloaded from elementor.com.

I Receive This Error – 「Update Failed: Download failed. Unauthorized」

In order to be able to update your plugin, you need to have an active license.

Please deactivate and reactivate the license following these steps:

First, log in at https://my.elementor.com/Go to My Account > View websitesNext to the website in question, click on Deactivate Site

Once you have done the steps above, please follow these steps:

Go to your website』s WordPress dashboard > Elementor > License Click on the Disconnect button (if there is one) and afterward, click on the Connect & Activate button and attempt to update the plugin again.

Does the issue persist?

If the issue persists, then this may be related to a permissions error. In this case, delete the current plugin and upload the newest version of the plugin via FTP, as explained here, in the section labeled, 「I receive an error message when I try to update Elementor Pro」.

More information about update issues may be found on our Update Issues guide.

What Is Import/Export Kit

Elementor always striving to help make your web creation process seamless and efficient. When creating and maintaining websites, it is important to use a development or staging environment, however, moving the Site Settings and Kits to the live environment often was cumbersome or required third party plugins.

With Elementor』s Import/Export Kit feature, located in our Experiments section, we hope to save you time so you can focus on growing your business.

The Export Kit function will allow you to export your entire Elementor content or selected content from one website and import it into another using the Import Kit function. Imported pages and templates will retain display conditions and site settings including colors, typography, and other globals.

Note: To use this feature, activate the Import / Export Kit experiment via Elementor > Settings > Experiments. Once you activate the new Import/Export Kit functionality experiment, you will be able to find the options located in Elementor > Tools > Import Export Kit

Important: In order for this feature to work, please contact your Host to make sure ZipArchive is enabled. You may verify this by navigating to Elementor > System Info and locating the following information.

How To Use The Color Sampler

By activating the Color Sampler feature located in the Elementor > Settings > Experiments, you can create a color pallet based on your page content. The Color Sampler can extract color palettes from images and other elements. Instead of finding the most representative colors, it aims to find good colors that work together in a color palette.

Using the Color Sampler

From the Style Tab, select a widget or sections color pickerClick the Color SamplerHover over another element on your page (images work best at this time)Left click to select the target areaThe Color Sampler will generate five complimentary colors based on the selected targetChoose the color best suited for your design

Tip: You may save and name each of these five colors to be reused in your website』s Site Settings.