Navigator Indicators

Navigator Indicators

Navigator Indicators are small icons that indicate the state of a particular element within the Navigator. The following types of Indicators are currently available:

Eye Indicator

Indicates that this element is currently being viewed. Clicking the Eye will toggle between Show and Hide states for that element. Hiding the element will only affect the view on the back end, within the Elementor Editor. It will have no effect on the front end of the site.

Custom Position Indicator (Pro)

Indicates that the element is placed using Custom Positioning. The blue indicator line expands to show a drag icon when in hover state.

Custom CSS Indicator (Pro)

Indicates that the element has Custom CSS applied to it.

Motion Effects Indicator (Pro)

Indicates that the element has Motion Effects applied to it.

What』s The Difference Between Elementor Canvas & Full Width?

What』s The Difference Between Elementor Canvas & Full Width?

When selecting the Page Layout you have the options of Default, Elementor Canvas, Elementor Full Width, and Theme. Choose the best option based on the following usages:

Default – This uses the default layout including the Header, Footer, Content, and Sidebar. This may be controlled by the active theme, or the Elementor Theme Style and Global Template Display ConditionsElementor Canvas – This displays only the Elementor created content without the Header, Footer, Content, or SidebarElementor Full Width – This displays the Elementor created content including the Header and FooterTheme – This displays the predefined layout of the active theme. These options are generally found in the Customizer of the active theme

Note: Only posts that use the Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Posts that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

Adobe Typekit & Elementor Integration

Adobe Typekit & Elementor Integration

Typekit is an Adobe subscription service for fonts.

Elementor seamlessly integrates with your Adobe TypeKit account, supplying instant access to all your TypeKit fonts within the Elementor  Dashboard.

Under Elementor > Settings > Integrations add your TypeKit Kit ID.Click Get Kit

Please be patient after adding your key, as it may take several minutes for Adobe to update their CDN network and place your fonts into Elementor.

How To Change Link Color in Elementor

How To Change Link Color in Elementor

When changing the colors of links in Elementor you may use the following methods in this documentation. 

Global Site Settings For Link Color

Click the Hamburger menu in the upper left corner of any page or post』s widget panel to access the Site Settings > Theme Style > Typography.

Link – Normal | Hover

Color: Choose the default color of links for both normal and hover statesTypography: Change the default typography of links for both normal and hover states

See Also: Theme Style – Global Settings

CSS Classes

If you need to override the Site Settings, you may create additional CSS link classes in the Site Settings > Custom CSS region. Add these classes to your text editor or widget links.

CSS Class Snippet

a.mygreenlink:link, a.mygreenlink:visited, a.mygreenlink:active{ color:green; text-decoration: none; } a.mygreenlink:hover { color: green; text-decoration: underline; }

Usage Example

My Green CSS Class Link

Inline HTML Style

You may additionally use the style property directly in your link HTML .

Usage Example

My Purple Inline CSS Link

How to Enable AMP on Elementor

How to Enable AMP on Elementor

AMP (Accelerated Mobile Pages) is a WordPress Plugin released to help improve mobile browsing experience. It is designed to render the page faster by only loading the text and media without scripts and many styles.

Since AMP renders the WP editor content in a minimal fashion, it is not 100% compatible with Elementor created content.

Important! In case you experience the 「Preview could not be loaded」 error, it might be related to AMP. For more information click here.

Footer Site Part

Footer Site Part

The Footer Site Part section of the Theme Builder lists all Footers you』ve created, if any, giving quick access to add, edit, or delete any footer.

If no footers have been created yet, you will need to create one. Click Add New in the upper right corner of the Footer Site Part screen.

Once you』ve created at least one footer, you will be able to manage them here.

Edit An Existing Footer』s Design

To edit an existing Footer, click the Footer label in the sidebar. This will open the Footer』s details dashboard.Click the Edit link in the upper right corner of the specific Footer you wish to edit. This will open the Elementor editor for that Footer.

Edit An Existing Footer』s Conditions

Click the Edit Conditions link in the bottom left corner of the Footer you wish to edit. This will directly open the Display Conditions editor for that Footer.

Note: The Dot Display in the upper left corner of the Footer indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Footer, while a Gray Dot indicates a draft Footer. 

Note: The Instances label in the lower left corner of the Footer displays the specific instances in which this template is being used on the site. 

Export A Footer

Click the Three Horizontal Dots in the upper right of the Footer you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.

Delete A Footer

Click the Three Horizontal Dots in the upper right of the Footer you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don』t want to delete the Footer, or click Delete to confirm that you do wish to delete this Footer.

Rename A Footer

Click the Three Horizontal Dots in the upper right of the Footer you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don』t want to rename this Footer.

Icon Library

Icon Library

The  Icon Library gives access to more than 1,500 free Font Awesome 5 icons, and introduces an interface for managing your icons.

Click on the Icon Library button that appears on any widget with icon controls to open the Icon Library. Most controls will look like this:

Some widgets, such as the Accordion and Toggle widgets, will have inline icon controls like this:

Widgets with inline controls: Click the + and – icons to choose icons from the icon Library or click the Upload icons to upload an SVG. 

Icons that are relevant to the widget you are currently using will automatically be displayed, but if you prefer, you can browse through the entire library to pick your desired icon, or search for a specific icon.

Filter Icons By Name: Search by keyword in the search box above the icons in the right panel.Filter Icons By Families: Select the icon family in the left panel, choosing from All, Regular, Solid, or Brands

Font Awesome Pro

If you have a Font Awesome Pro license, you will have a larger set of icon families to choose from, including Regular Pro, Solid Pro, Brands Pro, Light Pro, and Duotone Pro. 

How To Use The Font Awesome Pro Icons

Go to Elementor > Settings > IntegrationsScroll down to Font Awesome Pro and enter your Kit IDClick Save ChangesEdit the widget that includes an icon Click Icon LibraryChoose one of the Pro families such as Duotone Pro, select the icon you prefer, and click Insert

Speed and Performance

The Elementor Icon Library brings faster performance and faster page speed, which can benefit your SEO and page load speed. With this library, only the CSS and fonts of the icon family you actually use are loaded.

One Time Migration To Font Awesome 5

The first time you attempt to use the Icon Library, you may be presented with a Font Awesome Migration popup. Read more about this

Troubleshooting Tips

If you find that you are unable to change the colors of Font Awesome Pro icons, please log into your Font Awesome Pro account and choose Web Font instead of SVG in your kit』s settings. The incorrect SVG setting is shown below. When you use SVGs to display the Font Awesome Pro icons, it changes the CSS properties and one of them (the fill property) is not supported by the CSS editor of WordPress, so Web Font is the more appropriate choice.

How To Fix Elementor Stuck on Loading Screen | Elementor

How To Fix Elementor Stuck on Loading Screen | Elementor

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.

AWeber and Elementor Integration

AWeber and Elementor Integration

How to Connect Elementor With Aweber

AWeber』s sign-up forms integration on your WordPress is available with both Elementor Free and Elementor Pro. 

If you don』t have the AWeber for WordPress plugin, install it now.

Elementor Pro

With Elementor Pro, you can connect forms created in Elementor with your AWeber account, add tags, and configure custom fields.

Follow the steps below to integrate your Elementor form and AWeber. 

Step 1: Launch Your Forms Widget

Drag and drop the Elementor Pro Forms widget onto the widget area in the middle of your screen to create a new form on the page. The form』s options are in the panel to the left.

Step 2: Configure Your Form Fields and Submit Button

From the options panel on the left, you can delete or add fields, or change the types of fields. Click the submit button tab in the options panel to configure the button. You can select the button』s text that will appear, as well as its size, color, and alignment.

Step 3: Set up Action After Submit Button to Select Aweber

Click Actions After Submit to define which actions will take place when someone clicks the submit button. Click on the Actions drop-down to reveal the options and select AWeber. This will cause AWeber configuration options to appear.

Step 4: Set up Your Aweber Actions.

Now it is time to set up where in AWeber you want the contact information sent. 

Select the AWeber list that you want to use. Enter the tags you want to use. Go to Field Mapping so you can map the data you want for each custom field. Click Publish. 

Now anytime any visitor to your website clicks the Submit button, the information on the various fields and custom fields configurations will be sent to AWeber.

If you are moving to AWeber from a competitor, you can also easily reassign your Elementor forms to AWeber by selecting AWeber in the Actions After Submit step.

Elementor Free

If you are using the Elementor Free version, you can quickly and accurately pull over any AWeber form you want to use with no coding or manual copying of HTML. This option is also available to Elementor Pro customers.

The steps below outline how to add any of your AWeber sign up forms into your favorite Elementor landing page.

Step 1: Make Sure the AWeber Plugin Is Installed on Your WordPress Website

When you have the Elementor free plugin and the AWeber WordPress plugin installed, there will be an AWeber icon at the bottom of your Basic elements options.

Step 2: Drag and Drop the AWeber Widget Onto the Widget Area in the Middle of Your Screen

This will place a blank gray area onto the page, and will reveal the Aweber Configuration options in the Options Panel on the left. 

Step 3: Select Your AWeber Form.

From the AWeber Configuration options in the left panel, click the List drop-down and select the AWeber list you want to use from the options in your account. In the Sign Up Forms and Split Tests drop-down, select the AWeber form you want to use. The form you selected will load into the widget area on the main screen. The plugin is going into your AWeber account and pulling into Elementor the sign up form that you selected.

For more questions about how to leverage the power of AWeber and Elementor, read their Knowledge Base article.

How To Set Display Conditions for Global Templates

How To Set Display Conditions for Global Templates

Elementor 2.0 added global templates like the Header and Footer. These templates are implemented across your entire site, or on any combination of pages of your choice.

With Conditions, you can set exactly where each template is implemented, whether it』s in a certain Category, Taxonomy, or on a Specific Page.

How are Conditions Displayed?

Each Condition setting lets you Include or Exclude a condition.

For example, we have a Header template with the Include condition Entire site. We can add a second condition of Exclude for a specific page – let』s use Front page.

Now we』ll have two headers on our site. The first one across the entire website, and another displayed only on the homepage.

You can always click on Display conditions to add, change or remove conditions.

Note: Display Conditions are only an option within Theme Builder Templates. These are not an option within regular pages. 

Tip: Did you know? You can create more than one Header, and assign it to different areas on your site!