Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create Custom WordPress Layouts With Elementor

Want to create your own custom page layouts in WordPress? Elementor is a drag & drop WordPress page builder that allows you to easily create custom WordPress layouts without having any coding knowledge. In this article, we will show you how to easily create custom WordPress layouts with Elementor with just a few clicks.

How to Create Custom WordPress Layouts with Elementor

Why and When Do You Need Custom WordPress Layouts?

Many free and premium WordPress themes come with multiple layout choices for different kind of pages. However, sometimes none of these layouts would meet your requirements.

If you know how to code in PHP, HTML, and CSS, then you can create your own page templates or even build a child theme for your site. However, majority of WordPress users are not developers, so this option doesn’t work for them.

Wouldn’t it be great if you could just create page layouts using a drag and drop interface?

This is exactly what Elementor does. It is a drag and drop 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 build custom layouts with a live preview. It comes with many ready to use modules for all kind of web design elements.

There are several professionally designed templates that you can instantly load and use as a starting point. It works with all standard compliant WordPress themes and is compatible with all popular WordPress plugins.

Having said that, let’s take a look at how to create custom WordPress layouts with Elementor.

Getting Started with Elementor

First you will need to purchase Elementor Pro plugin. It is the paid version of the free Elementor plugin and gives you access to additional features and 1 year of support.

Next, you will need to install and activate the Elementor plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Elementor » Settings page to configure plugin settings.

Elementor settings

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

You can exclude or include user roles that can use Elementor when writing posts or pages. By default, it is enabled only for administrators.

Don’t forget to click on the save changes button to store your settings.

Creating Custom WordPress Layout with Elementor

First you need to create a new page (or post) on your WordPress site. On the post edit screen, you will notice the new ‘Edit with Elementor’ button.

Edit with Elementor button

Clicking on it will launch the Elementor user interface where you can edit your page using Elementor’s drag and drop page builder.

Elementor builder interface

Now you can add sections and build your page from scratch, or you can add a template.

Templates are a faster way to quickly get you started. Elementor comes with several professionally designed templates that you can customize as much as you want.

Let’s start with a template by clicking on the ‘Add Template’ button.

This will bring up a popup where you will be able to see different templates available. You should look for a template that is similar to what you have in mind for your page layout.

Select and insert a template

Now click to select the template you like and then click on the ‘Insert’ button to add it to your page.

Elementor will now load the template for you.

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

Editing an item in Elementor

Now let’s talk about how Elementor layouts work.

Elementor layouts are built using sections, columns, and widgets. Sections are like rows 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 sections and columns in Elementor

You can add anything in your columns and sections using Elementor widgets.

These widgets are different kind of content blocks that you can place in your Elementor sections.

Simply select a widget and drop it into your section or column. There is an extensive set of widgets available that cover all popular web design elements that you can think of.

Elementor Widgets

You can add images, text, headings, image galleries, videos, maps, icons, testimonials, slider, carousels, and so much more.

You can also add default WordPress widgets and even the widgets created by other WordPress plugins on your site.

Once you are done editing, you can click on the Save button to save your changes.

Save and exit Elementor

Note: Saving a layout will not publish the page on your WordPress site. It will just save your page layout.

You can now preview your page or go to WordPress dashboard.

This will bring you back to the WordPress post editor. You can now save your WordPress page or publish it on your website.

Publish page

Creating Your Own Templates in Elementor

Elementor allows you to save your own custom layouts as templates. This way you can reuse your own templates to create new pages even faster in the future.

Simply edit the page you would like to save as a template with Elementor.

In the Elementor builder interface, click on the folder icon next to the save button and then select ‘Save template’.

Save your template

This will bring up a popup where you need to provide a name for your template and click on the save button.

Template name

Next time you are creating a custom page layout, you would be able to select it from the ‘My Templates’ tab.

Custom template

You can also export this template and use it on other WordPress sites using Elementor.

You will need to visit Elementor » Library page to see your saved templates. Take your mouse over to your template name and then click on ‘Export template’ link.

Export template

After downloading your template file you can go to the library page on another WordPress site using Elementor and then import your template.

That’s all for now.

We hope this article helped you learn how to create custom WordPress layouts with Elementor. You may also want to see our step by step guide on how to speed up WordPress and boost performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

19 CommentsLeave a Reply

  1. Is it bad to switch back and forth between customizer and elementor when building a website — does this somehow weaken the site? I am using Astra theme

    • You would want to stay with one editor as changing back and forth could change the markup you’ve added in your content.


  2. I’ve been too scared to install Elementor in case it messes with my theme. Does it? If not, I may well try it as I find Gutenberg blocks very limiting for setting out or designing my own pages.

    • By default it shouldn’t, if you reach out to Elementor they can let you know how it will react with your theme :)


  3. The Post is very useful. I am having a Property Listing website. I use Impress Listing Plugin for this. How to use the Custom Layouts or Templates created thus, in place of the default Listing Page. The info on the page says, that the Custom Layouts or Template has to be added the theme directory. How to do it. I am using a Child theme.

  4. Where does Elementor store its CSS in the file tree directory? Where can I find the file(s) it edits?

    Does it store anything in the database?

    I’ve looked for an answer to this for quite a while and can’t find anything.


  5. Are you saying you don’t need a to make a child theme when you use elementor?
    What will happen if you update the theme?

  6. is it possible to edit child theme, using elementor? specially in category layout.
    coz, even though i have a nice design in my “home” page, but when i shift to category, the design wont fit on the home page style.

  7. I’m trying to create my executive page with pictures and bio. How do I get started with that with Elementor?

  8. Does that mean you need to upgrade your account to business type? Because personal version doesn’t support template uploads.

  9. Is the resulting site responsive? Other similar apps boast they help create fully responsive sites and have found they are a complete let down.

    • I used the free version to design my homepage and it is fully responsive. This is a really great plugin and it does everything you could need in the free version! It’s so good that I plan to purchase the pro version just to support and thank the developer for such a useful plugin.

  10. Great walkthrough using the Elementor drag & drop page builder. Haven’t tried this one but it’s worth it.

    This could be a great alternative for the SiteOrigin page builder

    Thanks for sharing. Overall, nice to have for creating custom layouts with WordPress.


  11. I am using elementor in my blog and it shows me error “Internet server not found” when I going to edit my page with this plugin.

    • You should check their support page on their website. It has a lot of helpful troubleshooting tips.

  12. Thanks for the post.I have been looking for a plugin for this purpose to build a page for my site
    Thanks a lot

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.