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.
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 WordPress themes Both free and premium offer multiple layout choices for different types of pages. However, sometimes none of these template layouts 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 need 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.
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.
So much to see... 8 WordPress plugins to manage roles and users
Do not forget to click on the button « Save Changes To save your settings.
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.
Clicking on it will launch the Elementor UI where you can edit your page using the visual page builder with drag and drop functionality.
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.
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.
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.
You have the option to add elements in your columns and sections using the widgets that Elementor offers.
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.
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 others WordPress plugins on your website.
Once you have finished creating your own or modifying your layout, you can click on the button " Save To keep your changes.
Please note:: 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.
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 appearance and to optimize the handling 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.
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.
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.
As features you will find among others: several unique product page templates, many visuals to create product pages WooCommerce, many 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:
- JetPlugins - Best Mods to Build Website with Elementor Page Builder
- 15 Themes and Elementor Templates to Create a Web Site
- Monstroid 2 - Easily create your website with Elementor
- How to configure deliveries on WooCommerce
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.
...
How to make 2 columns so that on a smartphone there are still 2 columns? sorry newbie
Hello
just leave your default two column section on all devices. But generally, it would be interesting from an aesthetic and user-friendly point of view to transform a section of 2 columns into a column on a smartphone
cordially
Hello Thierry!
Many thanks for this great post.
I use ELEMENTOR PRO and I created a page in which I downloaded via ELEMENTOR a layout already built. However, I do not understand, this one is found in ALL my website ... all my web architecture has changed and it is this layout that I find in all the pages of my site. On the other hand, the old layout has not been deleted but is found at the bottom of the page. When I click on “EDIT with ELEMENTOR” I can't delete it… any idea where it comes from?
A big thank-you!
Hello Thierry
From the bottom of my heart thank you very much for the article. Now I have a concern that has been bothering me for a few days, I am new to wordpress and I use ocean WP as a theme and then I installed elementor as a free version so with this free version I started by creating my pages and that's good but the problem that arose to me is that when I publish my page or the article once I have it the capital letters do not appear after a point or at the beginning of my sentence is it necessary settings on the typography or on the font family chosen in short to help me better understand where it is the free version which does not have the capital letters after a point. Thanks for understanding.
Hello,
I recommend that you contact Elementor plugin support on its WordPress.org page. You will certainly find an answer from the authors.
Hello, can you use Elementor to change the start page? If yes where? Can I create a contact form using this plugin? 🙂
Hello,
Yes Elementor is very complete.
Hello
I created my homepage via the custom tab of my wordpress interface. Why do not I find the same in elementor? on elementor my menu bar is not in the same place and I do not have my logo that appears! I prefer the one on wordpress but when I do a visualization of my site is the homepage of elementor that appears! Can you tell me how to do it?
Thanking you p
sorry I forgot to mention that I use the theme oceanwp!
Hello,
We have never tested Elementor with your theme. sorry.
Hello,
I have a problem For a few months, I have not updated my website where I use this element; today i tried to do it but i have a problem most of the sections show me a crossed out box with the word OFF SECTION and there is nothing I can do. I can only edit one section of the page, the one where I have the text itself.
Do you know what it can work?
hi, how and where do you edit an archive template in elementor pro? I cannot insert content in the blog side column
Hello Valentina,
Do you use WordPress widgets directly? What kind of content do you want to add?
Hello,
I'm learning how to build a website with WordPress, Elementor is a great plugin, it helps a lot, I discover something new.
Also problems;) I usually deal with solutions. Not now.
I have a problem with text editing. The paragraph and the headings are both rigid and I cannot change the font, color, weight, etc. Despite the changes in the settings, nothing changes. It's not a pattern issue, as it has a different typeface and color scheme from what Elementor gives me.
I don't know how to change this template parameter happened to me even with header 1, but I changed it by entering html code in the header and helped, now it doesn't work.
How will this change? - please help.
Hello,
Try to disable all WordPress plugins and try again. If your problem is solved when they are all disabled, start by activating them one by one then check each time.
If it's a compatibility issue with another plugin, you'll know which one.
Bonsoir.
I added a photo on the site (Landing Page) and I was trying to change to another one I couldn't… delete several times and I put the new photo but it does not load… the old photo remains…
Would you be able to help me?
Hello
Have you checked the cache of your WordPress site?
Hello and thank you for this article which confirms my choice of Elementor as my page builder. ^^
On the other hand, what do you think of the creation of a child site before modifications. Is this necessary with Elementor?
My fear is that all changes made will be overwritten when updating the theme? Isn't there a risk?
Thanking you for your answer,
Sincerely.
Nicolas
Hello,
Never tested. did you contact their support?
Hello and thank you for this very interesting article.
I started using Elementor and was wondering if there is any need before I proceeded to make a child theme of the one I am using. Otherwise, is there not a risk that the updates of the theme or plugins will all overwrite the layout built with Elementor?
Thanking you for your return,
Hello,
I would like to know how to get the PHP code of the ELEMENTOR extension to integrate it into my home page?
Thank you for your attention to my request.
Hello,
Unfortunately we don't have a solution for you, sorry.
Hello,
very interesting article.
I have a question for the pro elementor that you are.
Is it possible to add in the generated forms, a method = "POST"?
Jeanson
Hi,
Not yet tested. I advise you to contact the Elementor team.
very good article, gan want to ask, when i started going to elementor, or why it seems there is a header and footernya, how to look empty
Hello, I do not understand your question very well.