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
measure image
Instant Articles
Brian Francis

Google’s SiteKit and Web Stories for WordPress

Site Kit and Web Stories by Google are definitely 2 WordPress Plugins to add to your list of content creation and marketing tools. Web Stories for WordPress is particularly impressive for ease of use and the quality of results.

Read More »
Oribi-analytics-and-marketing
Instant Articles
Brian Francis

What is Oribi?

INSTANT ARTICLE What to do with your analytical data? In short, Oribi is a relatively new platform that simplifies the whole practice of setting up and monitoring

Read More »
Oribi-analytics-and-marketing
Uncategorized
Brian Francis

Oribi and Google Analytics

Oribi is a relatively new platform that simplifies the whole practice of setting up and monitoring the performance of your website.

Read More »

Email & Engagement Marketing Tools

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

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