Get Started with Building Custom WordPress Templated Layouts for Your Client Projects

Yes, there’s a Plugin for that too…

Have you always wanted to have more control as to how your WordPress website pages look?

And what’s about an easy way of sharing layouts across different WordPress projects?

Sounds good, right? Well, the thing is you’ve had this capability for some time, but maybe didn’t realise just how simple it is with Elementor Pro. 

You see, creating web pages in the much earlier versions of WordPress was a matter of editing your content in a somewhat blind mode, and then clicking preview to see if your changes have taken effect.

I know, sounds crazy right? well things have moved on. Especially with the movement towards creating a more intuitive experience building website page layouts using WordPress. You should read a previous post on three fine examples of WordPress page builders that have emerged during this movement. 

So, assuming that you have gone through the process of;

hover logo blue sq

1. Registering a domain name...

TIP: Manage all your domain names from a single place.

siteground logo

2. Selecting a WordPress Website Hosting Plan...

TIP: Manage all your domain names from a single place

Build Custom Templates for Agency & Studio Projects

Let’s get started with the first step, building a custom layout, then saving it as a template, and finally exporting it for use with another WordPress project.

STEP 1 | ADD NEW PAGE or POST

add-posts-or-pages.png

After selecting Add New Page or Post, use the default, or select a specific page attribute. The options available may differ from one WordPress Theme to another. This may be necessary to determine the layout of your pages and to differentiate between, say, a blog post, landing page, article featuresand other pages you may have

STEP 2 | DRAG & DROP ITEMS

drag and drop component widgets

Now start constructing your page by dragging widget components to your blanc canvas. Typically you may want to start with a header and menu. 

Elementor allows you to save both customised headers and footers for desktop and smartphone viewing. Which, you can also vary your designs or configurations for applying to specific pages,

STEP 3 | SAVE AS TEMPLATE

Select the Publish button arrow and choose the Save as Template option…

devices-display-elementor

Check that your layout works across different devices; Desktop, Tablet, Mobile.

wp-elementor-save-as

Saving your templates

Name your template and click save

save template to library

STEP 4 | IMPORT & EXPORT TEMPLATES

Once your template is available in your My Templates library, you may export it as a JSON file, which can then be imported into your other WordPress projects running Elementor Pro.

template-import-export
luminar-ai-update-3-1.3-with-native-m1-support-2
Artificial Intelligence
Kay Samuel-Francis

Luminar AI Update 3 with M1 Support

The Best of Luminar AI: Free Update for Existing Luminar AI Users. Luminar AI Update 3 Enhancements Include; Better Sky Positioning and Alignment, M1 and HEIC Support, Awesome Reflection and Relighting

Read More »
best-of-print-on-demand
Fashion
Kay Samuel-Francis

Best of Print-on-Demand

Best of Print-on-demand Real software and platform solution for print-on-demand and customer fulfilment.  A FEATURED POST One of the first roadblocks for most people just

Read More »

Email & Engagement Marketing Tools

software-folder-gravity-forms.png
Gravity Forms
contstant contact form email easy
Constant Contact
software-folder-mag-wordmark-2NEG300.png

Disclosure: Please bear in mind that some of the links on this site may be sponsored links and if you make a purchase I may earn a commission. Please also keep in mind that the companies and the products I mention are ones that I use myself, or have tried. And are mentioned for their quality or usefulness I have experienced myself

Close

Search options

Standard search

Enhanced search