How to Create WordPress Layout with Elementor Pro | Jan Zavrel | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to Create WordPress Layout with Elementor Pro

teacher avatar Jan Zavrel, Developer, Author, Consultant

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

6 Lessons (21m)
    • 1. Introduction

    • 2. 01 Site logo, icon and main menu

    • 3. 02 Landing page

    • 4. 03 Header

    • 5. 04 Footer

    • 6. 05 Blog

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


There are many different themes for WordPress all over the Internet. I tried many of them, including some very good like Avada and Newspaper. But when I started building Smart Profit School, I wanted something different.

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 class, I will show you how to set up a WordPress website with this very popular page builder.

I assume you already have a free Hello theme by Elementor. If you don't have it installed yet, here's the link to the article where I explain everything step by step:

We will build together these features:

  • site logo, icon, and main menu
  • landing page
  • header
  • footer
  • list of posts

Meet Your Teacher

Teacher Profile Image

Jan Zavrel

Developer, Author, Consultant


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello and welcome to the scores where I will show you how to quickly create a professional looking layout for your work breast block with Elemental Pro. I assume you already have element of pro in start. If not, you can read my article, but I describe in details how to get elemental plug in as a part of Hello theme. You'll find the link below or in the description of discourse, depending on which platform you're watching this anyway, let's get to it. 2. 01 Site logo, icon and main menu: first, let's see would default website with Hello Theme Looks like. As you can see, it's 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. Let's start with side logo and I can go to a periods and customize select side identity and upload your logo. Make sure it's 350 by 100 pixels, as recommended. I already have it in Media Library, so I don't have to upload the file. Hit the crop image button. Great. No, it's set. Decide I come again. Upload 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. Select menus and click Main menu. Hit the at Items button. I'll add four new items. Start here, block recommended and about me. These will be displayed at the top off the website and accessible from every page. Hit back there again to get to the main menu. And now select home page settings here will say that our hum pitch will display aesthetic page. So, like 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. The change is perfect. You can click the X in the corner to leave this module. When you refresh the page, you see that the list of Post is gone and mile upside loaded new home page. As of now, this page is empty, but that's going to change. Soon we will create a landing page template, which we will use for this home pitch. Also, we have our for Ling's ready in the main menu. At the top of the page. Go back to dashboard and check the list of pages to see that all of these pages linked in the top menu were created as well. Start here, page, and as you can see, start here. Page is now selected as front page. In the next lesson, I will show you how to create your first template 3. 02 Landing page: Let's create a 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 employed bottle. Now click the icon with folder to display the library. Make sure you have Page E stab selected and search for culture created template and hit the insert bottom. Okay, once the template is loaded, it's time to modify it to fit our needs. Let's start with the background image. I don't noted a nice office interior, which I'm going to use great the button with six darts to reveal settings of this specific section. Choose the style tap and choose your own image. I already have mine in Media Library, so I'll just insert it looking pretty good. Let's give it some over a, though, to push it back of it. Break the background Overweight. As you can see, we can use either Grady Int or classic color. I'll go with classic and use my favorite dark blue to C three e 50. You can change the capacity as well, but I'm quite happy with the result, so I'll keep it at 0.5. Now it's time to change the foreground. Ideally, you have your own photo ready. We're transparent background. There are many tutorials how to achieve days in photo shop, and it took me just few minutes, so it's no big deal. Perfect. You can even hide the toolbar to preview the page in full with. I'm quite happy with this. Now let's change the texts. This one is easy are 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 toe white. Next, I want to change subheading, but as you can see, I can select it because of the form section on top of it. Well, I can go to Navigator and select any element here, manually or high, the one I need to get off the way. 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 move down to the next section here. I will modify not only the main text and four columns below it, but I'll change the Aikens as well This is all pretty intuitive stuff. So speed is up a bit as it's all about replacing texts and images thing perfect. Let's check the responsive mode to see how the page looks on tablet. Pretty good and mobile device. Yeah, that's all right, too. Even though I'm a levitating over the form here bar that can be fixed later. Let's go back to desktop and scroll to the next section. Here I'll change the background color, heading text and our use smart, perfect school logo instead of that living room photo again. Everything is very intuitive with L. A mentor, and after a few minutes you'll know exactly how to change content and style off anything. So speed is up to save us some time. Theo, with the new image, I just want to remove the border and deception is an advance step under border. Where are just set? Do with 20 Okay, I leave testimonials intact for now and modify the last section where I'll change the text to your financial independence start sooner. The new May belief Let me help you and I mean it. That's why I have decided to start smart perfect school project anyway. Perfect. We're done here. A quick review and we can hit the green publish button at the bottom of the options column . Great, let's have a look as suggested. So this is our landing page template in its glory. Let's close this step for now and exit the L A mentor as well. By hitting the big blue exit to dashboard button in the next listen, we'll create a template for header. 4. 03 Header: Great Europe so far. Let's continue and create ahead of no click the add new ruling in templates again select header from the list of types and name it Header hit to create and Bite button. I'll use the back Metro, which looks very clean and professional. Okay, here, er in l. A mentor again. And first, let's change the background color of the section. So in style tap, I'll use my favorite dark blue. Now I need to edit a naff menu because I want to change the Holler car. So in start up under typography are click the hover button. Here I'll change the green to light blue color for both text and the pointer. This looks fine. If you want, you can change the other options as well. The with off the pointer, for example. Now that's not good. I'll stake with five here. Great. This was quick. Nothing else to change here, so I just hit the publish button in published settings Window that will pop up. You need to set where Header will peer on your side for Header. It's best to set the entire site so he d add condition button and the entire side is already suggested by a mentor. It's safe and close Bottle. Now we can have a look again. Yep. Header Looks fine. Close the type and refreshing to start here. Page. Okay, The header is here, which is fine. Ling's have new cover and there is a pretty big surge box as well. But where's are running page? Well, we only created a template so far, but we didn't apply it anywhere. It we need to assign it to the start. Here, page toe, actually. Use it. So go back to L. A mentor. Tap and exit to dashboard now select pages, all pages and click the Edit Ling below. Start here. Page. Now hit that big blue edit with L A mentor button. Next click the gray icon with four order to choose the template. Only this time used my template type to list are custom templates and hit the insert button next to the landing page. It iss in the window that wants you about importing documents, settings. Okay, The template is loaded to to start here page when we refresh the page Now the landing page template will appear, which is great, but we still have the name of the page year, which is not a great what I'll show you how to get a read of it right away. Quick. The element of tap and exit to dashboard now in page attributes of the start Here page choose L. A mentor fool with template and update to the page. That's it. Refresh the page. Now you see that the page name is gone. Great job. In the next lesson, we'll create a template for hooter. 5. 04 Footer: Okay, let's create a food. You know, you see that it's actually pretty simple and very similar to creating Header, so I'll go through it quickly at the new template. Select food er from the list of types and name it hooter. Create a temperate I'll choose Metro as it will go nicely with Header looking great. Let's change the background color. I'll go with my dark blue again and I'll do the same thing for the supporter section one last thing I want to modify here are social links. First I'm going to remove those I don't need, like medium Pinterest and dribble. Next, I'm gonna copy and pays the links to the Twitter account, a Facebook page and YouTube channel off Smart perfect school. Okay, I leave the rest of the content for later modifications and publish the template again. I'm going to choose that footer should be used throughout the site. A quick review. Alright, looking great. And the links are working too fine. Back to element A type and exit to dashboard when we have fresh to start Here page Now you should see your food er at the bottom of the page. And sure enough, Dari days. Okay, Having a great looking landing page is very important, but users should have a simple access to your posts as well. That's what we're about to hook up to the block Ling in the main menu. Nice and simple lists off all posts. As of now, we have just the empty page generated on America by WordPress. When we added items to the main menu, we have our header and footer here because we wanted them to be used everywhere. But really, content is missing, but don't work. We'll add it in the next lesson. 6. 05 Blog: okay, It's time to create a nice list of posts and make it accessible from the main menu Yard Block link. Let's get started First, go to dashboard Salik templates. Add new choose page, dive and name in block was the pages loaded. Hit the gray bottom with four Aiken and select block Step 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, this looks fine. So hit the insert butter. First, we're gonna delete a default element. So right click it and choose delete from Dominion. Now scroll down to pro section and Dragon drubbed posts element to the right, where you just deleted the default element. You need to have element of pro license. Otherwise, you won't be able to use elements in pro section. As soon as you drop posts element to your template, it will list all your posts along with the featured images, titles, excerpts and so what? No, since most users will access a website with mobile device sooner or later, it makes sense to change the layout for ease of use of these users. Right away, I'll change the skin from Classic two cards first. In my opinion, it looks much better. But this is up to with mobile devices in mind. I'll change the number of columns to one, and I need to change the image ratio. So dead logo off. Smart perfect 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 Element ER allows you to fix such detail. Next hour. Hide, Badge and Avatar. Since I'm the only author of this website, it makes no sense to show the avatar anyway. No, I want to change the size of the titles for debt. I need to go to the style tap and select typography, incontinent section our choosed M units and set the value to one point free. Yep, this looks fine. Okay, let's change the content of the sidebar. First, I'm going to remove social wings as I already had them in the food and are the lead. The list of the most popular posts as well. Instead, I'm going to drag and drop the image books element to the sidebar. I'll use my photo here and change the size from 30 to 64%. I changed 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 0.0 dot net. So when readers decide to learn more about me, tell me, just click away from it. Finally, in the start up, our change, the spacing off the title to several and occur to my favorite dark proof Perfect. Now, as I said at the beginning, we're going to remove the top section with a header as it makes no sense to have it here. So just hit the X icon at the top and it's gone. That was the last change. Hit the publish button and refresh the block page. As you might expect it, nothing changed here because yeah, we didn't assign the template it so back to elemental tap exit to Dish board and select the block page from the list off all pages and meditate with L. A mentor from the list of my templates inserted the block template we have just created. And there it ISS hit the update button exit to dish board and changed the default template toe element er fool with template in page attributes. I've data page and refresh it. Perfect The list of posts and sidebar exactly as I wanted it. And start here working as well. And if someone clicks my profile in the sidebar dare see my main website. Cool. Okay, that's it for this course. Now you know how easy it is to create beautiful else with L A mentor. I hope you enjoyed the course. Have a wonderful day and see you next time by