Can』t Edit with Elementor

Table of Contents

The editor is a blank, white pageThe editor is a gray page that is endlessly loadingThe widget panel is grayed out or loading endlesslyEdit with Elementor takes you to live page instead of editorThe Edit with Elementor link disappeared

My page is blank (Elementor Not Working)

If you get a blank page (white screen of death) when you try to edit with Elementor, it might be due to a lack of memory or to another fatal error. In this case, check if you meet the system requirements for Elementor. If the problem is a memory issue, you can deactivate a few plugins and see if it solves the issue. If this was the root of the problem, contact your hosting company and ask them to increase your WP memory by using the following guide: https://wordpress.org/support/article/editing-wp-config-php/#increasing-memory-allocated-to-phpThe white screen of death can be due also to the way Elementor is loaded, so if the previous troubleshooting procedure did not help, try the following:Use the option switch front-end editor loader method. You can find it in the settings of Elementor in your WordPress Dashboard (see the screenshot below). Enable this option and check if it solved the issue. Go to Elementor > Settings > Advanced

Sometimes, if your URL in the back-end is different than the one in the front-end it can also lead to this problem. Make sure that the Site Address (URL) is the same as the WordPress Address (URL) to avoid loading issues: https://codex.wordpress.org/Giving_WordPress_Its_Own_Directory. These URLs can be checked in 「Settings > General「.On some servers, you will have to change the SubstituteMaxLineLength.This problem can also be due to a plugin conflict.In rare cases, the white screen of death can occur because of a program installed on your computer. To rule out this possibility, edit from another computer.If you are using both the free version of Elementor and Elementor Pro, make sure the versions are compatible. If you are using one that is older than another, conflicts can occur, because the newer version may be using code or functions that the older one is unaware of. Update both to the latest versions to troubleshoot this possibility.Any javascript code that includes the 「document.write」 method will delete the existing HTML and will create a blank page. Remove the .js code to solve this issueIf content has been copy / pasted into a text editor widget from another page, switch to the plaintext mode and remove any CSS classes and extra code that may have gotten added (see image below).

To confirm a fatal error, you can ask your hosting company to send you the PHP error logs of your server or check the email sent by WordPress to know what is the exact issue.

My page is gray – Endless loading

If you get a gray page when you try to edit with Elementor, it is probably due to a conflict with another plugin or with a script inserted within the theme. In this case, activate the safe mode. If it helped, deactivate each plugin one by one, besides Elementor and Elementor Pro to figure out which one is causing the issue. We strive to solve the incompatibility issues with other plugins as much as possible. If you have noticed an incompatibility with a plugin, please report this issue to us and to the support of the conflicting plugin.  Sometimes, you can get this loading page because of an add-on installed on your browser. In this case, you can switch to another browser (It has to be Safari, Chrome, Firefox, or Opera).If your theme uses a preloader, you may need to disable the preloader within the theme』s options or within Customizer. Learn more.The gray page can be also due to X frame restrictions and Cross-origin issues. You can see if it is the issue by checking the error messages of your browser console (to do it, click right on your mouse, select 「inspect」 and then 「console」. Error messages are written in red). In this case, you will have to change the X-Frame-Options from DENY to SAMEORIGIN. This has to be solved by your hosting company.If you use Cloudflare, you may need to either switch off Rocket Loader or add rules to Cloudflare. When Rocket Loader is activated it can take time to load the editor of Elementor and sometimes you will get stuck on the gray loading page.  Click here for a solution. The cache of Cloudflare can also prevent your browser from recognizing the new versions of Elementor and Elementor pro so make sure that you clear/deactivate your cache before updating the plugins. If you are using both the free version of Elementor and Elementor Pro, make sure the versions are compatible. If you are using one that is older than another, conflicts can occur, because the newer version may be using code or functions that the older one is unaware of. Update both to the latest versions to troubleshoot this possibility.

The widget panel is grayed out or loading endlessly

If the widget panel is grayed out completely and looks like the image below, you may have a plugin conflict. To find a plugin that is causing the layout issue, deactivate all of your plugins except Elementor and Elementor Pro, if applicable. If this solves the problem, reactivate each plugin one by one, until you spot the problematic plugin. If found, contact that plugin』s support for help, or use a different plugin. 

If this grayed out panel only happens with the Text Editor widget, please see the Additional Troubleshooting instructions on point 3 of this document. If the widget panel is endlessly loading and looks like the image below, please follow this guide to solve this.

Can』t access the edit page

If you can』t access the edit page and that you are sent to the live page when you click on 「edit with Elementor」 you are probably experiencing a plugin conflict or a memory issue. To debug this, check the troubleshooting procedures mentioned above.

The Edit with Elementor link has disappeared

If the Edit with Elementor link is not showing in the WordPress admin bar, please see this troubleshooting guide.

Form Error Messages – X Error

When completing a form on your website you may experience the following error message: 「x」 error.

This error can appear when some field(s) id(s) are empty

Please open the settings for your form, select each field, and then switch to the Advanced tab. If you notice that the ID option is blank, please try typing in a value (this must be a unique ID value that isn』t used anywhere else inside the form).  

Tip: Always consult the Form Submissions logs to understand any delivery issues.

How To Create A Blog Website

Hello World

WordPress, by default, is a blog upon installation. It allows you to start creating posts immediately. As a nod to internet history, a default post is created called Hello World. This post is displayed on the initial front page of your website as an Archive. The full Post can be read by clicking the title.

What Is A Post

A post is an article on your website written much like print media such as newspapers or magazines. These provide fresh content for the visitors to engage with and increase the return visits to your website. They also provide organic traffic to your website through search engines. Many visitors will find and enter your website through clicking a post link via search engines and social media rather than the home page.  

What Is An Archive

WordPress uses an Archive to display a list of posts created on the site by the author(s). These lists can be filtered by terms such as categories, tags, authors, and dates. An Archive is different from a Page or Post as it is querying the database to automatically display the content dynamically. You do not need to edit this page directly. The Archive Template can be styled into grids and other layouts by your theme.

What Is A Category

Categories are used to query posts of similar content in the archive template. They can be named, and added to your menu for easy navigation by your visitors. (Example: News, Sports, Lifestyle, Events, Weather)

What Is A Permalink

A permalink or 「slug」 is the permanent URL of your post on your website. These are set up in WordPress. Navigate to Dashboard > Settings > Permalinks. Permalinks can be set up in a variety of ways. A simple common option is to use the post name. When creating your posts, the post title will generate a permalink automatically. These can be edited from the settings. Permalinks should be all lowercase and hyphenated with no spaces. The permalink should not be changed once the post has been indexed on search engines unless you create a redirect to the new location.

 

Creating A Post

In order to create a new post in WordPress you can navigate to Dashboard > Posts > Add New, or by selecting the + New > Post from the top admin bar.

The Primary Post Parts

Post Title: Enter a title for the postPost Content: Create your post using the block editor or write in Google Docs and paste to the editor.Permalink: This will be generated automatically after publishing the post but can be manually edited here.Post Category: Select or create a category for your post. When creating categories, it is important to not give it the same name as a page on your website as this will cause confusion in the permalinksFeatured Image: Select a featured image for your post from the media library or by uploading from your computer. This image will display in the Archive and in social media sharingPublish Post: Publish your post or choose to save it as a draft and preview it.

Writing Posts

With WordPress

WordPress uses the Block Editor or 「Gutenberg」 as the primary way of creating content. You may add headings, paragraphs, lists, images, embedded media and much more by clicking on the black + icon in the content region, or by clicking the blue + button in the top corner to open a block side panel in which you can drag blocks to your content. You may also find it easier to write your long content in Google Docs, and then paste it into the content region.

Note: When pasting images from Google docs, it is important to upload your media to your website and re-link it. While you see all the images in your post, they are still located at the Google URL. If your document is removed from the Google location, the images on your website will become broken.

With Elementor

You may also create your post content with Elementor if you wish. You should still start on the WordPress side by giving your post a title, category, and featured image. Click the publish button (twice) and allow a few seconds to finish. This allows your post and permalink to be properly generated. Next, you may click the Edit with Elementor button and begin creating your content with Elementor widgets. 

Tip: If possible, it is recommended that you create several posts (4-6) before attempting to style your Archives page template. This will allow you to better see the desired end results. If you do not have content ready for your blog but wish to go ahead and style your blog templates, you may use 「Lorem Ipsum」 text and stock featured images to create some sample content.

Post Categories

You may create and assign categories directly from your post or by navigating to Dashboard > Posts > Categories. Here you can create parent and child categories for your blog. These will automatically query the posts assigned to them and display only these in the archive. There is no need to create a new archive for each category.

Creating An Archive Page

By default, WordPress displays your posts on the front page of your website as the Archive. However, most websites will feature another page created called Home. To assign a new page as an Archive to display your blog posts, you will need to first create one by navigating to Dashboard > Pages > Add New or by selecting the + New > Page from the top admin bar.

Create A New Page

Page Name: Give your blog a name (examples: Blog, News, Articles, Publications)Page Content: Do not add any content to the region as it will be populated dynamicallyPublish Page: Click and publish the blog via the button

Assign The Page As The Blog

To assign the role of Archive to this new page, you must navigate to Dashboard > Settings > Reading. From there, select your created page from the dropdown options.

Note: If you have not created a page designated as the Home page yet, you may also select the Sample Page to temporarily be displayed until one is created.  

View Your Blog Archive

You may now visit your page assigned as the Posts Page to see your new Blog Archive. This will show posts from all categories sorted by date last to first.

Creating A Category Menu

To assign categories to your menu, navigate to Dashboard > Appearance > Customize or via the top admin bar. Expand the menu options there. Add your created categories to the menu from the panel accordion. Publish your menu after adding all the desired categories to your menu.

Viewing Your Categories

You may now visit your website. You can navigate to each category by clicking the menu item. The posts will be automatically filtered to show posts in that category.

Take A Pause

Congratulations, you have successfully created a fully functional blog foundation. The next steps will be to style your archive and single post templates.

Styling The Blog

WordPress Themes

The layout of your Archive and Single Post Template is styled by your theme. Each WordPress theme needs to contain an archive.php and single.php, or singular.php. The Customizer of each theme generally provides settings to display your archive in a single or multi-column grid as well as other styling options. It also allows you to style the single post style. There are hundreds of themes located in the WordPress theme repository. Elementor is compatible with most modern themes but some work better than others. Please visit the Elementor Hub Community to search and get feedback on the other members』 favorites.

Hello Theme

Elementor』s flagship theme named Hello provides a barebones customizer and minimal blog styling as it is intended to be used in combination with the Theme Builder of Elementor Pro. 

Using The Theme Builder (Pro) 

The Theme Builder allows you to fully customize your Archive and Single Post Templates. You may also create custom templates for each category if you wish to change colors or layouts for each one. The complete documentation for the Theme Builder can be found here.

Creating An Archive Template

The Theme Builder allows you to create a custom layout for displaying all the posts queried. You may quickly get started by clicking the plus icon on the Archive Site Part. From there, select one of the premade Elementor templates. Don』t worry, you may go back and change the layouts at any time later on. When saving your template, you will be prompted to set the conditions for your archive, if you are unsure of what to select here choose 「All Archives.」

Creating A Single Post Template

You also need to create a Single Post Template to display your content. From the Theme Builder, create a new Single Post Template by clicking the plus icon. Select one of the premade Elementor Templates that give you the best start. The template may be edited at any time later on. Upon publishing, set the display conditions to 「All Posts.」 

Quick Links:

https://elementor.com/help/what-is-the-elementor-theme-builder/https://elementor.com/help/archive-site-part/https://elementor.com/help/single-post-site-part/

Take A Look

Your blog is now all set up. You may further customize the layouts of your Archive and Single Post templates to meet your needs.

Go Back Home

Now that you have created all the needed site parts, and basic content for your blog website, it is now time to create your Home page. You may use the Posts widget to create custom layouts by using the query function. You can query a specific category and choose the number of posts to display.  By using the offset function from the exclude options, you can avoid duplicated content as shown in the example below.

Enable SVG Support in Elementor

Widget Icon Controls now allow you to choose from an icon in the Icon Library or to upload your own SVG icon. We recommend uploading SVGs without any inline styling, in order to take advantage of the full capabilities of Elementor』s styling controls.

What Is SVG?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

SVG files work in a similar manner as icons. You can scale them up or down without any loss of resolution or blurriness. They are extremely lightweight and keep your pages lean.

How To Use

Click on the Upload SVG button that appears on any widget with icon controls top open the WordPress Media Library manager. Upload the SVG you wish to use.

Important Security Notice!

Uploading SVG files from unknown sources may pose a potential security threat. We recommend you upload files only from a trusted source and enable this feature after you understand and accept the security risks involved.

Elementor』s SVG module will do it』s best to sanitize the files uploaded to your site, but it is best to upload SVG files only from known and trusted sources.

Once you upload an SVG file, Elementor sanitizes the file, removes any possible malicious code, and leaves only the skeleton of the required image. After the upload is done, you are able to preview the image and filter it using the native WordPress media library, only showing SVG files. The SVG is inserted into the page as inline code.

One-Time Enable SVG Process

The first time you attempt to upload an SVG icon, you will be presented with a warning message to alert you that uploading any files, including SVG files, may present a potential security risk.  If you understand the risks involved and agree to continue, click the Enable button.

Once the Enable button is clicked, you will be taken to the Elementor > Settings > Advanced page. 

Enable SVG Uploads: Select Enable from the dropdownClick Save Changes button.

Once you』ve enabled SVG Uploads, return to your page to continue editing.

Overide Inline Styling

Ideally, you should export SVG files from applications such as Illustrator without any inline styles, to allow Elementor to style the icon. 

However, if the SVG you』ve uploaded has width or height inline styling on it, you can override that by adding this CSS in the Advanced tab of any widget using the SVG icon:

selector svg { width: 100% !important; height: 100% !important; }

This will allow Elementor to control the size of the icon.

Note: When creating or editing SVG』s for uploading, it is important that the fill/stroke color to be set to #000000 in order for the color picker controls to function in the Editor.

Form Error Messages – This Error Is Not Visible For Site Visitors

When completing a form on your website you may experience the following error message(s): 「This Error Is Not Visible For Site Visitors.」 

This error generally pop-ups when there is an issue with the field mapping between Elementor and MailChimp:

Please see the following documentation for more information.

Tip: Always consult the Form Submissions logs to understand any delivery issues.

Customizing Form Emails

When you create forms in Elementor it uses shortcodes in the fields to generate the outgoing email it sends to you or your client. By default, the email generated will use the shortcode [all-fields]. While this captures all the field data, the email that gets sent is very plain and may be difficult to read. By using the individual field shortcodes and a small bit of HTML, you can generate much more human readable form submissions.  

Create Your Form

Using the Elementor Form widget, create your form. For more information about forms, click here. 

Enter a label and placeholder text for your fieldToggle the required option (if needed)Set the width of the field (if needed)In the Advanced tab, enter a new ID using only characters and underscores (no spaces)In the shortcode field, copy the generated shortcode (example: [field id=」first_name」])Paste these shortcodes to an application such as notepad, Google docs, or any text editor for use in the next steps.  

Creating An HTML Email Template

Next, you will use these shortcodes along with some basic HTML to generate the email that you wish to receive.  In the example below, we are generating a new wedding planner inquiry email using the kit from the library.

The HTML Part

The following is an example template to use for this form. You will only need to use basic HTML tags to get started in this lesson but can build on this knowledge to create highly customized submissions. If you have no knowledge of HTML or access to any editor applications such as Dreamweaver, you may use the Elementor Text Editor widget to write the email template in the Visual mode, then switch to the Text mode and copy the HTML.

Example HTML

You have a new wedding to plan.

[field id=」first_name」] would like you to contact them about planning their wedding on [field id=」eventdate」] at [field id=」location」].

The couples vision and plans so far are as follows:

[field id=」message」]

Contact Information

• First Name: [field id=」name」]
• Last Name: [field id=」last_name」]
• Email Address: [field id=」email」]
• Phone Number: [field id=」phone」]

Good luck at the event!

Adding The Template To The Form

We can now add this HTML to our form using the Email options in the controls. Paste the HTML into the message field replacing the [all-fields] default. Make sure that the send as HTML option is enabled near the bottom of the controls.

Finishing Up

You may now publish or update your form. Send a test submission to yourself to see how the generated email appears. Use additional HTML and inline CSS to further style the email as needed.

Custom Add To Cart (Pro)

Add an Add to Cart button to a specific product anywhere on your site by dragging the Custom Add to Cart widget wherever you need it.

Content

Product

Product: Select the product to be added to the cartShow Quantity: Set to Yes to allow the user to change the quantityQuantity: If Show Quantity is set to No, this option becomes available so that you can predetermine the number of items to add to the cart

Button

Type: Select the type of button to use, choosing from Default, Info, Success, Warning, and DangerText: Enter the text to be displayed on the buttonAlignment: Align the [widget] to the left, right, center, or justifiedSize: Select the preset button sizes, from Extra Small to Extra LargeIcon: Select a Font Awesome icon to display on the buttonIcon Position: Choose to display the Icon Before or After the button textIcon Spacing: Set the amount of space between the Icon and the button textButton ID: (Optional) Assign a unique button ID to use for situations such as Google Analytic』s events

Style

Button

Typography: Set the typography options for the button text

Normal | Hover

The following options can be set independently for both the normal and hover states.

Text Color: Choose the color of the button textBackground Color: Choose the background color of the buttonHover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Control border roundness of the buttonBox Shadow: Adjust box shadow optionsPadding: Set the padding within the button

Note: 「Enable AJAX add to basket buttons on archives」 must enabled in WooCommerce Settings > Products in order for this to properly function.

WooCommerce Site Settings

Save time by assigning the WooCommerce endpoints directly from the Elementor Site Settings panel without leaving your page. 

Rather than returning to the dashboard and navigating to the Woocommerce settings pages, you may assign the default pages for your web store from the site settings panel.

Click the hamburger icon in the Editor panel top cornerClick on the Site Settings optionClick on the WooCommerce Pages settingsAssign your pages by clicking dropdown and entering a few letters and selecting the page from the search resultsClick the blue Update button to save your changes

License

A license is provided once you purchase Elementor Pro. The License Settings shows the current license status and enables you to manage the license activation process for your website.

Activate License

Connect & Activate: Click this button to connect to your Elementor account, and activate with the click of the Connect button.

Status Screen

Once your license is activated, the Status screen allows you to switch to a different license or deactivate the current license.

Click the My Account button to go to your account on elementor.comClick the Switch Account button to use a different user』s license for this websiteClick the Disconnect button to deactivate the license on this website

If you are still seeing Go Pro messages after purchasing Elementor Pro:

Please make sure you are using the latest versions of both Elementor and Elementor Pro. Remember that both the free version and the Pro version must be installed and activated. Go to Dashboard > Updates and click the Check Again button to receive notification of any new updates.Confirm that you have activated your license key under Elementor > License in your WordPress dashboard. You can also login to your account at my.elementor.com and click the View Websites button. From there, you can enter a new URL if yours is not listed.Check for a plugin conflict, as this is often the problem. Temporarily deactivate all of your plugins except Elementor and Elementor Pro. If the Go Pro message disappears, then you know one of the disabled plugins is causing the problem. Reactivate each plugin, one at a time, until the problem reappears. The last plugin reactivated is the cause of the problem. Contact the 3rd party plugin』s developers to get help with resolving the conflict, or use a different plugin with similar functionality.

Facebook Embed Widget (Pro)

The Facebook Embed widget lets you easily embed Facebook posts, videos or comments on your website』s page.

The following options are available depending upon which type of embed is chosen: Post, Video, or Comment.

Post Embed

URL: Choose which URL will be embedded in the pageFull post: Switch ON to show full text of the post, or OFF to show the shorter post text

Video Embed

URL: Choose which URL will be embedded in the pageFull Post: Switch ON to show full text of the post, or OFF to show the shorter post textAllow Full Screen: Switch ON to allow video in Full ScreenAutoplay: Switch ON to automatically play the videoCaptions: Switch ON to show the Captions of the video if available (shown only on desktop devices)

Comment Embed

URL: Choose which URL will be embedded in the pageParent comment: Switch ON to include the parent comment, if the comment being embedded is a reply

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Facebook Embed widget.

Note: If you are developing for European based sites, users must accept cookies, and be currently logged in to Facebook before the like, share, or comment buttons are displayed on the front end.

Note: This widget will not appear in the Mozilla browser if 「Strict Mode」 is enabled.