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… Read More »

The post How to Create Custom WordPress Layouts With Elementor appeared first on WPBeginner.

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.

The post How to Create Custom WordPress Layouts With Elementor appeared first on WPBeginner.

How to Create Custom WordPress Layouts with Beaver Builder

Do you want to learn how to create custom page layouts in WordPress? Beaver Builder allows you to create your own page layouts without writing any code. In this article, we will review Beaver Builder and show you how to create custom page layouts in… Read More »

The post How to Create Custom WordPress Layouts with Beaver Builder appeared first on WPBeginner.

Do you want to learn how to create custom page layouts in WordPress? Beaver Builder allows you to create your own page layouts without writing any code. In this article, we will review Beaver Builder and show you how to create custom page layouts in WordPress with Beaver Builder.

Creating custom page layouts in WordPress with Beaver Builder

Why and When you Need Custom Page Layouts

Many premium WordPress themes come with ready to use page layouts for different sections of a website. However, sometimes a built-in layout may not fit your needs.

You can create custom page templates in WordPress by creating a child theme and then adding your own page templates. But you will need some knowledge of PHP, HTML, and CSS for that to work.

This is where Beaver Builder comes in. It is a drag and drop page builder plugin for WordPress. It helps you create your own custom page layouts without writing any code.

Beaver Builder Review

Beaver Builder is very easy to use and beginner friendly. At the same time, it is loaded with incredible features to create professional looking pages.

It works with all WordPress themes and has tons of modules that you can just drag and drop to your page. You can create any kind of layout that you want and set it up just the way you imagined.

In this Beaver Builder review, we will show you how to use Beaver Builder to create custom page layouts in WordPress.

Let’s get started.

Setting up Beaver Builder Plugin

First you need to purchase the Beaver Builder plugin. It is a paid plugin, with pricing starting from $99 for unlimited sites.

Next, you need to do is install and activate the Beaver Builder plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Page Builder page to enter your license key.

Entering your Beaver Builder license key

After entering your license key, you are now ready to create beautiful page layouts.

Creating Your First Custom Page Layout With Beaver Builder

Simply create a new page in WordPress by visiting Pages » Add New. You will notice a new Page Builder tab in the WordPress editor.

Add new page with page builder

Click on the ‘Page Builder’ tab to launch the Beaver Builder.

If this is your first time using Beaver Builder, then you will see a welcome popup offering you a guided tour.

At this time, you can click on No Thanks button to skip the tour. Since, we will walk you through different features in this guide, so you don’t need the tour.

After that you need to click on the Templates button in the top menu.

Choosing a template for your page layout in Beaver Builder

Beaver Builder comes with some professionally designed templates to get you started right away.

Don’t worry, you can customize the template as much as you like. It is just a quick way to get you started with a layout.

Choose a template for your page layout

When you select a layout, Beaver Builder will load it in the preview window. Take your mouse to an item and Beaver Builder will highlight it.

You can simply click on the wrench icon on any highlighted item to edit it.

Editing layout in Beaver Builder plugin

Beaver Builder will show a popup with different settings that you can edit. You can change text, color, background, font, padding, margin, etc.

You can also just click on an item in the live preview and drag and drop to move it around the page.

The Beaver Builder layouts are based on rows. You can drag and drop to rearrange rows. You can also remove or add a new row.

Simply click on the Row Layouts menu and then select the number of columns you want in your row.

Adding a row to your page layout in Beaver Builder

Beaver Builder will add the row to the live preview on your site.

You can add items to your row using the basic or advanced modules and widgets. These modules allow you to add the most commonly used elements like buttons, headings, text, images, slideshows, audio, video, etc.

Simply select an item and drag it to the row you just added. Click on an item to edit its properties.

You can also save a row or a module to reuse later on other pages. Click on Save as button while editing a row or module.

Save a module to reuse later

Click on the Done button when you are finished editing your page. Beaver Builder will show a popup with buttons to publish or save your page as a draft.

Save your page layout in Beaver Builder

You can also reuse an entire page layout for other pages on your WordPress site. Simply open the page with Page Builder and then click on the Tools button in the top bar.

Beaver Builder will show you a popup. You can save the page as a template, or quickly create a duplicate page with the same layout.

Save layout as template

Managing Page Layout Templates in Beaver Builder

Each Beaver Builder license entitles you to use it on unlimited websites. But how do you move your page templates from one WordPress site to another?

Beaver Builder stores user created templates in a custom post type called templates. It is hidden by default, but you can make it visible by going to Settings » Page Builder and clicking on the Templates tab.

Simply check the box next to ‘Enable Templates Admin’ option and click on save template settings button.

Show template admin

You will notice a new menu item labeled Templates would appear in your WordPress admin bar. All page layouts that you save as template will appear on that page.

Since it is a custom post type, you can easily export your Beaver Builder templates using the built-in export feature in WordPress.

Visit Tools » Export page and select Templates. Click on ‘Download export file’ button and WordPress will send an XML file for you to download.

Exporting templates

Now login to the WordPress site where you want to import the templates. Visit Settings » Import page and click on WordPress.

You will be asked to download and install the WordPress importer plugin. After which you will be able to simply upload your templates xml file and import it.

That’s all, we hope this article helped you create custom page layouts in WordPress using Beaver Builder. You may also want to see our guide on how to hide unnecessary items from WordPress admin with Adminimize.

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.

The post How to Create Custom WordPress Layouts with Beaver Builder appeared first on WPBeginner.