Creating custom page/post layouts with Elementor is easier than ever. It is a drag and drop page builder which allows you to make custom layouts in few clicks. Follow through the tutorial to know how easy it is to create custom layouts in WordPress with Elementor
Most of the WordPress themes has choices for layouts for different kind pages, but for some pages you need different design/layout which is not available in the theme you have. If you are a developer and you know how to create child theme, then you can create your own template. However, majority of WordPress users or Designers are not developers, so this option doesn’t work for them. This is where Elementor comes handy.
This WordPress page builder allows you to drag and drop elements and create custom layouts without any coding skills in WordPress. It has an intuitive user interface that allow you to create custom layouts with a live preview. It has lots of ready to use templates, ready made blocks for all kind of design elements. It works with all standard compliant WordPress themes and is compatible with all popular WordPress Plugins.
So lets jump into WordPress and start creating some layouts using Elementor.
You will see two buttons ‘Add New Section’ and ‘Add Template’.
Blocks contains commonly used elements like header, footer, faqs, contact, hero, portfolio and many more, which you can insert into your page.
You can edit content on the fly, make css changes like margin, padding, background image, etc. etc. and create layout as you need it.
Pages contains many beautiful ready to use layouts which you can insert into your page/post, edit as you like and use.
My templates - is the section where you create your own template from existing template or totally new which can be used for creating new unique page.
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.
From Layouts tab, you can go for full stretch layout by just clicking switch on/off from left panel.
From Style tab you can add background image to your block, do all possible css with just selection and settings.
From Advanced tab, you can set margin, padding, etc. So you have full control over how you want your page to have desired layout.
You can decide how want to show your design on mobile, tablet. You can change the css on the fly for responsive layout.
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.
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’.
This will bring up a popup where you need to provide a name for your template and click on the save button.
Next time you are creating a custom page layout, you would be able to select it from the ‘My Templates’ tab.
Below is the video for "Ellementor Page Builder for WordPress"
We hope this article helped you learn how to create custom WordPress layouts with Elementor.