The Elementor Almanac

Introduction

It was at the end of 2018 that I discovered Elementor as a free plugin for my WordPress installation, and after some experimenting I was blown away by its power and ease of use. So, soon I purchased the Elementor Pro license for 3 websites, and now I have a license to use Elementor Pro on 1000+ sites.

I was also impressed by the amazing amount of online resources, the Elementor community or ‘ecosystem’, including the many tutorials and How to’s that are online. Some of the tutorials are most comprehensive and take hours to explain all the different possibilities that Elementor has to offer. Some of the How to’s are small jewels that should be brought into the limelight for everyone to know. At the moment of writing the number of downloads of Elementor has reached the 4 million.

Much of this treasure trove is hidden among many other topics, hence my desire to publish this document to provide a first overview of all the ‘wheels’ that have been invented already. So, if you are looking for a specific solution to your problem check out this document. It will also be a ‘living’ document, i.e. it will be updated on a regular basis, and authors of new solutions can always ask to be included as well.

As things move fast on the web, I’ve chosen to go for the most recent publications regarding Elementor, starting with documentation and videos made in 2019.

This document is full of hyperlinks and references, so if you see something appealing, one click should be enough to bring you to your destination. It is written for both beginners, intermediate and expert users.

An updated version of the eBook will be published as often as necessary. As you bought the Elementor Almanac you are entitled to free updates within one year of purchase.

To sign up for your free update(s), go to the last Chapter About the Author and click on the link to register for free updates

I hope you enjoy finding your way to solve any problem, create any solution, and build beautiful websites.

Eljay Bos, February 2020, Rome

What is Elementor (Pro)?

Elementor is a free WordPress page builder, that lets you create beautiful WordPress websites in the easiest and quickest way possible. (source: Elementor.com)

The key difference, compared to other Page builders, is that you can reach a high level of design (pixel perfect), while designing live, and on the frontend of your site.

Elementor is the first, and currently the only frontend page builder to offer limitless design possibilities. It includes dozens of useful widgets, a stunningly designed template library, a unique mobile editing toolset and a visual revision history feature. These are actually just some of the features available for you in this free plugin.

picture 1: Work area of Elementor

Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS, and without relying on developers for help.

The user interface is extremely friendly, so it only takes a few minutes to get the hang of it. Elementor has been built with the latest technology, and has been updating itself steadily since the launch in June 16′, so the whole page builder is optimized and fast responding. This means, for example, that when you drag and drop widgets, it is done instantly, without any lag time at all.

The core plugin of Elementor is free. For Elementor Pro, the pricing starts at $49 per year for 1 site, $99 per year for 3 sites, and $199 per year for unlimited sites. Go to the pricing page to read more

Elementor works with almost any WordPress theme. Here is a list of free themes:

Hello - A plain-vanilla & lightweight theme for Elementor page builder.

Layers -A free responsive multipurpose theme. The theme features a special panel, offering easy-to-use tools to quickly customize areas like your site’s header and footer, blog page and more

Sydney - Sydney is a powerful business theme that provides a fast way for companies or freelancers to create an awesome online presence. The theme also works very well with Elementor.

GeneratePress - A great free theme. Fast, lightweight and well-constructed. The premium version is also excellent.

OceanWP - A free Multi-Purpose WordPress perfect to create any kind of websites, fully customizable, fast, SEO friendly and perfectly compatible with Elementor.

Astra Theme - A fast, elegant & customizable theme that is customizer powered, SEO friendly and compatible with Elementor. The theme has over 50 pre-built and full Elementor-based websites, all installed with just one click.

Rife Free - Great creative, portfolio & photography WP theme with 7 ready-to-use full demos build on Elementor. It is great as a one-page theme as well as a shop(with WooCommerce). Over 450 options to change + theme sliders and galleries are available as Elementor widgets.

Neve - Neve has a minimalist approach to help users build well-designed sites fast. With onboarding built right into the dash, it’s easy to get started with any of its pre-built demos.

Tesseract - A simple, easy to use and reliable theme. Integrates really well with Elementor.

Page Builder Framework - A free, lightning fast and highly customizable WordPress theme that was specifically created to work with Page Builders like Elementor.

Zakra - A page builder multipurpose theme designed to give you excellent results. Includes 10+ starter sites for different purposes. It is a flexible and lightweight WordPress Elementor theme for 2019.

Phlox - A free and compatible theme with Elementor. Phlox comes with 25+ new fresh and beautiful demos. Highly customizable Multi-Purpose theme which covers all types of websites (e.g. Shop, Blog, News, Agency, personal and more).

Ashe - Personal and Multi-Author Free WordPress Blog Theme. Minimal, elegant & mobile friendly layout with WooCommerce shop (storefront) support will WOW and inspire your visitors. Well documented and very easy to use even for WordPress beginners. Works perfectly with Elementor.

Please find a more comprehensive list of free and premium themes for Elementor on the Elementor website.

Elementor works well with the Yoast SEO plugin, with no need for any setup. Yoast automatically read your content widgets from the Elementor editor. Elementor Pro even has Yoast Breadcrumbs as a widget for building your site’s breadcrumbs.

There are two ways to install the Elementor plugin.

1. Via Elementor.com:

Go to elementor.com and click download.

•      In the WordPress dashboard, Click Plugins > Add New.

•      Click Upload Plugin, and choose the file you’ve downloaded for Elementor.

picture 2: download

2. Via WordPress dashboard:

•      From the Dashboard, click Plugins > Add New.

•      In the Search field, enter Elementor and choose Elementor page builder to install.

•      After installation, click Activate.

After installing and activating the plugin, once you add a new page, you will see a big blue ‘Edit with Elementor’ button at the top of the page. Clicking on this link opens the live visual editor.

picture 3:

Picture 4: new page

Read more about installing Elementor

When Elementor was developed, the vision was not just to build a successful business, but to change WordPress design forever, and make it much easier for web designers, developers and site owners in general, to develop stunning websites using WordPress. A really supporting community is forming in Facebook.

In December 2016, Elementor Pro was launched as an extension plugin for Elementor that is meant for web designers and professionals. Elementor Pro includes some unique features, like live visual form design, flexible posts and portfolio widgets, custom CSS and Global widget.

The fact that Elementor is free and open source has allowed for developers to extend Elementor even further. They also released the Elementor API, which includes a detailed explanation on extending Elementor and creating addons and extensions.

Several videos on how to get started using Elementor can found on this page on the Elementor website as well as on this YouTube channel.

There is also an extensive knowledge base on the Elementor site.

Back to table of content

How to Use Elementor

•      Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way.

•      In the hyperlink below, you’ll find a step-by-step guide that walks you through how to create a website using Elementor.

picture 6: Build your first page•

If you are an Elementor newbie, the following steps will help you understand the essentials of successful page-building. You will learn about:

1.      Create a new page on WordPress and Elementor editor layout

2.      Build your first page with Elementor

3.      Insert Templates to your page

4.      Preview & Publish your page

5.      Make your page Responsive

There is even a more holistic step-by-step guide showing the building process on the Elementor blog

•      On the top left side of the WordPress dashboard, click Pages > Add New

•      Click Edit with Elementor to enter Elementor Page Builder

picture 7: create a new page

•      WordPress 5.0+ (Gutenberg) Compatibility. Use the 'Edit with Elementor' button within Gutenberg

picture 8: use Elementor button

picture 9: first page

Next step - Build 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.

picture 10: handles

You can choose to show or hide the editing handles by clicking the hamburger menu to open Elementor's Style & Settings Configuration menu. 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.

picture 11: widgets

Editing

•      To edit the Section, Column, or Widget, Right Click their handle.

picture 12: click handle

Section

1.      Click the  icon to create a Section, or click the  icon to use a pre-designed Page or Block from the library

2.      Set your Column structure

3.      Right click to Edit, Duplicate, Copy, Delete etc.

picture 13: library block•

Use the Section handle   to: add a section, drag a section, or delete.

Column

•      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

1.      Insert Widgets to your Columns

picture 14: widgets

Note: Learn more about Columns here

Widget

1.      Insert Widgets inside your Columns

2.      A Widget width is set by the Column width

picture 15: widgets overview

Note: Learn more about Elementor Widgets here

Next step - Insert templates to your page

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

1.      From the editing screen, Click the   icon.

2.      Click the magnifying glass icon   to preview a template.

•      Click INSERT to select the required template.

3.      Give your favorite templates a heart and save them to My Favorites.

4.      Click the arrow in the top right corner   to upload a .json or .zip file.

Next step - Preview & Publish your page

•      After you’re done designing your page, Preview & Publish it.

Go to the bottom panel:

1.      To preview click the   icon.

Note: The Preview link is different than the actual page link

2.      If you are satisfied with the result, go ahead and click the   button.

•      Click 'Have a Look' to view the published page

picture 16: publish

Save 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.

1.      Click the arrow next to Update / Publish

•      Choose Save Draft

picture 17: save draft

•      Many editable features have a Mobile, Tablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

1.      Look for the Viewport Icon  next to the individual element you wish to control.

2.      Click the specific device icon for which you want to edit its settings.

picture 18: mobile editing

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