Elementor is a visual website builder plugin for WordPress enabling the creation of web pages in a live, visual way.
When building websites with Elementor you should always keep in mind that this builder is both responsive and adaptive. That means, always start building from desktop first.
Elementor has some unique features which make building a website in WordPress faster. Some of those features are: the Finder, the Navigator, History States and many more.
Elementor has some unique features which make building a website in WordPress faster. Some of those features are: the Finder, Navigator, History States and many more.
Elementor Finder is a search bar that gives quick access to various areas across your site, within one window. You can use the finder to:
To access it you have to either click the hamburger icon 
or press, on your keyboard:
Navigator is a navigation tree panel providing easy access to every element on the editor with just one click.
Navigator is particularly useful for long pages or pages with complex multi-layered design, and for elements combining Z-Index, minus margin, position absolute, etc. It allows you to access element handles that may be positioned behind other elements.
You can access Navigator in one of 3 simple ways:
in the panel’s footer.
Elementor includes a built-in Undo and Redo, as well as Revision History. With these features, you get a log for every action and save made on the editor.
To access the History panel, click the icon 
at the bottom of the Widget Panel.
This will open the History panel, that includes Actions and Revisions.
The Actions Tab logs every ‘action’ you make in Elementor.
Browsing and clicking on the Actions list will let you trace back your steps. You can move back and forth between actions.
Each item on the Actions list includes the name of the element and the type of change, whether it is an addition or an edit.
! Note: Actions are available from the moment you navigate to a page and start making change on that current page. If you navigate to a different page, the actions will be reset and start again when you start making changes on the current page.
Every time a page updates, a new revision is created.
You can switch between revisions and revert back to any previous one saved.
Each revision item lists the date, time and creator of the revision. Click on Apply to apply the revision on the current page. Click on Discard to return to the current version of the page.
Important! This feature is available ONLY for IOL WordPress environments. Unfortunately, it is not available for the demo websites.
Elementor Hotkeys are keyboard shortcuts that let you make quick actions on the Elementor editor.
You can also use:
Elementor uses three main building blocks: Sections, Columns, and Widgets.
Sections are the largest building blocks, they are the equivalent of a row for web design. 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.
To create from scratch a section click 
icon and select your column structure.
To use the Spotzer Sections Library, click the 
icon. You can chose from a wide variety of design elements, like USP’s, POD’s and many more.
Columns can be manipulated and styled either via the options in the Elementor Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up. 
If you wish to add a new column/section/widget or duplicate a column/section/widget, right-click a column handle and choose either Add New Column or Duplicate from the context menu.
You can also copy and paste a column/section/widget into another section using Copy and Paste options here.
Or you can copy and paste only the style (without the content) from one column/section/widget to another.
Clicking Navigator here will open the Navigator already set to that particular column. And of course, clicking Delete here will delete the column.
Create your own design system with global colors and text styles that can easily be assigned to elements across your site.
Set predefined global colors. By default, the predefined colors:
are pre-populated from your theme’s CSS. Change them here to override your theme’s settings.
In addition to the 4 predefined global colors (Primary, Secondary, Text, and Accent), you can add any colors you choose to the global palette, for use in any Elementor color options and also named them.
! Note: By deleting a global color, all of its instances will inherit their values from an unknown source, possibly your theme, or your browser, etc.
Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields. These settings override the theme styling settings and takes its place, allowing you to use Elementor to set styles for elements not built by Elementor.
By default, this will apply styles only to non-Elementor elements, for example, WooCommerce checkout fields, Contact Form 7 labels, 3rd-party headings and much more. If you prefer, you can force these Theme Style settings to also apply to Elementor-built elements as well.
Click the Hamburger menu in the upper left corner of any page or post’s widget panel to access the Site Settings > Theme Style settings.
Theme Style consists of four tabs: Typography, Buttons, Images, and Form Fields.
Typography: Text Color, Typography, Paragraph Spacing
Link (Normal | Hover): Color, Typography
Headers H1-H6: Color, Typography
Buttons: Typography, Text Shadow, Normal | Hover, Border, Padding
Form Fields: Label, Field, Normal | Focus, Border, Box-shadow, Padding
Images: Normal | Hover, Border, Box-shadow, Opacity, Animations
In order for Theme Style settings to apply to most of Elementor’s elements and widgets as well, you will need to disable Elementor’s default colors and fonts.
Templates are pre-designed Pages & Blocks (POD’S, USP’S, CTA’S…) that can be inserted into any page with just one click.
icon.1. You can import it with the document settings of the template, which will overwrite all the global styles and the template will be imported with the original styling and customization.
2. You can import it without the document settings of the template, which will automatically update the template to the global styles preset in advance.
You can save any section or even a full page as a template, which later can be imported and used on other pages, depending on the request. To do that:
, on the section you want to save A Global Widget gives you full control over a specific widget that is displayed in multiple places on your site. Editing it in one place will instantly update the rest.
and click on Save as a GlobalOnce the widget is saved as a global widget it is instantly surrounded by a yellow border instead of the standard blue border.
When trying to edit a global widget you will see the message “ This is a global widget and is now locked”
! Note: Remember to unlink all global widget before copy is being added to the website.
On the new page click Global, and drag a global widget to your page.
To delete a global widget, go to Templates > Saved Templates, and delete the widget.
Important! If you delete a Global Widget, you delete it from everywhere it is still linked.
To export a template, go to Templates > Saved Templates, and select one or multiple templates and choose export. They will be exported as .json files which can later be imported for further use.
You can import templates in two ways: via the Elementor Dashboard or in Saved Templates.
To import from the Elementor Dashboard, click the hamburger icon
and go to Theme Builder, Add new.
Or, go to Templates > Saved Templates, and choose Import Templates.
!Note: You can import multiple templates (.json files) if they are all in a .zip file.
Global templates like the Header and Footer, 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 Entire Site, in a certain Category, or on a Specific Page.
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.
To add, change or remove conditions click on Display conditions.
!Note: Display Conditions are only an option within Theme Builder Templates. These are not an option within regular pages.
Some templates require the help of Conditions for them to work. These are Theme Builder Templates, like the Header and the Footer.
!Note: To create a sticky header you need to use CSS and animations. The Header Sections Created already have this implemented. To make changes to these CSS settings, open the specific header with Elementor, select the section container and navigate to Advanced > Custom CSS.
Popups are call to action modal windows that popup and overlay the page at a specified moment or under specific triggers and conditions.
To begin, go to Templates > Popups. Control the layout, conditions, rules and styles of the popup, and then design the popup content.
More on popups can be found here.
in the lower left corner of the widget panel to select a specific archive as the preview example while editing.With Elementor Pro, you can set custom CSS globally. This allows you to add custom CSS rules which will apply to your entire site.
Important! Additional CSS needs to be saved in the Site Settings > Custom CSS.
Important! All WooCommerce pages except for the Shop and the Single Product Page cannot be customed via Elementor. Please use the CSS already preset and add your own in Site Settings > Custom CSS.
For Theme Builder Templates you have the option to preview a specific product or archive. For example, to design a Blog or Shop, and to be able to see the content while designing, you can preview a product or an archive, from the Preview Settings.
in the lower left corner of the widget panelFor more information you can always press the Need Help button which is available on each widget.
Or you can always use the Help Center from Elementor.
