If you download Elementor (free or Pro) using Safari browser for Mac, you might encounter the following issue:
Safari automatically opens ZIP files and therefore, you cannot download Elementor as a ZIP folder.
In order to fix this, go to your Safari Preferences and under General, uncheck 『Open 「safe」 files after downloading『.
Note: The file has to be compressed and uploaded as a ZIP file.
General
Post Types: Choose where Elementor can be used. If checked, the Edit with Elementor button will be available for that post type. If unchecked, the post type cannot be edited with Elementor.Disable Default Colors: Choose whether to use your theme』s color settings or let Elementor control itDisable Default Fonts: Choose whether to use your theme』s typography settings or let Elementor control itImprove Elementor > Usage Data Tracking: By enabling this, you will help us learn about the way you are using Elementor and help us improve
Style
The Style settings that used to be here have changed its location and can now be found within Elementor Editor』s Panel > Hamburger Menu > Site Settings. You can use the Site Settings to make changes and see them live!
Integrations
The Integrations settings allow you to optionally connect Elementor with 3rd-party APIs as needed.
reCAPTCHA: reCAPTCHA is a free service by Google that protects your website from spam and abuse. Paste your reCAPTCHA Site Key and Secret Key herereCAPTCHA v3: reCAPTCHA v3 is a free service by Google that protects your website from spam and abuse. Paste your reCAPTCHA Site Key and Secret Key here and enter your Score Threshold. The Score threshold should be a value between 0 and 1. The default is 0.5Facebook SDK: Facebook SDK lets you connect to your dedicated application so you can track the Facebook Widgets analytics on your site. Enter your APP ID hereMailchimp: Enter your API Key and then click the Validate API Key button to integrate Mailchimp with Elementor』s Form widgetDrip: Enter your API Token and then click the Validate API Token button to integrate Drip with Elementor』s Form widgetActiveCampaign: Enter your API Key and API URL and then click the Validate API Key button to integrate ActiveCampaign with Elementor』s Form widgetGetResponse: Enter your API Key and then click the Validate API Key button to integrate GetResponse with Elementor』s Form widgetConvertKit: Enter your API Key and then click the Validate API Key button to integrate ConvertKit with Elementor』s Form widgetMailerLite: Enter your API Key and then click the Validate API Key button to integrate MailerLite with Elementor』s Form widgetWoocommerce Mini Cart Template: Set to Disable in order to use your theme』s or WooCommerce』s mini cart template instead of Elementor』sTypeKit: Integrates TypeKit』s thousands of fonts into Elementor. Enter your TypeKit Project ID and then click the Get Project ID buttonFont Awesome Pro: Enter your Font Awesome Pro Kit ID and then click the Validate Kit ID button
Advanced
CSS Print Method: Choose if your CSS will be included as an independent stylesheet (recommended) or on each pageSwitch Editor Loader Method: In cases of server configuration conflicts, enable this option*Editing Handles: Show or hide editing handles when hovering over the element』s edit buttonEnable Unfiltered File Uploads: Enable or disable the ability to upload SVG, JSON, and other unfiltered files. Please note! Allowing uploads of any files (SVG and JSON included) is a potential security risk. Elementor will try to sanitize the unfiltered files, removing potential malicious code and scripts, however, we recommend you only enable this feature if you understand the security risks involved.Optimized DOM Output: Select Enable to use the optimized DOM output, which removes several HTML wrappers from output. By default, this is only enabled on new sites created with Elementor 3.0+. Sites upgraded to 3.0 from a previous version should be set to Disable by default to avoid causing site layouts breaking.Load Font Awesome 4 Support: Choose Yes or No. Font Awesome 4 support script (shim.js) is a script that makes sure all previously selected Font Awesome 4 icons are displayed correctly while using Font Awesome 5 library.
* Switch Editor Loader Method is useful in solving the 「err_content_decoding_failed」 and err_empty_response」 issues that sometimes occur. Enabling this option helps users running sites on servers with low resources which have difficulty reading long JSON code. When enabled, the tool splits the lines so that these servers can read the JSON code without issues. Switching to this method won』t negatively affect performance. Instead, it will likely improve performance. This tool can also be useful sometimes in solving the white screen of death.
Set the style and placement of the Archive Description within the Product Archive template
Alignment: Align the Archive Description widget to the left, right, center, or justifiedText Color: Set the color of the textTypography: Set the typography option of the text
The full width page template allows you to override the default page width and use a full width design on any theme.
Create a New Page, and Edit with Elementor.Click on the settings icon on the Left side, and under Page Layout look for the Elementor Full Width option
How To Set A Default Page Layout
If you would like to set a default page layout across your entire site, do the following:
Click the Hamburger Menu in the Widget PanelClick Site SettingsClick LayoutChoose the Default Page Layout that you wish to set as the default layout across the site
The Divider Widget allows you to add styled horizontal lines that divide your content.
You can choose either the standard line with nicely styled effects, or select from a variety of 25+ SVG dividers for enhanced design styling.
In addition, you can include text or icons before, after, or in the middle of your divider.
Content
Style: Choose between many classic and patterned styles, such as solid, curly, wavy, tribal patterns, arrows, pluses and more.Width: Control the width of the divider as percentage from 0 to 100 percent.Alignment: Align the divider to the left, center or right of the page.Add Element: Select from None, Text, or Icon. Select Text or Icon allows you to either enter the Text to be included or select or upload an icon from the Icon Library.
Style
Divider
Color: Choose the color of the dividerSize: Set the size/height of the divider, from 1 to 100, in either pixels or as a percentageAmount: Set the number of patterned elements to showGap: Slide to set the gap above and below the divider, from 1 to 50
Text
Color: Choose the text colorTypography: Set the typography options for the textPosition: Choose the position of the text in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the text and the divider line, from 1 to 50
Icon
There are 3 different VIEWS for the widget: Default, Stacked, and Framed. Each comes with its own set of options.
VIEW: Default
Size: Set the size of the iconPrimary Color: Choose the icon colorPosition: Choose the position of the icon in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the icon and the divider line, from 1 to 50Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
VIEW: Stacked
Size: Set the size of the iconPadding: Set the padding around the iconPrimary Color: Set the color of the stack backgroundSecondary Color: Set the color of the iconPosition: Choose the position of the icon in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the icon and the divider line, from 1 to 50Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360Border Radius: Set the border radius of the stack background to achieve rounded corners are completely round stacks
VIEW: Framed
Size: Set the size of the iconPadding: Set the padding around the iconPrimary Color: Set the color of the frame borderSecondary Color: Set the color of the iconPosition: Choose the position of the icon in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the icon and the divider line, from 1 to 50Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360Border Width: Control the thickness of the frame borderBorder Radius: Set the border radius of the frame border to achieve rounded corners are completely round frames
Advanced
Set the Advanced options that are applicable to this widget
Set any element to scale (grow or shrink) as the user scrolls up or down the page.
Advanced or Style > Background
Motion Effects
Scrolling Effects: Slide to ONScale: Click pencil edit icon
Direction: Choose from Scale Up, Scale Down, Scale Down Up, or Scale Up Down
Speed: Set the scaling speed from 0 to 10
Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.X Anchor Point: Choose the horizontal axis from which the element will scale, selecting from Left, Center, or RightY Anchor Point: Choose the vertical axis from which the element will scale, selecting from Top, Center, or BottomApply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.Effects Relative To: Choose from Default, Viewport, or Entire Page
Note: The two settings, X & Y Anchor Points, determine the axis around which the element scales. If you set orientation left-top, the scaling will happen from the left-top point of the element. If you set orientation center-center, the scaling will happen from its center.
If you get a 520 Error – 「Web server is returning an unknown error」, check the following:
Try a different browser to troubleshoot.If you are using Cloudflare, you may have a problem with its Rocket Loader feature. Click to learn how to resolve this issue.
Sections can be manipulated and styled either via the options in the Elementor Panel on the left or by right-clicking the Section handle and choosing from the context menu that pops up.
Right-Click Options
If you wish to duplicate a section, right-click a section handle and choose Duplicate from the context menu. You can also copy and paste a section elsewhere using Copy and Paste options here, or you can copy and paste only the style (without the content) from one section to another. Click Save as Template to save the section as a template that can be inserted anywhere later. Clicking Navigator here will open the Navigator already set to that particular section. And of course, clicking Delete here will delete the section.
If you click Edit Section, the column』s options will be displayed in the Elementor Panel to the left with all of the following options available to you.
Layout
Content Width: Set the Content Width to Boxed or Full Width. When choosing Boxed – use the slider to set your widthColumns Gap: Set your Columns GapHeight: Choose between Fit to Screen: Your section will fill the screen, and Min Height: Set a Min Height, and use the slider to set your section heightVertical Align: Set your Section content』s vertical alignmentOverflow: Select how to handle content that overflows its container. Default allows the overflow. Select Hidden to hide the overflowing content.Stretch Section: Force the Section to stretch to the full width of the pageHTML Tag: Set an HTML Tag for your section. Learn more about HTML Tags
Style
Background (Normal & Hover)
Background Type: Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), Video background, or an image Slideshow background.
Background Overlay (Normal & Hover)
Background Type: Choose between Classic or GradientBlend Mode: Set a Blend Mode
Border (Normal & Hover)
Border Type: Set a Border TypeBorder Radius: Set your Border RadiusBox Shadow: Add a Box Shadow
Shape Divider (Normal & Hover)
Type: Click the dropdown to choose your Shape Divider styleColor: Pick a colorWidth: Set the width of your Shape DividerHeight: Set the height of your Shape DividerFlip: Flip the direction of your Shape DividerBring to Front: Force your Shape Divider to be in front of other objects
Learn more about Shape Divider
Typography
Set Typography Colors for the section
Note: The 『Set Typography』 colors won』t work if Default Colors are enabled.
Advanced
Advanced
Margin: Set the section MarginPadding: Set the section PaddingZ-index: Set the Z-Index. Learn more about Z-IndexCSS ID: Set an CSS ID for your sectionCSS Classes: Set CSS Classes for your section
Motion Effects (Pro users only)
Sticky: Set your section as Sticky, and choose between Top or Bottom. Learn more about StickyScrolling Effects: 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
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
Get more details about the structure and layout of the Elementor Editor.
Set an element to tilt in relation to the the visitor』s mouse movement.
Advanced or Style > Background
Motion Effects
Mouse Effects: Slide to ON3D Tilt: Click pencil edit iconDirection: Choose from Opposite or Direct. Opposite will tilt the element in the opposite direction of the mouse movement. Direct will tilt the element in the same direction as the mouse movement.Speed: Set the tilt speed from 0 to 10Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.Effects Relative To: Choose from Default, Viewport, or Entire Page
Elementor Pro has one of the best affiliate programs for WordPress, offering 50% commissions per sale. Having said that, the program is strictly opened for premium and trustworthy affiliates.
To get in, you must first be registered with Elementor.
Next, sign up to the affiliate program.
After you fill in your details, we will review your application.
