Elementor Theme Builder: Construct your whole WordPress website by dragging and dropping


Energetic on greater than two million WordPress websites, Elementor is, in figures, one of the well-liked WordPress web page plugins.

Nonetheless, though the software program began as a web page builder, now you can use it to create rather more than simply pages.

With Elementor Professional – the premium add-on at $ 49 + – you may create all of your WordPress theme – header, footer, weblog format, and many others.

Sure – the implications are precisely what you suppose – you may principally construct 100% of your WordPress website utilizing Elementor's drag-and-drop video editor … and that's superior.

On this assessment of the Elementor themes creator, I’ll clarify how this highly effective characteristic works and what it means that you can do.

Then, ultimately, I'll reply some scorching questions you may need, for instance should you nonetheless have to fret about your WordPress theme should you use the Elementor Themes Builder.

How the Elementor Theme Builder Performance Works

As with the operation of the Elementor window builder, the factor theme builder means that you can take precisely the identical visible interface, drag and drop, which one can find within the free Elementor plugin on WordPress.org and the apply to the design of your mission. WordPress theme.

Concretely, this implies that you could design the location of your website:

In your thoughts
Archive Pages – Consider this as your international weblog listing web page, though you too can create archive pages for different varieties of content material.
Easy Pages – Consider this as a person weblog put up, though you too can create distinctive pages for different varieties of content material.

And should you function a web based retailer, you too can design your WooCommerce retailer and your product pages.

Principally, this lets you construct your whole WordPress website with Elementor. In different phrases, you may create every little thing customer sees.

That will help you construct the precise pages, Elementor gives you a ton of latest widgets . For instance, to create the construction of your particular person weblog posts, you’re going to get new widgets to show the title and content material of an article (straight from the WordPress editor).

Lastly, you may conditionally apply these fashions to totally different elements of your website, which is a really highly effective characteristic. For instance, you may create a devoted structure just for a particular class of messages.

Don’t worry if every little thing continues to be a bit blurry for you. By working intently with the Elementor Theme Editor, you’ll higher perceive how every little thing works.

Be taught extra about Elementor Themes Builder

The right way to use the Elementor Themes Builder

Now that the fundamental options, let's go to slightly extra tutorials and tutorials and I'll present you the way every little thing works.

This could offer you a greater thought of ​​how every little thing is coming collectively that will help you construct your WordPress website.

Let's begin from the start. I’ve a primary WordPress website utilizing the Astra theme. Right here's what it appears like earlier than utilizing the Elementor Themes Builder:

Now, I'll clarify how the Elementor Themes Builder works, and also you'll see how each change made to Elementor impacts this primary web site.

Creating a brand new mannequin in Elementor Themes Builder

The Elementor Themes Builder makes use of a template system. To entry this space, you go to Fashions → Theme Builder → Add New.

From there, you may select the kind of template you wish to create. That is the precise a part of your theme that you’re designing:

In your thoughts

Let's transfer now to the totally different elements …

Constructing Your Header

If you begin creating your header, you may select from 13 predefined header templates or create your personal from scratch:

Then you may design your header utilizing the usual Elementor interface. You’ll be able to see that I imported one of many fashions above:

Nonetheless, a number of distinctive issues occur. For instance, I didn’t add an everyday picture widget so as to add the brand, nor so as to add menu hyperlinks as normal textual content widgets.

As a substitute, I used these new website widgets to dynamically extract this content material from my present website's information:

For instance, Elementor extracts the brand from the brand website that I’ve set within the customizer, in addition to the menu menu hyperlinks that I've set by accessing Look → Menus .

Should you change the Nav Menu widget you may see it. And you too can see how Elementor provides you with many choices for its operation:

It is a key factor within the operation of the Theme Builder. That is not static. As a substitute, the theme builder helps you dynamically extract info out of your website.

Then, while you publish your mannequin, it is possible for you to to decide on precisely the place to use this mannequin.

For instance, you may apply this header to the location scale in order that it serves as a header on each web page. You may as well goal it to particular content material, which might let you create totally different headers for various kinds of content material:

And as soon as I make it dwell, you may see how Elementor replaces the present header of my theme with the header I simply created in its interface:

Constructing Your Footer

I'm going to go slightly sooner now as a result of I feel you will have the fundamental thought.

Making a footer is an identical to a header and also you'll get the identical alternative of widgets Website with over 16 predefined footer templates to select from.

As with a header, you may design your footer utilizing the drag-and-drop visible interface:

Then, while you publish it, you should utilize these identical guidelines to focus on it on the entire website or on particular content material.

And now, if I scroll down the display to the underside of my dwell website, you may see how Elementor changed the default Astra theme footer with the footer I simply designed:

Creating the archive web page of your weblog

Properly, so that you created your header and footer, however what about your present content material? Your posts and pages?

For weblog posts, the puzzle has two elements:

Archive – That is the web page design that lists all of the articles in your weblog.
Single – it's about designing every weblog put up.

Elementor Professional means that you can create each – let's begin with the archive.

To start, you may select from eight patterns or begin from scratch. From there, the fundamental idea is analogous, besides that you’re going to get a special set of widgets:

Should you edit the Archive Posts widget it is possible for you to to regulate the structure rather a lot, together with multicolumn designs, picture dimension, metadata, and so forth. For instance, you may swap to a multi-column map strategy like this:

If you publish it, it is possible for you to to regulate the place it seems once more. You should utilize it for all of your archives. Or, you may create totally different layouts for various kinds of archives similar to:

Archive of the writer
Archive date
Search Outcomes Web page
Particular classes, tags, and many others.

And now, you may see how Elementor changed Astra's listing of default publications with the archive structure I simply created:

Constructing your distinctive weblog

The creation of a single mannequin is analogous, however you’re going to get a brand new possibility while you create a template to decide on the kind of publication – as should you wished to create the structure for the weblog articles or pages:

You’ll be able to select from 7 or extra fashions. Then you should utilize a brand new set of easy widgets to regulate the design:

One other helpful possibility is the flexibility to preview information from any of your actual messages while you management your design – you may see that Elementor has truly pulled an actual put up from my website for m & # 's 39 to assist visualize how issues will unfold.

As with different fashions, you’re going to get extra settings for every widget. And when you publish your template, you may management precisely the place to make use of your distinctive template.

This may permit you, for instance, to create totally different templates for various classes of weblog posts.

Creating your WooCommerce Retailer

When you have a WooCommerce retailer, you should utilize the identical strategy to create your retailer web page and particular person product pages, with devoted widgets for WooCommerce product info:

An fascinating characteristic right here is that you simply even have devoted widgets for associated merchandise and gross sales incentives.

Development Content material for Customized Publication Varieties

That is a complicated idea, however one of the highly effective issues about Elementor Professional is that you could carry out the identical actions as above … however for customized publication varieties.

Should you're not acquainted with customized publishing varieties, they're principally a option to retailer some kind of content material. The truth is, the "posts" of your weblog are literally a "publication kind" – you don’t see them that approach, as a result of they arrive with WordPress by default.

Principally, customized publishing varieties are an necessary a part of what drove WordPress, which was "a easy running a blog platform" to a "totally practical content material administration system".

With a customized article kind, you too can create a "container" for one thing else. Some examples:

If you wish to create a job itemizing website, you may create a customized publication kind for "jobs".
If you wish to create an house rental web site, you may create a customized publishing kind for "residences".
If you wish to create a enterprise listing, you may create a customized enterprise publication kind.

Have an thought? Then, Elementor Professional will help you create the designs for these customized publishing varieties.

It turns into actually highly effective while you mix it with the following characteristic movie I'm going to speak about …

Dynamic content material places the era of themes on steroids

Till then, I've targeted on how the Elementor Themes Builder helps you embrace "regular" WordPress content material, such because the title of an article.

Nonetheless, to create really personalised web sites, one of the highly effective options is the dynamic content material characteristic of the Elementor themes builder. .

This characteristic means that you can dynamically insert customized area and taxonomy content material into your Elementor fashions.

Should you have no idea the customized area, it's a option to retailer "further" info on a content material merchandise.

For instance, should you write a assessment article, you may create a customized area to retailer your be aware for the product in query (in truth, that is how a lot of the WordPress assessment plugins do).

You’ll be able to add these customized fields to your publications or common pages. You may as well mix them with the customized publication varieties I discussed above.

For instance, should you create a customized publishing kind for house leases, you may add customized fields for every house:

Month-to-month lease
variety of rooms
Variety of bogs
And so forth.

For this instance, suppose I truly applied this characteristic (utilizing the Superior Customized Fields UI and Customized Publish Varieties). Now, I’ve a easy customized message kind with customized fields that appears like this:

Now I wish to use the Elementor Themes Builder to show all this content material.

Right here's the way it works …

To begin with, you may create a singular mannequin for the kind of put up Residence Rental :

You should utilize Odd Widgets Elementor Single so as to add title, picture and content material:

However what about these customized fields? How will you embrace these within the design?

That is the place Elementor's Dynamic perform is so highly effective.

To extract customized area info, you may add a typical widget from the Elementor textual content editor. Solely now, you may click on on this feature Dynamic :

You’ll be able to choose the choice Subject ACF which is the plugin I used to create the customized fields. Then it is possible for you to to pick out every customized area, together with a prefix and add info possibility:

And this dynamically extracts info from the customized area, which implies that this info will change for each house rental you add.

Repeating the method for all customized fields would offer you one thing like this, the place all this info is dynamically extracted from customized fields:

You may as well use dynamic information in one other approach, for instance to dynamically outline the background picture of a piece.

And that's what makes the Elementor themes builder so highly effective!

With this, you may create 100% customized WordPress websites that transcend the traditional put up / web page dynamic with out the necessity for code.

Usually, creating some of these customized WordPress websites would require not less than some primary technical information. However with the Elementor Themes builder, you are able to do absolutely anything with drag and drop.

Do you continue to want a WordPress theme with the Elementor Themes Builder?

To begin with, each WordPress website wants a theme – it's a primary requirement for WordPress. So sure, you’ll nonetheless want to put in not less than one theme alongside the Elementor Themes Builder.

I feel essentially the most related query is "Do I’ve to fret concerning the theme I take advantage of if I take advantage of the Elementor theme generator?"

The technical reply is "no" You don’t want to fret about your theme should you plan to make use of the Elementor Themes Builder for every little thing.

The truth is, Elementor has created its personal ultra-lightweight theme designed to companion with the theme designer. It has no performance – it's actually a light-weight base for the Elementor Themes Builder.

Nonetheless, I feel it’s best to at all times fear about your theme, even when you don’t want it.

Listed here are some the explanation why:

World Kinds – Moderately than utilizing Elementor to assign a method to every factor, you may outline international types within the customization settings of your theme. This ensures a constant design and facilitates the transition to the long run.
Save Time – Typically it’s possible you’ll not wish to use Elementor Professional for actually every little thing. For instance, do you actually wish to design your 404 web page with Elementor? theme will deal with the fundamental components for you, so you may merely use the theme generator for the elements you actually wish to edit.
Integrations – Some themes supply simple integrations of plug-ins that may prevent time, similar to integrations with WooCommerce or LMS plug-ins.

So, on condition that, what’s the greatest theme to affiliate with the Elementor Themes builder? There are some good choices, however the Astra theme might be one of the best start line for many use instances.

Elementor Themes Builder Helps You Construct Customized WordPress Websites

Whereas the Elementor theme builder requires slightly extra time than utilizing a pre-configured WordPress theme, it provides you the flexibility to totally customise each facet of your WordPress website utilizing the identical visible interface. drag and drop that you simply use to create the content material of your web page with Elementor.

Past that, conditional show guidelines let you additional customise your website by permitting you to create totally different designs for various kinds of content material.

Lastly, the dynamic content material characteristic is extremely versatile to transcend primary weblog or brochure websites. This frees the true energy of WordPress by permitting you to dynamically introduce content material for customized content material varieties (the examples I gave you above simply brush the floor).

Whether or not you simply need slightly extra management over the look of your weblog or wish to create your personal customized web site or e-commerce retailer, Elementor Theme Builder is without doubt one of the greatest WordPress plugins that one can find for this objective.

As well as, the Elementor Themes builder is a part of the $ 49 Elementor Professional package deal, which implies you'll even have entry to all the opposite Elementor Professional options for a similar worth (together with Popup Builder).

In abstract, each by way of performance and worth, Elementor Professional and the theme designer are apparent, and that's why Elementor has exploded in recognition lately.

Get Elementor Themes Builder

Disclosure : This text comprises affiliate hyperlinks. This implies we are able to make a small fee should you make a purchase order. It doesn’t value you anymore, however helps us preserve publishing helpful content material – thanks in your help!