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.
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
The Nav Menu widget lets you use menus that you』ve created in WordPress and design them in whatever way you want.
Check out this video explaining the various features of this widget.
Content
Layout
Menu: Select a menu you』ve previously set up via Appearance > MenusLayout: Choose a Horizontal, Vertical, or Dropdown layoutAlign: Set the menu item alignment, either Left, Center, Right, or JustifiedPointer: Select a pointer, either None, Underline, Double Line, Framed, Background, or TextAnimation: Choose the pointer animation, either Fade, Slide, Grow, Drop In, Drop Out, or NoneSubmenu Indicator: Choose the icon that indicates an item has submenu items, either None, Classic, Chevron, Angle, or Plus
Mobile Dropdown
Breakpoint: Select at which point the mobile dropdown menu kicks in, either on Mobile, Tablet or None.Full Width: Select whether the mobile dropdown spans full width of the device, either Yes or NoAlign: Choose whether the mobile menu items are displayed on the left, or in the center, by selecting either Aside or CenterToggle Button: Show the Hamburger icon as the toggle button or notToggle Align: Show the toggle button on the Left, Center, or Right of the screen
Style
Main Menu
Typography: Set the typography options for the menu item text.
The following items can be set independently for all three states: Normal, Hover, and Active.
Text Color: Choose the color of the menu item textPointer Color: Choose the color of the pointer』s hover or active states. The normal state uses the color set as the Accent Color in the Default Colors settings.
Note that if a Hover color is set but no Active color is set, the Active color will use the Hover color by default.
Divider
Divider: Toggle the option to enable or disable the divider between menu itemsStyle: From the dropdown menu choose select between solid, double, dotted, dashed, or groovedWidth: Use the slider or enter the value in the field in PXHeight: Use the slider or enter the value in the field in PX or %Color: From the color picker, choose the color for your divider.
Padding and Spacing
Pointer Width: Set the width of the pointerHorizontal Padding: Use the slider or enter the value in the field in PX to set the horizontal padding around the text of the menu itemsVertical Padding: Use the slider or enter the value in the field in PX to set the vertical padding around the text of the menu itemsSpace Between: Use the slider or enter the value in the field in PX to set the space between each menu items
Dropdown
On desktop, this will affect the submenu. On mobile this will affect the entire menu.
The following items can be set independently for all three states: Normal, Hover, and Active.
Text Color: Choose the color of the menu item textBackground Color: Choose the background color of the menu itemsTypography: Set the typography options for the menu itemsBorder Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or GrooveWidth: Set the width of the borderColor: Choose the color of the borderBorder Radius: Set the border radius to control corner roundnessBox Shadow: Create a box shadow around the dropdown menuHorizontal Padding: Set the horizontal padding around the text of the menu itemsVertical Padding: Set the vertical padding around the text of the menu items
Divider
Border Type: Select a border type for the divider, choosing either None, Solid, Double, Dotted, Dashed, or GrooveColor: If divider border is chosen, choose the color of the divider borderBorder Width: If divider border is chosen, set the width of the divider borderDistance: Set the amount of space between the toggle and the dropdown menu
Tip: Go to Elementor > Settings > Advanced and make sure Load Font Awesome 4 Support is set to Yes so that your submenu indicators will display properly.
Toggle Button
The following items can be set independently for both the normal and hover states.
Color: Choose the color of the toggle button iconBackground Color: Choose the background color of the toggle buttonSize: Set the size of the toggle buttonBorder Width: Set the width of the border around the toggle buttonBorder Radius: Set the border radius of the toggle button
Note: The toggle button refers to the hamburger menu icon.
Accessibility Attributes
The Nav Menu Widget has the following accessibility attributes:
tabindexaria-expandedaria-hiddenrole=」navigation」
Advanced
Set the Advanced options that are applicable to this widget
Read the full release post about the Menu widgetRead How to Create and Design a Custom Navigation Menu
The Price List widget lets you create fully styled catalogs and menus that include pricing.
Content
List Items
Shows a list of all the items in the widget. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.
Tip: Quickly duplicate or delete items by clicking an item』s Duplicate or Delete icon
By clicking on each item you can customize their content and settings, which are:
Price: Add the price of the itemTitle & Description: Set the title and description of the itemImage: Choose an image from the media libraryLink: Enter the URL for the item』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window
Style
List Style
Title
Color: Choose a color for the title and priceTypography: Set the typography options for the title and price
Price
Color: Choose a color for the title and priceTypography: Set the typography options for the title and price
Separator
Style: Choose the style of the separator between the title and the price, selecting from solid, dotted, dashed, double or noneWeight: Set the weight of the separatorColor: Choose a color for the separatorSpacing: Increase or decrease the space to the left and right of the separator
Image Style
Image Size: Choose the size of the image, from thumbnail to full, or set a custom sizeBorder Radius: Set the border radius of the image, to control corner roundnessSpacing: Set the spacing between the image and the content
Item Style
Rows Gap: Set the spacing between each itemVertical Align: Choose either top, bottom or center alignment for the content, in relation to the image
Advanced
Set the Advanced options that are applicable to this widget
Read the full release post about the Price List widget
Elementor is a visual website builder plugin for WordPress enabling the creation of web pages in a live, visual way.
This step-by-step guide walks you through how to create a website using Elementor.
Requirements Checklist
This is a quick checklist of requirements needed. For more details you may click here.
I have WP version 5.2 or greater
I have PHP version 7.0 or greater
I have MySQL version 5.6 or greater OR MariaDB version 10.0 or greater
I have WP Memory limit of 128 MB or greater (256 MB or higher is preferred)
I have the correct folder permissions granted on my server
I have new versions of Chrome, Firefox, Safari, or Microsoft Edge version 79 or greater
I have access to a desktop or laptop computer
Installation Checklist (Core)
This checklist walks you through the entire process of installing and activating Elementor on your WordPress site. For additional information click here.
From the WordPress Dashboard, click Plugins > Add New.In the Search field, enter Elementor and choose Elementor website builder to install.If you have downloaded Elementor as a zip file, click the upload plugin button and use the file selector to install as a WP pluginAfter installation, click Activate.
Skip to Connect To Library if not installing Elementor Pro at this time
Installation Checklist (Pro)
This checklist walks you through the entire process of installing and activating Elementor Pro on your WordPress site. For additional information click here.
After purchasing Elementor Pro, go to my.elementor.comLogin with the details you received in the email after purchaseAfter the login, you will reach the 『My Account『 page. Click on the Download Plugin button in the upper right of My Account section and download the .zip file to your desktopReturn to your site』s WordPress dashboard, and click on Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activateOn top of your site』s dashboard, you should get a message telling you to activate your license key.
Activation Checklist (Pro)
In order to activate all the Pro features, you need to have an active subscription and be able to log in to your account. It is no longer necessary to use a licence key and the input field was removed from the UI. If you require manual activation by key, contact support. Learn more here.
Go to Elementor > License. Click Connect & ActivateYou』ll be redirected to log in to your account. Click Connect. After you log in, your license will be activated automatically via the on screen windowIf the license key was installed correctly, the message on the top of your dashboard should disappear.
Connect To The Library
The first time you insert a template, you will be prompted to connect your free Elementor account to access the Template Library. If you don』t yet have an account, you can register for a free account during this process. For more information about this, and why it is required, click here.
Click the connect to library buttonYou may be redirected to log in to your account. After you log in, click connect. Your connection will be granted automatically via the on screen window and you will return to the previous libraryOnce the connection has been made, you will be able to use Elementor templates, kits, and landing pages.
Using Elementor
If you are a new user of Elementor, these steps will help you understand the essentials of successful page-building.
Create A New Page In WordPress
From the WordPress dashboard, click Pages > Add NewName your pageClick the Publish button (Visibility options may be set if page is to remain private)Click Edit with Elementor to enter the Elementor Website Builder
Edit Your First Page
Elementor uses three main building blocks: Sections, Columns, and Widgets. Sections are the largest building blocks, and inside them are groups of Columns. Columns sit inside of Sections and are used to house the Widgets. Widgets are placed inside of Columns. You control the Section, Column, and Widgets with their handle. Click the Preferences tab and slide the switch to Yes to show Editing Handles when hovering over the element』s edit button or No to hide the handles on hover.
Editing
To edit the Section, Column, or Widget, Right Click their handle. Learn more about Right Click
Sections
Click the + icon to create a Section, or click the folder icon to use a pre-designed Page or Block from our librarySet your Column structure Right click to Edit, Duplicate, Copy, Delete etc. Use the Section handle to: add a section, drag a section, or delete.
Columns
Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.To add more Columns Right Click > Add New Column
Learn more about using columns here.
Widgets
Insert Widgets inside your ColumnsA Widget』s width is automatically set by the Column width. For additional width control, you may use the custom width options by navigating to Advanced tab > Positioning
Copy or Delete All Content
You may Copy or Delete all content on your page by right clicking on the empty section near the add section and templates icons. You can also paste items in another page on the same website.
Adding Templates
Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.
From the editing screen, Click the folder iconWhen the library of templates pops up, click the magnifying glass icon to preview a template.Click INSERT to select the template of your choice.You may also give your favorite templates a heart and save them to My Favorites.Have a template you downloaded elsewhere that you want to use? Just click the up arrow icon in the top right corner to upload its .json or .zip file.
Mobile Responsive Editing
Many editable features have a Mobile, Tablet, and Desktop settings. Most common uses include: Text size, Margin and Padding of elements etc.
Look for the Viewport Icon next to the individual element you wish to control. Click the specific device icon for which you want to edit its settings.
Controlling Responsive Background Images and Borders
Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.
Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.
Visibility
You can choose to Show / Hide a Section according to the device.
Go to Section Setting > Advanced > ResponsiveSet your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.
When hiding an element, and switching to the view it』s hidden on, 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.
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.
Change Mobile & Tablet Breakpoints
You can set the mobile and tablet breakpoint values.
From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Layout > Breakpoints, and set the breakpoint value for mobile and tabletSave your changesGo to Elementor > Tools > General Tab > Regenerate CSS, click Regenerate Files
Columns Ordering
This feature reverses the ordering of columns.
To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.
Device Preview
Switch between device views by clicking on the responsive editing icon on the bottom of the panel. The device previews will be located at the top of the editor.
Preview & Publish your page
After you』re done designing your page, you can Preview it and Publish it.
Go to the bottom panel:
To preview click the preview icon. If you are satisfied with the result, go ahead and click the publish button. Click 『Have a Look『 to view the published page
Note: The Preview link is different than the actual page link
Save as Draft
In Elementor you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.
Click the arrow next to Update / PublishChoose Save Draft
We have a more holistic step-by-step guide showing the building process on our blog
Tip: By following these steps you』ll soon become a web design ninja.
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.
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.
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.
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.
Important: Some of the information in this document has been altered by the recent addition of Custom Breakpoints. Please also refer to the documentation located here.
How To Adjust Settings For Mobile, Tablet, and Desktop
Many editable features have a Mobile, Tablet, and Desktop settings. Most common uses include: Text size, Margin and Padding of elements etc.
Look for the Viewport Icon next to the individual element you wish to control. Click the specific device icon for which you want to edit its settings.
Controlling Responsive Background Images and Borders
Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.
Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.
Visibility
You can choose to Show / Hide a Section according to the device.
Go to Section Setting > Advanced > ResponsiveSet your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.
When hiding an element, and switching to the view it』s hidden on, 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.
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.
Change Mobile & Tablet Breakpoints
You can set the mobile and tablet breakpoint values.
From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Layout > Breakpoints, and set the breakpoint value for mobile and tabletSave your changesGo to > Tools > General Tab > Regenerate CSS, click Regenerate Files
Columns Ordering
This feature reverses the ordering of columns.
To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.
Device Preview
Switch between device views by clicking on the responsive editing icon on the bottom of the panel. The device previews will be located at the top of the editor.
Help! I Changed Something While In Mobile Preview, And It Changed On Desktop Too! Why?
You can』t delete an element (widget, column, or section) while previewing one mode (mobile, for example), and expect it to only be deleted from that type of device. Deleting elements will delete them across all devices. You can, however, use the element』s Responsive Visibility feature by going to the element』s Advanced > Responsive tab and enabling any of its visibility options (Hide on Desktop, Hide on Tablet, or Hide on Mobile). While the element won』t be deleted on those devices, it will be hidden.You can』t move elements around while previewing one mode, and expect them to only be moved for that type of device. Moving elements around in any preview mode will move them across all devices. One exception to this is the Section > Advanced > Responsive > Reverse Columns feature, which does move columns to their reverse position.If an element doesn』t have a Viewport Icon next to it, changing that element in one preview mode will change it across all devices.
