Elementor Hello Theme Tutorial: Everything You Need To Know

If you want to create a fully custom website with Elementor, then the new Hello Theme is absolutely the best option. It is lightweight, fast and simple to install. And best of all, it is designed to be used with Elementor.

With the Theme Builder capabilities of Elementor, you no longer have to be constrained to a Theme or what others want you to have on your site. You can now create a fully custom site and more or less ditch the Theme (Hello Theme is almost invisible).

In this post, I will explain the benefits of this approach, how it works, and how to use it. Along with a few simple examples to get you started.

Let’s go…

Benefits Of The Elementor Hello Theme

The Elementor Hello Theme is designed to be used with Elementor Pro, but in essence it is just a stripped down, lightweight theme.

The main benefits of such a theme are:

• Fast load time
• No bloat or excess code
• It’s a FREE theme
• No modules, elements or theme specific things you don’t need
• The ability to extend the theme using Hooks
• Designed specifically to be used with Elementor and Elementor Pro

If you have ever relied on a theme before, or found it to be too slow, heavy or hard to work with – a theme like Hello Theme is a godsend.

This is how fast Hello Theme is out of the box (not realistic of course – as it’s empty, but a good start)

Compare it with Divi and you will see a big difference:

Elementor Restaurant Template

Ok, to make it a little more realistic, I loaded a Divi restaurant template and compared it to an very similar (and equally large) Elementor restaurant template:

 

Not perfect for Elementor, as there are lots of requests (aka files being loaded) but the load time is nearly 1/2.

Nothing beats coding a website from scratch with HTML and CSS, but Hello Theme & Elementor Pro do a pretty good job.

Note: just don’t load 2MB images for your restaurant and you will get even faster load times!

Hello Theme Requirements

There are little to no requirements when working with the Hello Theme, apart from WordPress. But, I wanted to make sure you understand what this theme is – out of the box.

This theme is designed to be 100% customized using a page builder like Elementor. So, if you don’t have Elementor (or Pro) then you will have to get it.

This is what a simple page with a heading and two menu elements looks like:

 

So, if you truly want to be able to customize every part of the theme, then you will need Elementor Pro.

Sure, Elementor (the free version) has a lot you can customize, but there are many limitations, so you will only be able to create:

• Sections
• Pages

With Elementor Pro you can also create:

• Headers
• Footers
• Blog Pages
• Blog Archive Pages (Categories, Blog, etc)
• Popups

Setting Up Hello Theme & Child Theme

Setting up Hello Theme is actually pretty simple. All you need to do is go in to

• Appearance – Themes
• Click Add New
• Type “Hello Theme” in the search
• Hover over the theme and click Install

Adding A Child Theme

However, in order to truly set up a Theme for customization, you “should’ install a child Theme.

You can actually get one for the Hello Theme here. It is already set up using the WordPress standards for child themes (style.css and functions.php). So you are good to go!

• Click the green “Clone And Download” button
• Then click the Download Zip – that is the child theme you can upload to your site :>

Just add it to your themes, and activate it.

If you are going to use a child theme at all, that is.

 

It may become available on the WordPress Theme Repository at some point, but this is more than enough.

Not sure if you need one….

And Do You Need A Child Theme?

If you are not familiar with Child Themes, they are basically an empty theme that is connected to your main theme. But, they allow you to customize the main theme  without affecting the original.

This is great because it keeps the main theme un-edited and also means that when an update becomes available, all your customizations are not over-written by the update (which they would be if you edited the theme itself).

However, having said that, you only really need a child theme if you intend on editing the Theme itself. That means the

• style.css (ie. the CSS styles and code)
• any other theme file or functions code

If you are not familiar with any of that, or don’t want to learn it, then forget it. You can do it all with Elementor (usually – there are always exceptions) and don’t actually need a child theme.

It is just a cleaner way of working, especially for developers. I use them for myself and clients, but you don’t have to.

Customizing Hello Theme

As I mentioned above, there is actually not a lot you can customize with the Hello Theme – at least within the WordPress dashboard.

You can basically change the Logo, Icon and site name.

Further customizations only really include Additional CSS, so you can add custom CSS to your theme.

If you want to go deeper and customize the theme (beyond designing it with Elementor Pro) you will need to get your hands dirty in the code and use a Child Theme.

However, most of you will be using Elementor Pro, and there should not be any problems!

Creating A Header & Footer With Elementor Pro

If you use the Hello Theme one of the first things you are going to want to do is add a header and footer to your site.

Without it, you can only really create landing pages or blank canvas based pages with Elementor (or other builder).

The header and footer can be created once and applied to your whole site, automatically. Or, you can even create specific ones for some pages if you like.

If you want to see a video of how it’s done (easier, I know) then you can check out the video below:

But if you want the basics, here you go…

1. Click on Templates (under Elementor) on the side menu and then choose Theme Builder

2. Next, click Add New Template and choose Header from the dropdown

Also give your template a name (probably Header) and click Create Template

3. Now you get a choice of pre-made Headers (they are called Blocks) and you can use them to help speed up the creation. Or you can create one from scratch.

Don’t forget to click Insert (top right) once you have clicked on the Header block you want to use :>

4. Now you can edit your Header to your heart’s content. Change the background, add your logo. Tweak the layout of the icons or menu.

Just be careful to pick a Header block to start with that more or less resembles what you want as a result (at least in terms of layout) otherwise you will waste a lot of time trying to change it.

5. Once you choose to Publish it (when your design is ready) you are now asked to create a Condition. This is a choice of where you want the Header to be displayed.

Click on Add Condition (see the grey button below)

Now you have to choose the condition. The most common choice is the one displayed by default, Entire Site. Which then uses the header on your whole site automatically.

Now you can click the Green button at the bottom/right Save and Close. 

The header you have created will now appear on all pages and when you are creating a new page using Elementor.

You can certainly do a lot more here, for example if you need a specific header in a certain page (a lighter one on the homepage for example). Or even more. You can read all about it on the Elementor site.

Now, you just have to do the same for the Footer, and the basic site layout you need is good to go!

Summing Up Hello Theme by Elementor

Hello Theme is a great creation by the Elementor team, but you have to know what it is for and how to use it.

If you plan on fully customizing your own Theme with Elementor Pro and want it to be super fast, lightweight and the best it can be. It is a great option.

If you still want your theme to be created using the Customizer and have no interest in purchasing Elementor Pro, then it is not for you.

This is the future of WordPress and Theme creation in my opinion, and now is the time to get on board!