How to Quickly Create a Professional WordPress Layout with Elementor Pro

How to Quickly Create a Professional WordPress Layout with Elementor Pro

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.

Important: If you’re just starting and don’t have your blog yet, stop right here and read How to Build a WordPress Blog with SSL & 2FA 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 article are affiliate links. When you purchase products or services using these links and I may earn a commission at no additional cost to you. This helps me make this content free of charge to you. I only recommend products and services I’ve personally used.

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.

Elementor homepage

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.

Hello theme by Elementor

This article is divided into three main sections:

  1. How to install the free Hello theme by Elementor
  2. How to purchase Elementor Pro license
  3. How to create a professional layout with Elementor Pro

01 How to install the free Hello theme by Elementor

Go to Appearance and click the Themes link:

Installing new theme

Click the Add New button.

Adding new theme

Search for Hello theme, install and activate it.

Activating theme

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.

Adding new plugin

Searching for Elementor

02 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.

Elementor pricing

Elementor checkout

Scroll down and hit the big green Checkout button.

Elementor purchase

Check your inbox, you should have a welcome message with further instruction waiting for you.

Elementor email

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.

Elementor Pro plugin download

Go to Plugins and hit the Upload Plugin button.

Elementor Pro plugin upload

Choose the downloaded ZIP file and hit Install Now, then Activate Plugin.

Elementor Pro plugin installation

Elementor Pro plugin activation

Finally, you need to Connect Elementor Pro with your account and activate it.

Elementor Pro Connect and Activate

Elementor Pro connect

Elementor Pro active

Great job! Now you have access to dozens of pre-made themes and elements you can use to build your own layout.

03 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.

Customize appearance

Select Side Identity and upload your logo.

Site Identity

Site logo

Make sure it’s 350×100 pixels as recommended. Hit the Crop Image button.

Crop image

Now let’s set the site icon. Again, upload the image if you don’t already have it in your Media Library.

Site icon

Perfect, now scroll up and hit the arrow to get back to the main menu.

Back to main menu

Select Menus and click Main Menu.

Select menus

Select main menu

Hit the Add Items button.

Add items

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.

Add menu items

When you’re done, hit the back arrow again to get to the Main Menu and now select Homepage Settings.

Back to settings

Here, we’ll set that our homepage will display a static page.

Set 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.

Choose Start Here

Hit the Publish button to save and apply changes.

Publish changes

Perfect, you can click the X in the corner to leave this module.

Back to Dashboard

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.

List of pages

Perfect, let’s create the landing page template! Select Templates and click the Add New link.

Add new template

In the pop-up window that appears, select Page and name it Landing Page. Hit CREATE TEMPLATE button.

Create landing page

Now click the icon with a folder to display the Library.

Select template

Make sure you have Pages tab selected and search for COACHER.

Search for Coacher

Click the template and hit the INSERT button.

Insert template

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.

Change template settings

Choose the Style tab and select your own image.

Replace background

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.

Replace avatar

I’d like the background to be a bit darker. Instead of modifying the image itself, I can just change its overlay.

Add background overlay

I can choose between Gradient and Classic color. I’ll go with a classic and use my favorite dark blue #2C3E50.

Set overlay color

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.

Change heading color

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.

Use navigator

Select sub heading

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.

Modify services

Change services icons

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.

Replace photo

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.

Removing borders

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.

Publishing template

Great, let’s HAVE A LOOK as suggested.

Checking results

So, this is my Landing Page template in its glory.

Landing page template

Let’s close this tab for now and exit the Elementor by hitting the big blue EXIT TO DASHBOARD button.

Exiting to Dashboard

Exiting to Dashboard

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.

Creating header template

I’ll use the black metro which looks very clean and professional.

Selecting Metro header

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.

Styling Metro header

Now I need to edit the Nav Menu because I want to change to hover color.

Editing Main menu style

So in Style tab under Typography, I’ll click the HOVER button.

Header typography

Here, I’ll change the green to light blue color for both text and the pointer.

Editing hover effect

This looks fine, so I’ll just hit the PUBLISH button.

Publishing header template

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.

Header conditions

Hit the SAVE & CLOSE button.

Header save and close

Close the tab and refresh the START HERE page.

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.

Exit from header to Dashboard

Now, select Pages, All Pages and click the edit link below START HERE page.

Edit Start Here page

Now hit that big blue Edit with Elementor button.

Edit Start Here with Elementor

Next, click the grey icon with the folder to choose the template.

Start Here choose template

Choose the My Templates tab to list your custom templates and hit the Insert button next to the Landing Page template.

Choose My Templates

Insert landing page template

Click Yes in the window that warns you about importing document settings.

Import 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.

Update and exit

Back to Dashboard

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.

Start Here page attributes

That’s it! When you refresh the page now, you’ll see that the page name is gone.

Start Here final result

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.

Creating footer template

I’ll choose Metro as it will go nicely with the header.

Choosing Metro footer

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.

Footer settings

Footer styling

One last thing I want to modify here is social links.

Footer social icons

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.

Footer publishing changes

Again, I’m gonna choose that Footer should be used throughout the site.

Footer display conditions

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.

Creating blog 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.

Blog as archive template

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.

Choosing archive blog template

Now, scroll down to the PRO section and drag & drop the Posts element to the right.

Adding Posts element to blog template

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.

Removing default section from blog

Deleting blog section

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.

Changing blog layout

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.

Turning off blog 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.

Adding Image Box to blog

I’ll use my photo here and change the size from 30 to 64 percent.

Setting blog avatar

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.

Adding blog template to page

From the list of My Templates, insert the Blog template we have just created.

Inserting blog template

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.

Blog page attributes

Blog final result

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. If you’re missing some details in this article, make sure to watch the video version where you’ll see everything explained step by step: https://skl.sh/34i7J2J

Jan Zavrel

Jan is Biohacker, iOS & Web Developer, Author, Teacher, Lifelong Learner, Evernote Certified Consultant. He’s an author of THE SYSTEM2, a unique methodology for Evernote power users, and THE NEW FITNESS: Forty Years Old Dad in Twenty Years Old Body where he explains how to hack your life to live forever. Learn more about his work at jan.zavrel.net.

<< previous next >>