There are many different themes for WordPress all over the Internet. I tried many of them, including some very good like Avada and Newspaper. I’m currently using Newspaper on my ZAVREL CONSULTING website, but when I started building Smart Profit School, I wanted something different.
If you’re just starting and don’t have your blog yet, stop right here and read How to Start a Blog where I explain exactly what to do to get you up and running. Don’t worry, this article will wait here for you 🙂
Disclosure: Please note that some of the links in this post are affiliate links for products I use and love. This means if you click on such a link and take action (like subscribe, or make a purchase), I may receive some coffee money at no extra cost to you. This helps me create more content free of charge for you. And, as an Amazon Associate, I earn from qualifying purchases. Thanks for your support!
I wanted to build the fastest possible WordPress website with a minimum of plugins. There are so my elements that must be rendered before the website is delivered to the visitor and sooner or later your WordPress becomes bloated and start slowing down if you don’t take care of it.
I didn’t want to end up with a nice-looking website nobody is visiting because it’s to slow to load and use. I wanted something speedy and mobile-ready and I ended up with Elementor.
In this article, I will show you how I set up Smart Profit School website with this very popular page builder.
Even though Elementor is a premium plugin, it offers a free version with the basic functionality. Elementor also offers free Hello theme and states that it’s the fastest WordPress theme ever created.
This article is divided into three main sections:
- How to install the free Hello theme by Elementor
- How to purchase Elementor Pro license
- How to create a professional layout with Elementor Pro
1. How to install the free Hello theme by Elementor
Go to Appearance and click the Themes link:
Click the Add New button.
Search for Hello theme, install and activate it.
Upon activation, you should see the message to install the Elementor Page Builder plugin. If for whatever reason it won’t appear, just manually search for it in Plugins, install and activate it.
2. How to purchase Elementor Pro license
Even though you can build a nice blog with just a free version of Elementor, it will take some time to put it all together manually. The time you should rather spend by writing the actual content of your blog. That’s why I suggest you opt directly for the premium version of the Elementor.
Elementor Pro is for $49 per year, but I think it’s worth every single penny as it allows you to make your website truly unique, yet simple. You can cancel anytime if you decide in the future that it’s not for you, but I bet you’ll stick with it once you realize how much it helps you.
That’s why I recommend buying the Pro version. I did it too when I was building this website because I wanted an easy way to display my blog posts.
Scroll down and hit the big green Checkout button.
Check your inbox, you should have a welcome message with further instruction waiting for you.
Sign in to your Elementor account, scroll down and download the Elementor Pro plugin. Make sure you have the free plugin installed as well because these two work together.
Go to Plugins and hit the Upload Plugin button.
Choose the downloaded ZIP file and hit Install Now, then Activate Plugin.
Finally, you need to Connect Elementor Pro with your account and activate it.
Great job! Now you have access to dozens of pre-made themes and elements you can use to build your own layout.
3. How to create a professional layout with Elementor Pro
The default website with Hello theme is nothing fancy, but that’s totally by design. The main goal of Hello theme is to be super fast, not super eye-candy, but we’re going to make it look better now.
Site logo and icon
Let’s start with the site logo and icon. Go to Appearance -> Customize.
Select Side Identity and upload your logo.
Make sure it’s 350×100 pixels as recommended. Hit the Crop Image button.
Now let’s set the site icon. Again, upload the image if you don’t already have it in your Media Library.
Perfect, now scroll up and hit the arrow to get back to the main menu.
Main menu and homepage
Select Menus and click Main Menu.
Hit the Add Items button.
I’ll add four new items. START HERE, BLOG, RECOMMENDED and ABOUT ME. As part of the header, these links will be displayed at the top of the website and accessible from every page.
When you’re done, hit the back arrow again to get to the Main Menu and now select Homepage Settings.
Here, we’ll set that our homepage will display a static page.
Select the START HERE page from the list of pages. This page has been automatically created by WordPress when we created Main Menu items.
Hit the Publish button to save and apply changes.
Perfect, you can click the X in the corner to leave this module.
When you refresh the page, you’ll see that the list of posts is gone and the website loaded the new homepage. As of now, this page is empty, but that’s going to change soon.
Creating a landing page
We will create a landing page template which we will use for this homepage. Also, we have our four links ready in the Main Menu at the top of the page.
Go back to the Dashboard and check the list of pages to see that all the links (and pages) in the Main Menu were created as well as START HERE page which is now the Front Page.
Perfect, let’s create the landing page template! Select Templates and click the Add New link.
In the pop-up window that appears, select Page and name it Landing Page. Hit CREATE TEMPLATE button.
Now click the icon with a folder to display the Library.
Make sure you have Pages tab selected and search for COACHER.
Click the template and hit the INSERT button.
Once the template is loaded, it’s time to modify it to fit our needs. Let’s start with the background image. Click the button with six dots to reveal settings for this specific section.
Choose the Style tab and select your own image.
Now, it’s time to change the foreground. Ideally, you should have your own photo with a transparent background.
There are many tutorials on how to achieve this in Photoshop and it took me just a few minutes, so it’s no big deal.
I’d like the background to be a bit darker. Instead of modifying the image itself, I can just change its overlay.
I can choose between Gradient and Classic color. I’ll go with a classic and use my favorite dark blue #2C3E50.
I can change the Opacity as well, but I’m quite happy with the result, so I’ll keep it at 0,5.
Let’s change the texts now. This is really easy, I’ll just click on each of them and use my own content instead.
First, I’ll change heading to “How to Achieve a Financial Freedom with Passive Income” and in Style, I’ll change the Text Color to white.
Next, I want to change subheading but as you can see, I can’t select it because the form section is placed on top of it. What now? Well, I can go to Navigator and select any element from the list or hide the one I need to get off the way.
Great, now I can select subheading and change its content. When it’s done, I’ll make the form visible again and close the Navigator.
Let’s scroll down to the next section. Here, I will modify not only the main text and the four columns below it, but I’ll change the icons as well.
Let’s scroll down to the next section. Here I’ll change the background color, heading, and text. I will also use Smart Profit School logo instead of the default image.
Everything is very intuitive and after a few minutes, you’ll know exactly how to change the content and style of any element.
With the new image, I’ll just want to remove the border and this option is in Advanced tab under Border where I’ll just set the Width to zero.
Ok, I’ll modify the last section where I’ll change the text to “Your financial independence starts sooner than you may believe. Let me help you!”
Perfect, we’re done here. I’ll hit the green PUBLISH button and the bottom of the Elementor column.
Great, let’s HAVE A LOOK as suggested.
So, this is my Landing Page template in its glory.
Let’s close this tab for now and exit the Elementor by hitting the big blue EXIT TO DASHBOARD button.
Creating a header
Great job so far, let’s continue and create the header now. Click the Add New link in Templates again, select Header from the list of types and name it Header. Hit the CREATE TEMPLATE button.
I’ll use the black metro which looks very clean and professional.
Ok, here we are in Elementor again, and first, let’s change the background color of the section. So in the Style tab, I’ll use my favorite dark blue.
Now I need to edit the Nav Menu because I want to change to hover color.
So in Style tab under Typography, I’ll click the HOVER button.
Here, I’ll change the green to light blue color for both text and the pointer.
This looks fine, so I’ll just hit the PUBLISH button.
In PUBLISH SETTINGS window that will pop-up, you need to set where the header will appear on your site. For the header, it’s best to set the Entire Site. So I’ll hit the ADD CONDITION button and the Entire Site is already suggested by Elementor.
Hit the SAVE & CLOSE button.
Close the tab and refresh the START HERE page.
Ok, the header is there, which is fine, links have new color but where’s the Landing Page? Well, we only created the template so far, but we didn’t apply it anywhere yet. We need to assign it to the START HERE page to actually use it.
So, go back to Elementor tab and EXIT TO DASHBOARD.
Now, select Pages, All Pages and click the edit link below START HERE page.
Now hit that big blue Edit with Elementor button.
Next, click the grey icon with the folder to choose the template.
Choose the My Templates tab to list your custom templates and hit the Insert button next to the Landing Page template.
Click Yes in the window that warns you about importing document settings.
Ok, the template is loaded to the START HERE page. Hit the Update button to save the changes. You can leave Elementor for now.
When you refresh the START HERE page, the Landing Page template will appear, which is great but the name of the page is displayed above, which is not that great. Let’s get rid of it.
In the Page Attributes of the START HERE page, choose Elementor Full Width template and Update the page.
That’s it! When you refresh the page now, you’ll see that the page name is gone.
Ok, let’s create a footer now. You’ll see that it’s actually pretty simple and very similar to creating the header, so I’ll go through it quickly.
Add New template. Select Footer from the list of types and name it Footer. Hit the CREATE TEMPLATE button.
I’ll choose Metro as it will go nicely with the header.
Let’s change the background color. I’ll go with my favorite dark blue again. And I’ll do the same thing for the sub footer section.
One last thing I want to modify here is social links.
First, I’m gonna remove those I don’t need like Medium, Pinterest and Dribble. Next, I’m gonna copy and paste the links to the Twitter account, Facebook Page and YouTube channel of Smart Profit School.
I’ll leave the rest of the content for later modifications and PUBLISH the template.
Again, I’m gonna choose that Footer should be used throughout the site.
When you refresh the START HERE page now, you should see your footer at the bottom of the page.
Creating a blog page
Having a great looking Landing page is very important, but users should have simple access to your posts as well. We want to create a nice and simple list of all posts that we’re gonna hook up to that BLOG link in the main menu.
First, go to Dashboard, select Templates -> Add New, choose Page type and name it Blog. Create the template.
Once the page is loaded, hit the grey button with a folder icon and select Blocks tab at the top of the Library window. There are many different items in the drop-down menu, but since we need a list of posts, select Archive.
Scroll down and choose the template with Sidebar. It makes no difference if you choose dark or light header since we will remove it anyway.
Now, scroll down to the PRO section and drag & drop the Posts element to the right.
You need to have Elementor Pro license, otherwise, you won’t be able to use elements in the PRO section.
As soon as you drop Posts element to your template, it will list all your posts along with the featured images, titles, and excerpts. Pretty amazing, right?
Now, we’re gonna delete the default element, so right-click it and choose Delete from the menu.
Since most visitors will probably access your website with a mobile device, it makes sense to change the layout accordingly. I’ll change the Skin from Classic to Cards first.
With mobile devices in mind, I’ll change the number of columns to one and I need to change the Image Ratio so that the logo of Smart Profit School is not clipped. Based on your featured images, this might not be an issue in your case, but it’s good to know that Elementor allows you to easily fix such detail.
Ok, 0.56 is absolutely perfect in my case and since I’m using a template for all my featured images, I know that this will work for every post I’ll publish in the future.
Next, I’ll hide the badge and avatar. I’m the only author of this website so it makes no sense to show the avatar.
Now I want to change the size of the titles. For that, I need to go to the Style tab and select Typography in the Content section. I’ll choose EM units and set the value to 1.3.
Ok, let’s change the content of the sidebar. First, I’m gonna remove the list of the Most Popular posts. Instead, I’m gonna drag & drop the Image Box element to the sidebar.
I’ll use my photo here and change the size from 30 to 64 percent.
I’ll change the Title to display my name and in the description, I’ll have my short bio which I use all over the Internet. And, I’ll add the link to my main website at www.zavrel.net so when readers decide to learn more about me, they’ll be just a click away from it.
Finally, in the Style tab, I’ll change the spacing of the Title to 7 and the color to my favorite dark blue. Perfect!
Now, as I said at the beginning, we’re gonna remove the top section with the header as it makes no sense to have it here. So just hit the X icon at the top and it’s gone.
Hit the PUBLISH button and refresh the BLOG page. As you might expect, nothing changed here because we didn’t assign the template yet.
Select the BLOG page from the list of All Pages and Edit it with Elementor.
From the list of My Templates, insert the Blog template we have just created.
Hit the Update button, EXIT TO DASHBOARD and change the Default template to Elementor Full Width template in Page Attributes. Update the page and refresh it.
It might take some time before you’ll be fluent with Elementor.
That’s why I have recorded the whole process of setting up this layout and published it on Skillshare. When you sign up, I’ll get some coffee money, and you’ll get their premium plan with 22.000+ courses for 14 days for free.
You won’t be charged anything for your first 14 days and you can cancel your membership whenever you want within that period, so I guess it’s a win-win for all of us 🙂
