Elementor, the star website builder for WordPress, has been steadily improving since its release. Many users have left their old website builder to switch to Elementor, which has more than 5 million active installations today. It is absolute madness. Everyone wants to use it but getting started with Elementor, not quite easy work and some find it challenging. So today, I offer you a complete guide to using Elementor.

1 – Install Elementor On WordPress

1. Go to the Extensions tab > Add
2. Search in the dedicated field
3. Install then activate the plugin.

Otherwise, you can also download it from the official directory. Check the Elementor Website Builder plugin.

2 – Elementor’s Settings

As soon as the plugin is activated, you will see two new tabs appear in your administration: the Elementor tab and the Models tab. We will first look at the first tab.

2.1 – Elementor Tab> Settings

Elementor’s settings tab is made up of 3 sub-tabs. Even if the Style and Advanced tab allow you to configure a few more options, I would like to dwell a bit on the General tab.

1. Go to Elementor tab > Settings
2. Open the General tab.
3. You will be able to choose what types of content can be edited with Elementor. By default, Articles and Pages are checked. For my part, I generally advise creating the pages with a page-builder and using the default WordPress editor for the articles. In this case, Gutenberg or the classic editor does the job very well (since an essay is usually intended for pure writing). Here you can then turn off Elementor on specific post types.
4. You can turn off Elementor’s default colors. Thus, it will be the default colors of your theme that will take priority. This is often what we want, but by default, this option is not checked.
5. Ditto for the fonts. Some users notice that some fonts, although available in their theme, are not available in Elementor widgets. If this is your case, feel free to check the option to disable Elementor’s default fonts. By default, this option is not limited.
6. You can agree to the plugin collecting information anonymously. By default, this option is not checked.
7. Remember to save your changes.

2.2 – Elementor tab> Role manager

The Role Manager tab will allow you to disable the use of the website builder based on user roles. This can be relevant if you are not the only one maintaining your site. By default, everyone is allowed to use Elementor. However, you can disable it for users who have the role of publisher, author, contributor, or subscriber.

2.3 – Elementor tab> Tools

General Tab

You shouldn’t need to go to this tab. However, it is good to know that it exists and what it offers:

1. Open the Elementor tab > Tools
2. Open the General tab
3. A feature allows you to re-generate the CSS.
4. Synchronize library is a button that allows you to do it manually – by default, it updates daily.
5. If you have any issues or conflicts, you can test using Safe Mode.
6. Don’t forget to save your changes.

Replace URL Tab

Be careful, this feature can have consequences on your site. It allows you to change the URL of your site in the database and to update your Elementor data. This should only be used in specific cases and if you know what you are doing.

1. Open the Tools tab
2. Open the Replace URL tab
3. You will be able to replace the old URL of your site with the new one.
4. Save.

Version Control Tab

If you have a compatibility issue, you could choose to downgrade the version of Elementor you are using or even become a Beta Tester.

1. Open the Tools tab
2. Open the Version Control tab
   
3. Click on Reinstall V3.4.3
4. Become a beta tester, if you wish – you can check out the plugin’s future features ahead of its official release.
5. Save.

Maintenance Mode Tab

This Elementor feature will allow you to put your site into maintenance without having to use another plugin.

1. Open the Tools tab
2. Open the Maintenance Mode tab
3. You can select the type of maintenance: Coming Soon mode and Maintenance mode
4. During the maintenance of your site, you will be able to define who will be able to access the back-office of your site according to the roles of the users.
5. For this maintenance mode to be active, you will need to create a “template” in your Elementor library. This template is a layout that you will need to create upstream. We will see that later.
6. Save.

2.4 – Elementor Tab> System Information

Here, nothing very complicated. This tab allows you to control your system information- WordPress and hosting. You may be prompted for this when requesting help from support.

2.5 – Start / Get Help Tab

The next two tabs will allow you to find information and help. The Get Started tab has how-to videos and the Get Help tab takes you to the official Elementor Support page.

2.6 – Elementor tab> Custom Fonts

The Custom Fonts tab will only be available if you are using the pro version of the plugin. That said, it is quite doable without subscribing to this license. This tutorial will allow you to easily add personalized fonts via your child theme.

3 – Activate Elementor on a Content

Now that we have covered the main global settings of Elementor, we will see how to activate it within your pages (or other types of posts).

1. Go to the Pages tab > Add
2. Enter your page title. For example Home or Contact.
3. Activate the Website Builder by clicking Edit with Elementor
4. Wait a few moments. Your page will open in front (on the visual side of your site) and you can start building the layout.

4 – Understand How Elementor Works

Before going any further in the design of your layout, I suggest you understand how Elementor works

4.1 – Overview

Here is an image that reflects an empty page where we have just activated Elementor (previous step). You must distinguish four parts:

1. Widgets: the left part (in green) offers widgets to insert into your layout. These are “bricks” that you will add by dragging and dropping within your content (tablet n ° 4). Your structure will thus be composed of several bricks as if you were building your “house”.
2. The header: is composed of the header of your site (with the menu (s)) as well as the title of the page (possibly). The header cannot be managed with Elementor. Let’s say that it cannot be controlled with Elementor in its free version, and the pro version will allow you to do so. So that’s the theme’s job. The design of your site will depend on the WordPress theme you have chosen. For example, the Ocean WP theme has a lot of header styles, which is quite rare for a free theme.
3. The sidebar: this area cannot be edited with Elementor. WordPress is responsible for its contents (tab Appearance> Widgets ), and your theme is responsible for its appearance and design. So don’t try to change this using Elementor. You won’t be able to.
4. The body: this is the main content. This is precisely where the builders’ pages come in, whatever they are. So this is where you can start building your page layout.

4.2 – The Design of a Layout

Creating a layout from scratch (from scratch) is a good exercise in understanding how it works. The principle: you add sections in which you add widgets. The rest will depend on your creativity and how you use the options offered by Elementor.

Here are the steps:

1. Start by clicking on the “+” icon to add a new section.
2. Define the structure of your section. This is the number of columns: from 1 to 6 columns.
3. This section will be positioned at the top of the layout (if no section for the moment) or after the sections are already present.

You will be able to start customizing the design of this section with the available options:

1. Select the section you want to edit. It will “light up blue”.
2. To be sure that you are acting on the right element, check the title of the customizer. For this example, “Modify Section” is written. The section can be personalized in 3 steps:
3. Tab Layout: here you will find options to customize the position of the section within your page.
4. The Style tab: here you will find all the options related to design.
5. The Advanced tab: here you will find options to go further such as customizing margins, adding animation, adding custom CSS, etc.

So, you will add several sections to define the structure of your layout.

Repeat as needed:

1. Add a new section.
2. Define the structure.
3. Get down to business by continuing to build your layout with the addition of widgets. At each “+” icon, you can insert a widget of your choice.

You May Also Read: 7 Best Theme for Elementor to Build Awesome Websites

5 – Widget Management

1. Within a section, click on the “+” icon
2. The left customizer will offer you a list of modules available from the Elements tab.
3. Select a widget and drag it into a section.
4. The Global tab, meanwhile, is not available in the free version. You will therefore not be able to create reusable widgets that are connected to each other.

Once you have inserted your widget within a section, the left customizer will open so that you can configure the module:

1. Select the module to configure.
2. Check the title of the customizer to be sure that you are acting on the right element.
3. As for the section, the customizer is split into 3 tabs: Content, Style, and Advanced.
4. Start your customizations.

Note that each widget will offer different options.

6 – Responsive Management

The responsive side of your layout will be managed in various places:

1. At the bottom left of your screen, you will see a small “computer icon”. If you click on it, you will access 3 types of views: Computer, Tablet, Mobile.
2. The “Computer” view is the default view,
3. The tablet view allows you to see how your layout behaves in the tablet version,
4. The Mobile view gives you an overview of your layout in the mobile phone version.
5. For each module (widget) you edit, you can open the Advanced tab and find an interesting option.
6. You can decide whether or not to display this module on different devices. For example, a phone call button could be hidden on computers and tablets and thus appear only on mobiles.

7 – Ready-made Layouts

We have seen that it is possible to create a layout from scratch. I have good news! You can also download a pre-designed layout, also called “premade layout”.

 

Instead of clicking on the “+” icon, click on the folder icon (in gray)

1. 1. You will find three tabs, and the first is the Pages tab. It allows you to import a ready-made layout with one click. Don’t rejoice too quickly: few formats are accessible. And, of course, the prettiest is only available in the pro version.
   2. The Blocks tab allows you to download pre-configured widgets (modules).
   3. The My model’s tab will allow you to download models that you have previously saved in your library. 

You have to click on one of these elements to import them in one click. Be careful, this may seem like a time-saver, but in fact, the time to change all the items and setting options can be tedious as well.

8 – Managing Models

We have seen that it is possible to import a layout with one click. Another cool feature of Elementor is being able to save a layout to the library (template). Thus, this layout can be used again on another page!

Let’s see how to do it:

1. Click on the “folder icon,” located within the page to be backed up.
2. At the top right, you’ll see a “computer floppy” icon. Click on it.
3. A popup will open, you can name this layout.
4. Click on save.
5. After this save, your layout will be stored in your template library, in the Templates> Saved Templates tab. This is where you will find all the layouts you have saved.
6. And what’s even more interesting is that you can export these models to save them on your computer and use them on another site for example.

To import a pre-built layout that you would have saved on your computer, the process is reversed but very similar:

1. Still, in the Models tab, click Import Models
2. Then click on Browse and choose your layout saved on your computer. This file should definitely be named elementor-xxxx.json
3. Click Import Now then wait.
4. Finally, you will find your layout in the list of your models.

Don’t forget to go to Yoast SEO settings to disable the indexing of your models in search results.

9 – Hidden Features

You must have noticed that Elementor was hiding a lot of features behind little icons here and there. Discover them in detail:

1. The “cogwheel” icon: at the bottom left, you will see an icon to access the general settings of the page. These settings are split into three parts: Settings, Style, and Advanced. The Settings tab gives you access to modify the page title, add the featured image, the ability to hide the title, etc.
2. The “superimposed layers” icon: this is the browser. A sort of summary of the structure of your layout.
3. The PUBLISH button: this is where you can publish your page (or article). Otherwise, you can save it as a draft or even save it to your template library.
4. The icon to “go back in time”: this is the history of your layout. This history is split into two tabs.
5. REVISIONS
6. Then you can reach other settings by clicking on the “hamburger” icon, located at the top left.
7. A new screen will appear to offer you various settings such as:
8. The default color setting
9. Default font setting
10. The color picker setting
11. Quick access to the settings of the plugin itself
12. The possibility to see a preview of your page in front-end
13. Or go back to the WordPress editor in the back office to do your SEO optimizations (by filling in the Yoast fields).

10 – Free Version vs. Pro Version

Even if Elementor is quite satisfactory in the free version, a lot of features are constrained. To unlock them, you will need to upgrade to the pro version. Rates: from 49 to 999 US$ per year.

11 – Elementor 3.0: Everything You Need to Know

Article updated following the release of version 3.0 of Elementor which brings its share of new features: advanced form builder, pop-up generator, and a theme editor that ensures full control over the header and footers.

One of Elementor’s promises: control the entire look of your WordPress site. A few weeks ago, it was one of the most important updates since the launch of Elementor in 2015. There are new features and improvements relating to three main areas:

1. A New Centralized Design System

It allows you to have control over site identity, typography, colors, layout, and lightbox from one place. This options panel called “Site settings” is now available from any page (Elementor Core Free and Elementor Pro):

2. A New ‘Theme builder’

Control every part of your website – header, footer, single post layout, archive, 404 page, WooCommerce pages – on one screen (Elementor Pro).

3. Better performance

But for that, I would have to carry out fairly detailed tests to verify, perhaps in a future article

In this article, we’ll break down the new features that Elementor 3.0 offers and see how they can help you save a lot of time in designing a website for you or your client. Elementor Marketing Manager Ben said Elementor 3.0 has one main mission: to introduce a whole new way to develop WordPress sites while helping developers get their projects done even faster, professionally, and efficiently. Let’s see if their promise is kept.

Part 1: What Changes in Elementor’s Design System

The Design System allows you to control the typography, colors, site identity, layout, etc. In fact, it is about the look and design of your site that the visitor will perceive.

Centralization of Site Design and Identity from a Single Elementor Control Panel

Elementor has decided to bring together all the modules and options that define the consistency of your brand image. These options can be accessed from any Elementor page, no need to go back and forth between the dashboard or the customizer. Every design-related setting is now available from one place called “Site settings”:

The Advantages of “Global Fonts”:

1. You will have overall typography consistency throughout your site. Elementor follows the same logic as for colors: a whole new way of working with text styles to be applied globally on your site:
2. You can control the typography for all modules at once: Font family, bold, italics, font size as well as all responsive settings.

The Advantages of “Global Colors”:

1. Global Colors allow you to change the color on a single control panel and update that color anywhere, with one click.
2. Your entire team of devs and designers will be in sync as they will all use the same settings and color codes.
3. If you start a slight redesign of the site or if you give your site to a new designer, then they will no longer need to go through all the pages and elements to apply the new colors.
4. You can also rename your color with the mention of your choice:

Possibility to rename each color

The Advantages of Overall Theme Styles:

You can customize your theme-defined HTML elements which usually don’t belong to Elementor. Among them, we find the typography of titles H1, H2, buttons, images, and form fields.

As an example, I applied to all my H2 a “red-Bordeaux”, all my titles have been updated on my WordPress site:

Elementor control panel: global adjustment of my tracks

Part 2: What Changes in Elementor Theme Builder

Since 2018, Elementor Pro is no longer a simple website builder like WPBakery, Fusion Builder, or even SiteOrigin. Instead, Elementor has also become a theme builder so that you can design, without coding, ALL of your site. You create not only the pages but also everything that goes around.

The “Theme Builder” allows you to control every part of your WordPress site on a single screen: the header, the footer, the layout of your blog posts, the archives, the famous 404 page as well as the WooCommerce pages.

A few weeks ago, using React technology, Elementor decided to centralize your site’s content so that each category is accessible quickly. Take a look for yourself:

Elementor used “React” technology to quickly move from one part of the site to another.

To use this Theme Builder, follow the following steps:

1. Go to any page built with Elementor and click on the hamburger menu available from your Elementor control panel.
2. Click on “Theme builder”
3. You can now edit all parts of your site

In this important update, what really matters is the workflow and the organization of the information. By centralizing all the options and by reorganizing the way to modify each part of the site, I can confirm it, it was a game-changer for finding each element but also for teamwork.

Conclusion

Elementor is arguably the most potent Freemium Website Builder on the market. It is precisely because it is “freemium” that he has had this great success. But it is not the only reason.

Indeed, it has shaken up the “codes” for building a website with WordPress, even making you forget the notion of “theme” and the place they took in terms of design until then! Now, it is no longer essential to choose your theme well because of the features that Elementor offers.

If you have any questions, please join our Theme Rally Community to ask your questions.