This is an overview of the Elementor Menu and Templates Menu
Elementor Menu
SettingsCustom FontsCustom IconsCustom CodeRole ManagerToolsSystem InfoGetting StartedGet HelpLicense
Templates
Saved TemplatesPopupsTheme BuilderLanding PagesKit LibraryAdd NewCategories
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
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.
When using the Kit Library feature you may occasionally encounter the following message(s). To help resolve these issues use the following guide below:
Types Of Errors – Resolution
Error while loading the kit preview – This could be because of missing kit data or server error. Please try again in a few minutes. If the error continues, contact support.Error while loading the kit library – Please try again clicking the ? icon at the top corner of the screen or try again in a few minutes. If the error continues, contact support.Error while trying to apply the kit – This could be because of a server or license validation error. Please try again in a few minutes. You may also try disconnecting and re-connecting your license in order to make a fresh connection to the Kit Library. If the error continues, contact support.Error Forbidden – If you get the following message when trying to download a kit:{「code」:」rest_forbidden」,」message」:」Sorry, you are not allowed to do that.」,」data」:{「status」:401}} it can be corrected by making sure you have updated to the latest versions of Elementor Core and Pro (if installed). You may also try disconnecting and re-connecting your license in order to make a fresh connection to the Kit Library.
Additional Resolutions
If unable to apply the kit, verify that ZIPArchive has been installed on your server. You may do this by navigating to Elementor > System Info and locating the following information. If this is set to No, you will need to change the settings in your cPanel or contact your host to have this enabled.
When using the responsive editor in Elementor, inherited responsive values reflect on controls such as: padding, margins, image sizes, and every other numeric control. With each additional custom breakpoint, it is helpful to understand what exactly is being inherited from one breakpoint to another. With Elementor』s visible responsive values, you will see exactly what values were inherited.
Using Inherited Responsive Values
Select an object on your page that has responsive propertiesEnter a value to a control for desktop viewSelect another breakpoint (example: tablet). The previous value will be reflected as a greyed placeholderRepeat for additional breakpoints.
Cascading Responsive Values
Elementor uses a cascading concept across breakpoints, which means that changes cascade down. Changes you make on a larger breakpoint cascade down to the smaller breakpoint, but this will not work vise versa; Changes to a smaller breakpoint won』t affect the higher breakpoint unless you』re designing for widescreens. In this case, Elementor is cascading up, inheriting the Desktop value.
In order to continue to improve the performance of Elementor built websites, you may now choose to load Font Awesome icons inline with SVG by activating the option in Elementor Experiments. SVGs are vector-based images that are rendered using the browser』s engine. The benefit of using inline SVG icons, is that they do not increase server requests, which could have had an adverse effect on your site』s performance.
Activate / Inactivate This Experiment
You may navigate to Dashboard > Elementor Settings > Experiments to toggle the settings of this experiment.
Advantages / Differences
How Icons Render – SVG renders in your page』s HTML rather than as CSS pseudo-elements in Icon FontsAuto Accessibility – SVG supports this feature by default rather than only in a kitAdvanced Features – SVG supports features such as Power Transforms, Masking, and Layering whereas Icon Fonts do notScalability – Icon fonts may use anti-aliasing techniques implemented by the browser making it less sharp. SVGs are treated as images by browsers, so no anti-aliasing rules are applied.
Note: This feature does not convert Font Awesome Pro icons. If you are a Pro FA user, navigate to your Kit settings at the Font Awesome site at Kit > Settings > Technology and set them to SVG.
With Elementor』s Maintenance Mode Tools, you can display a custom coming soon mode page to visitors, and send the right HTTP response to search engines.
Coming Soon Response Code
Setting Elementor to Coming Soon, makes your site tell search engines everything is working as normal, and they can index the website as usual. This is done by returning a response of HTTP200.
(Read the complete Maintenance Mode post here)
Create a 『Coming Soon』 Page Template from scratch, or use one of our pre-designed templates and publish it. Note: The template hierarchy needs to be set to Page and not Section or other options.Go to Elementor > Tools > Maintenance ModeChoose Coming Soon in the mode selectorSelect the User Roles that are able to access the websiteSelect the template you created in the dropdown selectorSave your changes and view the website from another browser or incognito mode to test your page.
Note: The following 3rd party cache plugins are automatically cleared on every change in the Elementor Maintenance Mode:
WP Rocket (premium)W3 Total Cache (free)WP Super Cache (free)WP Fastest Cache (free + premium)
Note: You will see a red button on your top WordPress bar with the text: 」Coming Soon Mode ON「.
Tip: You can use the same process described here for 『 Maintenance Mode 』
These are the possible settings available in the Advanced tab of a Section, Column, or Widget. Not all settings are available for every element.
Advanced
Margin: Set the section MarginPadding: Set the section PaddingZ-index: Set the Z-Index. Learn more about Z-IndexCSS ID: Set a CSS ID for your sectionCSS Classes: Set CSS Classes for your section
Motion Effects
Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. Learn more about StickyScrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. Learn more about Scrolling EffectsEntrance Animation: Click the dropdown to choose an animation. Learn more about Entrance Animation
Background
The following options can be set independently for both the normal and hover states.
Background Type: Choose between Classic or Gradient
Border
The following options can be set independently for both the normal and hover states.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessBox Shadow: Adjust box shadow options
Mask
The Mask option can be activated by using the toggle. Learn more about Mask Option The following options are available:
Shape: Select the shape of your mask from the dropdown list. Choose one of the preset shapes or upload a custom SVG shapeSize: Select Fit, Fill, or Custom for the size of your maskPosition: Select the position of your mask Top, Right, Bottom, Left, and Center options are availableRepeat: Select the repeat options for your mask
Positioning
Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user』s viewport.
If either Absolute or Fixed are selected, the following options also become available.
Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.Offset: Changes the horizontal reference point by the amount of the offsetVertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.Offset: Changes the vertical reference point by the amount of the offset
Learn More: How To set Absolute Position for An Element
Responsive
Reverse Columns: Slide to reverse your columns order (Great for Mobile)Visibility: Show or Hide your section on Desktop, Tablet, or Mobile
Attributes (Pro only)
Add your own custom attributes. Learn more about Custom Attributes
Custom CSS (Pro only)
Add your own custom CSS
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.
The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page.
Content
Menu Icon
Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or PlainHide Empty: Slide to YES to hide items indicator if cart is emptySubtotal: Show or Hide the cart』s current subtotalAlignment: Align the menu cart to the left, right, or center
Cart
Main Options
Cart Type: Select the type of cart to display choosing between Side Cart or Mini CartOpen Cart: Select the desired option choosing between On Click or On HoverCart Position: Click the Left or Right position icon to set the position of the cart in the container.
Close Cart
Close Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Left and Right position icon to set the position of the close icon in the container.
Remove Item
Remove Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Top, Center or Bottom position icon to set the position of the remove icon in the container.
Price & Quantity
Position: Click the Top or Bottom position icon to set the position of the Price and Quantity heading in the container.
Cart Dividers: Toggle the Show / Hide option on the panel to set the desired state.
Note: This is also dependent on the settings in the style tab for dividers.
Buttons
View Cart: Toggle the Show / Hide option on the panel to set the desired stateCheckout: Toggle the Show / Hide option on the panel to set the desired stateVertical Position: Click the Top or Bottom position icon to set the position of the buttons in the container.
Additional Options
Cart Additional Options
Automatically Open Cart: Toggle the Show / Hide option on the panel to Open the cart every time an item is added.Automatically Update Cart: Toggle the Show / Hide option on the panel to show updates to the cart (e.g., a removed item) via Ajax. The cart will update without refreshing the whole page.
Note: In order for the auto open cart feature to function, you must check the enable AJAX in your WooCommerce settings located in WooCommerce > Settings > Products.
Style
Menu Icon
Main Normal | Hover Options
Icon Color: Choose the color of the cart iconBackground Color: Choose the background color of the widget containerBorder Color: Choose the border color of the widget containerBox Shadow: Click the icon to set additional box shadow optionsBorder Width: Control the thickness of the border around the widget containerBorder Radius: Set the border radius to control corner roundness
Icon
Size: Adjust the size of the cart iconSpacing: Adjust the amount of space between the cart icon and the subtotal textPadding: Change the padding settings of the widget container
Items Indicator
Text Color: Choose the color of the number of items in the items indicatorBackground Color: Choose the background color of items indicatorDistance: Set the distance between the icons indicator and the subtotal text
Note: When the Menu Cart is clicked, a cart overlay slides open. The following options control the design aspects of the cart overlay.
Cart
Main Style Options
Background Color: Use the color picker to set the background of the cartBorder Type: Select a border type or leave set to noneBorder Radius: Use the values to set the radius of borders if selectedBox Shadow: Click the icon to display the box shadow optionsPadding: Change the values to set the desired padding of the container
Close Cart
Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the close icon
Remove Item
Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the Remove Item icon
Note: The above options may be set for the Normal and Hover States if desired.
Subtotal
Color: Choose the color of the subtotal text in the cart overlayTypography: Change the typography options for the subtotal text in the cart overlayAlignment: Click the icons to choose between Left, Center, or Right alignmentDivider Style: Select the divider type between Solid, Dotted, Dashed, Grooved or leave set to NoneWidth: Set the width of the divider in the valesColor: Use the color picker to select the color of the divider
Products
Product Title
Color: Choose the color of the product title in the cart overlayTypography: Change the typography options for the product title in the cart overlay
Product Price
Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay
Quantity
Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay
Divider
Style: Select the style of the divider above and below the subtotal in the cart overlay, choosing from none, solid, double, dotted, dashed, or groovedColor: Choose the color of the subtotal divider in the cart overlayWeight: Set the thickness of the subtotal dividerSpacing: Set the spacing between subtotal dividers and the subtotal text
Note: These settings may be affected by the divider toggle in the controls.
Buttons
Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.Space Between: Set the amount of space between the cart overlay buttons
View Cart
Text Color: Choose the color of the Show Cart button text in the cart overlayBackground Color: Choose the background color of the Show Cart button in the cart overlayBorder Color: Choose the border color of the Show Cart button in the cart overlayBorder Width: Control the thickness of the border around the Show Cart button in the cart overlay
Checkout
Text Color: Choose the color of the Checkout button text in the cart overlayBackground Color: Choose the background color of the Checkout button in the cart overlayBorder Color: Choose the border color of the Checkout button in the cart overlayBorder Width: Control the thickness of the border around the Checkout button text in the cart overlayTypography: Change the typography options for both buttons in the cart overlayBorder Radius: Set the border radius for both buttons in the cart overlay
Messages
Typography: Change the typography options for the messages in the cartEmpty Cart Message Color: Use the color picker to set the color of the messageAlignment: Use the icons to choose Left, Center, Right or Justified alignment.
Other Information
Default WooCommerce Mini Cart Configuration
To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, Elementor gives you the option to enable or disable Elementor』s version of the Mini Cart template. If WooCommerce is activated, follow these steps to enable or disable Elementor』s Mini Cart template.
Go to Elementor > Settings > Integrations > WooCommerceChoose Enable for this option in order to replace the default WooCommerce mini cart template or your theme』s mini cart template with Elementor』s template. Unless manually set to Disable, this setting is automatically enabled once the Menu Cart widget is used anywhere on your site.Choose Disable to opt out of using Elementor』s Mini Cart template.
