software-folder-mag-wordmark-2NEG300.png

Elementor Custom Page Design & Templates

Software Folder dot Design | BUSINESS​​

Create and Share Your Own Custom WordPress Template Designs

elementor page builder imac 960
Download Elementor Pro

In a hurry or just need to know where to find the Template Import / Export options?

Click the IMPORT / EXPORT button  below.

About Elementor Pro Custom Page Design & Templates

A basic step-by-step for creating custom templates that you can use with your different WordPress projects.

IMPORT / EXPORT

The following is a simple and basic step-by-step to creating and sharing templates using the Elementor Page Builder for WordPress. This post has been designed to help familiarise yourself with the process, prior to venturing off on your own.

Please note that you can build templates from scratch or adjust an existing one. The process involves generating a .JSON / Zipped file. 

A good exercise for unraveling how Elementor works is to deconstruct an existing template that you like.

Step One | Elementor Templates

Create a page to customise and build your template

In a new or existing WordPress site with the Elementor page builder plugin installed, create a new WordPress Page.

Give the Page a name and ensure that you have Page Attributes set to Elementor Full Width. (do this before the next step).

name page

Click image to enlarge 

Step Two | Elementor Templates

Select Elementor Edit mode

Select the Edit with Elementor button to open a new Elementor “canvas.”

edit with elementor button

The resulting “canvas” may inherent some attributes from your installed theme. Nonetheless, regardless of the layout you are presented with, you can start adding content elements to your page.

add elements
Select an Element (Widget)

Click the (+) button to add your structure i.e. single, 3 column etc,

select structure
Select Structure

In this case, let’s start by adding a container for holding all the main, “above the fold ” content.

In basic language, select a single column grid structure and use this for holding other relevant  items. This will include your background image or colour, a title and some text, plus a call to action button.

Next add your background image by following this method:

The idea here is to import a background image on which a layer of text and a button can be applied. As in the example shown below.

elementor page builder land page example 2

Step Three | Elementor Templates

Add a background Image to your page.

structure
single column structure

First, add what I call a “single column grid structure,” then add a 2 column grid element inside the single column grid structure.

inside container

Select the blue handle and click the icon made up of 6 dots shown in the diagram. 

With the blue handle selected, select Style in the top left hand column tab options. This will allow you to select and edit the background. 

This is where you can also upload a background image.

background image in container

Click image to enlarge 

Step Four | Elementor Templates

Complete and save your designs layout as a template.

Now, this is really simple. Once you are happy with your layout, saving it as a template is a calf clicking the arrow near the PUBLISH button.

This will reveal the save options. Now select Save as Template.

save as template

The Save Page to Library window will open, allowing you to name your template. Name your template and click Save

save page to library
Select an Element (Widget)

Step Five | Elementor Templates

Insert / Export (.JSON) Template File.

Inserting a pre-made template, or one of your own, requires you to click the folder icon rather than the usual (+) Add New Section button. This will open the templates window. If you are presented with the pre-built templates Pages, select My Templates.

export json template file

Click image to enlarge 

import json template

Click image to enlarge 

add template select folder icon 1
Screenshot 2019 09 05 at 13.27.49

Click image to enlarge 

Insert Your Own Template Summary:

1. Select Add Template folder icon

2. Select the My Templates tab

3. Insert selected template to current page.

On the other hand you may want to Export a .JSON file of your template, in order to Save with the Library of another WordPress website that has Elementor installed (see example).

Elementor case study:

apg website screenshot2
ELEMENTOR PRO

You may also be interested in these...

mystic-space-ranger-1200-x-900-orange-back

NFT Artwork Explained

May 15, 2022 No Comments

NFT Artwork Explained So Far. Is a Decentralised Web Perhaps Too Secure for Human Nature? Join Our Fun Journey of Exploration. Any excuse to create art…

Read More »
astra responsive theme plus
ub ultimate addons

Elementor Addons • BeaverBuilder • Learn about ThriveThemes and the Thrive Architect Page Builder

Products
Get Started
About
Other
blue star 300
HANDBOOK
ART SUPPLIES
PHOTO EDITING

CreaTOR Friendly
PRO PHOTO EDITING

Reach Satisfying Results Fast.
The most intelligent photo editing software you can find today. Perfect for portraits, landscapes and creative photography…

LUMINAR AI
LUMINAR NEO
Software by Skylum
luminar-ai-2