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, it 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.
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.
You just need to click on it to go to the registration page and click on Activate.
You will normally need your confirmation page if your license is valid.
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.
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).
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.
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 WooCommerce plugin enabled, this is what our interface looks like.
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.
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.
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.
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.
Here is an example of a section which contains 2 blocks namely the title block and text block.
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.
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.
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.
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.
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.
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.