Designing a professional looking website wasn't for everyone, especially as we all felt like we absolutely needed to be a coding and web design professional. Nowadays, we see new tools emerging for the WordPress ecosystem, in order to provide an ever simpler solution to designing a website and this within the reach of the most beginners.

Regarding the design of WordPress layouts, we already had to submit the plugin Visual Composer, which is definitely one of the best tools when it comes to layout design. It should be noted however that this solution is not suitable for everyone. This is the reason why in this tutorial, we will introduce you more to the WordPress Plugin Elementor, which is a WordPress Plugin freemium (free, but extendable under subscription).

Where to get Elementor for WordPress

We are seriously considering getting you to see the potential of the plugin, and the free solution will help you get started without paying a penny. This free solution is available on WordPress.org. Being a WordPress Plugin, the latter is installed like any other plugin from the dashboard. 

If the plugin manages to satisfy you completely, you will be able to obtain the complete license with all the functionalities on the site official elementor.

Main features of Elementor

Before starting the tutorial with an overview of the plugin, we will first introduce you to the main features of the plugin (free version and full version).

Free Version Full version
Multiple Columns Navigation menu, article
Modules Texts, Titles Modules WooCommerce (products, categories)
Video Modules, Image, Carousel, Galleries, Soundcloud Facebook integration (page, button, comments)
Sharing module Table prices
HTML module Portfolio, Form
Module for WordPress widget Research Module

 

Note that this is a somewhat exhaustive list of the different features offered by the plugin. You will find more details in exploring their website.

Get started with Elementor

We are not going to cover the entire installation process here. Since this is a WordPress plugin, the installation procedure has already been explained in a previous tutorial. However, after installation, you will be taken to the plugin's home page.

delementor.png presentation page

If you have this page on your screen, then you have correctly installed the Elementor plugin. We are currently using the full version for this tutorial, but the interface shouldn't be too different from the free version.

Before going to the editing interface, I will invite you to register your license. This is only valid for those who have opted for the full version. If you have the free version, you can go to the next section. To register your license, you will notice a notification on WordPress that will prompt you to register your license.

notification plugin elementor.png

You just need to click on it to go to the registration page and click on Activate.

registration of a license elementor.png

You will normally need your confirmation page if your license is valid.

active license elementor.png

If you do not arrive at this page, I invite you to contact the developers of the plugin for more assistance with the problem.

How to use Elementor

Elementor works on Pages and Posts on WordPress. Whether you're using the classic interface or the new Gutenberg interface, you'll see a button that will prompt you to use the Elementor builder.

constructor elementor.png

In practice, you won't always need to edit your posts using Elementor. I therefore invite you to use the plugin only on the pages. By clicking on the button, you will access the Elementor design interface which gives an air of déjà vu (for those who use the WordPress Customizer).

presentation interface elementor.png

So you have on the left the various controls offered by the plugin and on the right, you have the live preview of your changes. In this tutorial, we are using the Twenty Sixteen WordPress theme.

Elementor sections

Sections in Elementor are groups of blocks of functionality that Elementor offers. The number of sections depends on whether you are using the full version and whether you are using WooCommerce, Yoast SEO or other compatible plugins. Depending on these conditions, you will have more or fewer sections on your interface. Since we are using the full version with the plugin WooCommerce activated, this is what our interface looks like.

section elementor.png

How to place an Elementor block

Once you expand a section, you will find the Elementor Blocks. The various Elementor blocks are placed by "Drag & Drop" on the area highlighted with dotted lines.

add blocks elementors.png

How to choose a layout on Elementor

Before adding a block on Elementor, you need to remember to choose a layout by clicking the "+" button on the highlighted section.

choose a layout elementor.png

Depending on your needs, you will choose the layout that is best suited. Once you've chosen a layout, you have a representation of that section on the same area highlighted. This section will display the same number of columns corresponding to your choice. In my case, I chose a column with 3 columns.

elementor section with zone.png

The different blocks with a "+" sign inside, are the areas that can accept Elementor blocks. If you add an Elementor block without choosing a layout first, the single column layout will be chosen by default.

Elementor sections can be reordered among themselves, following the same “drag & drop” principle. You can also delete a section, if you no longer wish to use it.

moving a section elementor.png

Here is an example of a section which contains 2 blocks namely the title block and text block.

section element with 2 blocs.png

How to use other design tools

After you've finished your design, one of the things you'll want to do is save your work. You will find this option at the very bottom of the section displaying the different Elementor sections.

elementor.png backup

You can choose to save directly (Publish), and save as a draft or as a template. We will explore these different points more later.

During your design, you may also want to preview the changes without the additional interface of Elementor. All you have to do is click on the eye icon.

preview of changes elementor.png

It happens that during the design, an error occurs (an involuntary action). In this case, Elementor offers a history, which allows you to navigate through all your actions.

actions elementor.png

This will allow you to easily go back.

The "Browser" option, which comes just before the history button, allows you to further modify the different sections in relation to the browser used by visitors. This option gives you access to advanced modification of section structures (column width). You have to make changes here very carefully.

browser option elementor.png

The "Settings" button allows you to modify certain options specific to the page such as the title, the featured image or the status among others.

elementor.png settings

That's it for this tutorial, we will explore Elementor more in our next tutorial. Do not hesitate to take a look at the Official website which offers much more successful examples.