Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.

Would you like to create a layout with Elementor? Do you want to easily create a professional looking WordPress website? Then you must Download the WordPress Elementor plugin here.

 Elementor is a visual page builder that offers the "Drag and Drop" feature that allows you to easily create custom layouts on WordPress without any coding knowledge.

In this tutorial, we'll show you how to easily create custom WordPress layouts with Elementor with just a few clicks. We also offer you check out the other alternatives of this beautiful WordPress plugin.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

create a layout with Elementor

Why and when to create custom layouts on WordPress?

Before you start, you can discover on this WordPress plugin by consulting the articles Presentation of a WordPress builder page: Elementor or discovering the Elementor tutorial: Introducing the interface 

Many free and premium WordPress themes offer several layout choices for different types of pages. However, sometimes none of these layout templates meet your needs.

However, if you are a fan of PHP, HTML and CSS, you have the option to create your own page templates or even create a child theme for your website. But, the majority of WordPress users are not developers, so this option does not work for them.

Discover also these 8 WordPress plugins to easily create your layouts

So wouldn't it be great to create layouts using a simple interface (Drag and Drop)?

This is exactly what Elementor does. This is a WordPress page builder plugin that allows you to easily create your own custom WordPress layouts without any coding skills.

It has an intuitive user interface that lets you create custom layouts with real-time preview. It comes with plenty of ready-made modules for all types of web design elements.

It offers several professionally designed page templates that you can load and use instantly as a starting point. With that said, let's take a look at how to create custom WordPress layouts with the WordPress Elementor plugin.

Getting Started with Elementor

First you will need to purchase the plugin " Elementor Pro ". This is the paid version of the plugin " Elementor Free which gives you access to additional features and 1's customer support.

Then you will have to install and activate the Elementor plugin. For more details, see our step-by-step guide on way to install a WordPress plugin.

After activation, visit the " Elementor> Settings To configure the operation of this plugin.

elementorsettings

Here you can activate “Elementor” for different types of posts. By default, it is enabled for your WordPress posts and pages. If you have custom post formats on your website, those will also appear here, and you can enable them as well.

You will be able to exclude or include user roles that can use Elementor while writing posts or pages. By default, it is enabled only for administrators.

Discover our 8 WordPress plugins to manage roles and users

Do not forget to click on the button « Save Changes To save your settings.

Easily create your website with Elementor

Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.

Creating a custom layout with Elementor

First, you need to create a new page (or post) on your WordPress website. On the post edit page, you will notice the new "Edit With Elementor" button.

Edit with elementor

Clicking on it will launch the Elementor UI where you can edit your page using the visual page builder with drag and drop functionality.

Drag and drop elementor

You can now add sections and create your page from scratch, or you can still load one of the default shipped templates.

Models are a faster way to get started quickly. Thus, Elementor offers several professionally designed templates that you can customize as much as you want.

Let's start with a template by clicking on the button " Add a template ».

This will display a pop-up window where you can see the different models available. You should look for a model that looks like what you want. 

Layout elemntor plugin

Now click to select the model you want, then click on the button Insert To add it to your page.

Elementor will load the template for you.

You can now start modifying the template to suit your needs. Just point and click on any element to select it, and Elementor will show you its settings in the left column.

Start of page editing on elementor

Now let's talk about how Elementor's layouts work.

The models offered by the Elementor plugin are built on sections, columns and widgets. Sections are like lines or blocks that you place on your page.

Each section can have multiple columns and each section and column can have its own styles, colors, content, etc.

Editing a page with elementor

You have the option to add elements in your columns and sections using the widgets that Elementor offers.

Do you want to sell your products on the internet?

Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.

These widgets are types of content blocks that you can place in sections of your pages.

Just select a widget and drop it in your section or column. There is a huge set of widgets available that cover all the popular web design elements you can imagine.

Element e design with elementor

You can add images, texts, topics, image galleries, videos, maps, icons, testimonials, sliders, carousels and much more.

See also our 15 Elementor themes and templates to create a website

You can also add default WordPress widgets and even widgets created by other WordPress plugins to your website.

Once you have finished creating your own or modifying your layout, you can click on the button " Save To keep your changes.

Customize the layout with elementor

Remark: Saving a layout will not publish the page to your WordPress website. It will simply save your layout.

At this point, you have the option to preview your page or go to the WordPress dashboard. Which will bring you back to the default WordPress post editor. You can now save your WordPress page or publish it to your website.

Layout publication with elementor

That's it, so finished creating a page with the WordPress Elementor plugin.

But like many page builders, it also offers extensions which will allow you to easily and quickly create new layouts by bringing more design elements to the default plugin.

Download Elementor

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. JetElements 

This plugin will enhance your Elementor bundle with a wide variety of modules which will be extremely useful when building your website. Powerful elements have been specially created to integrate with Elementor's functionality to provide you with versatile solutions and stylish elements.

Elementor wordpress plugin jetelement

Its main features are: many useful modules, containing many style options, functional parameters and absolutely customizable elements, incredible elements to quickly launch your online store, support for RTL languages, WPML plugin support and a module Contact Form 7 amazing, which allows you to add your contact forms and embed them into your website.

Download | Demo | Web hosting

2. JetMenu 

JetMenu is an extension very functional plugin Elementor, which allows you to create megamenus with easy-to-use scrolling elements. This plugin does not limit your imagination and has the potential to create amazing menus and revamp them according to your vision and your needs.

Jetmenu wordpress elementor plugin

Its main features are: No coding knowledge is required, rich features that combine perfectly with simplicity and clarity, a large selection of content modules, specially developed to help you create your menus, a highly responsive layout, and more.

If you want to spice up the menus or megamenus of your website, this WordPress plugin is to consult.

Download | Demo | Web hosting

3. JetWooBuilder 

JetWooBuilder is a must-have addon that lets you create fully-fledged WooCommerce product pages with Elementor.

Jetwoobuilder wordpress elementor plugin

As features you will find among others: several unique product page templates, many visuals to create product pages WooCommercemany eye-catching content widgets, such as Add to cart, Preview, Image, Rating, Related and many more, the ability to display product taxonomies and more.

Download | Demo | Web hosting

Some useful resources:

Conclusion:

Here is ! That's it for this tutorial, I hope it allows you to create modern and professional layouts with the plugin Elementor.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

Especially share this article on your different social networks.

...

24 shares
Share18
tweet
Save6