Connect with us

HTML + Shop

How to create custom design templates with Elementor in WordPress

Blog

How to create custom design templates with Elementor in WordPress

9th April 2018

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

create custome layout template with elementor

When Do You Need Custom WordPress Layouts?

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.

Lets install Elementor

  • Buy the Elementor Pro plugin. Paid version gives you access to more features and 1 year of support.
  • Go to WordPress admin, install and activate the plugin.
  • After activation, go to Elementor » Settings page and do the settings.
Elementor Demo
  • From Elementor settings page you can enable post types as well as custom post types. By default posts and pages are enabled. If you create custom post types it will show here and you can enable them here.

Custom WordPress Layout with Elementor

  • Create a new page/post on your WordPress site.
  • Now you are on page edit screen, you will see the ‘Edit with Elementor’ button.
Add new Page
  • Click on the button, it will launch the Elementor user interface where you can edit your page using Elementor’s drag and drop page builder.
Elementor user interface

You will see two buttons ‘Add New Section’ and ‘Add Template’.

Add new section form elementor interface
  • ‘Add New Sections’ will allow you to create page from scratch using different type of elements such as columns, heading, image, text editor, video, icons, etc. etc
  • Upon clicking template you will get popup with three tabs - Blocks, Pages and My template.
Blocks

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

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.

Now lets insert one of the template and edit it.

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.

Now let’s see 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.

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.

Create Your Own Templates in Elementors

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.