Skip to Main Content

How to create a custom layout with Elementor

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.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. [Recommended]

Would you like to create your own custom layouts on WordPress? Do you want to easily create a website with a professional appearance? So you have to 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 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 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

Would not 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 publication. By default, it is enabled for your articles and WordPress pages. If you have custom publishing formats on your website, these will also appear here, and you can also enable them.

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 allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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.

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

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Just select a widget and drop it in your section or column. There is a huge set of widgets available that cover every popular web design element 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 while building your website. Powerful elements have been specially created to be integrated with the functionality of Elementor to finally provide you with versatile solutions and elegant 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 combines 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

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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:

That's all for this tutorial, I hope it will allow 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.

...

This article features 24 comments

  1. 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!

  2. 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.

    1. Hello,

      I recommend that you contact Elementor plugin support on its WordPress.org page. You will certainly find an answer from the authors.

  3. 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

  4. 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?

  5. 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.

    1. 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.

  6. 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?

  7. 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

  8. 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,

  9. 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.

  10. 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

  11. 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

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
23 shares
Share18
tweet
Save5