Build a Faster, Better Website with Elementor and WordPress | Suzanne Scacca | Skillshare

Playback Speed


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

Build a Faster, Better Website with Elementor and WordPress

teacher avatar Suzanne Scacca, Freelance Writer/Website Builder

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 (25m)
    • 1. Build a Faster, Better Website with Elementor and WordPress

      2:50
    • 2. Set up Elementor

      1:37
    • 3. Set up your theme

      3:01
    • 4. Create your home page with Elementor

      8:38
    • 5. Create your internal pages with templates

      6:17
    • 6. More things to do with your fast and attractive website!

      2:13
  • --
  • 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.

178

Students

--

Projects

About This Class

d6e3fe94

Every theme, every page builder, every platform dubs itself the “best”. So, how do you sift through the BS and find the one tool that will help you build a website that’s attractive and fast?

Over the last few years, I’ve tested and reviewed all of the leading website-building tools (and some of the lesser known ones, too). Here’s the conclusion I’ve come to:

If you don’t know how to code, and if you can’t afford to skimp on certain website features that only a professional designer would know how to create, then nothing will give you better results than Elementor. 

In this class, I’m going to walk you through the setup of a new website with the *FREE* Elementor page builder plugin in WordPress. 

I’ll also give you some ideas on how to use this powerful plugin and other free add-ons to create a website that’s beautiful and loads lightning-quick. 

To get started, make sure you have the following: 

  • Web hosting
  • Domain name
  • WordPress 

If you need help getting set up, go to my first course “Build Your Website with WordPress” and complete the first three chapters.

Meet Your Teacher

Teacher Profile Image

Suzanne Scacca

Freelance Writer/Website Builder

Teacher

Oh, hi there! The name's Suzanne. Most days, you can find me writing about WordPress, web design, and small business management. On occasion, I write about strange speculative futures in which humanity is ruled by technology. And now... Well, I'm bringing website-building and SEO classes to Skillshare. Enjoy!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

Transcripts

1. Build a Faster, Better Website with Elementor and WordPress: how to build a better and faster website using element or in WordPress and something I don't include in the title eyes that you could do it for free. Of course, if you're trying to build like a monster e commerce site or you need to have some sort of custom functionality, like a reservation system or something like that, you're not gonna be able to use element or for free. But if it's just a basic business websites, um, you can visit my own website and you could see there's nothing really flashy about it, but still gets the job done. If that's what you need, you could do for free, and I'm actually going to show you how to do it. Um, and the reason why I have chosen L. A mentor is because, um, I chest for pro slogans and themes for living right about them, and I teach Web designers which ones they should be using for pliant websites. And out of all the tools that I've used, L. A mentor is the best, and I'm not getting paid to say that I'm telling you this because I just rebuilt my own website using element or on. Um, it took my website from this where Google wasn't necessarily unhappy with it. But you could see that Google wasn't gonna put my website at the top of search results without good reason. Teoh, um and then moved What? My website over to Element or rebuild everything and got my score up teat this. And if you took my first course, then you know how I'm foreign. PhD is to the ranking process, and it's also just very important in terms of your visitors experience. Anything that takes more than two or three seconds is really gonna be, ah, pushing the limits of your visitors patients. So what you want to do is build a website that looks great. Get your message across and low. It's really quickly so that they're not sitting and waiting, trying to figure out what the heck is this website about? Should I be here? What's going on? Um, so that's what I'm gonna show you today. I'm gonna give you all the tools you name all the three schools you need to build your own website, whether it's ah Blaga portfolio, a small business website, even get you started with a bigger e commerce site. Whatever it is you want to dio, I'm gonna show you how to do it and, um, get you on untracked to bring well and Google with an awesome website. Visitors can but stick around and take action. 2. Set up Elementor: So the first thing we're going to do here is add the element or plug in. To do that, you're gonna go to plug ins, add new and do a search for L. A mentor. You can see right here. It's a page builder we're going to install now. This isn't the traditional way that WordPress websites are built. Usually your, um, going to use the theme to design your website, but themes air a bit limiting, and they do basically create the website for you out of the box. But there just isn't as much flexibility and and what you can do with them, and they're also not always that fast. Usually, if you get a fast theme, it's because you don't have a lot of choices to make, and it's all pre pre made for you. And if you're fine with that, go with it. But if you want more control over what your website looks like, how it works a page builder plug in, laid on top of the theme is a better choice, and I'll explain the theme part in the next chapter. For right now, let's just focus on installing this plug in. So with element or installed. You have settings here. There really isn't a lot to customize. They take care of pretty much everything for you. But if you feel like you don't want to use the page builder, plug in like on your blog's or uncertain pages. If you want to change the default styles that the plug incomes with, you can do that here. But really, I want advise doing anything with that. The whole reason we're using this is to make our jobs easier, so just leave things as is. 3. Set up your theme: with element or installed, We now need to install a theme for you, so we're gonna go to appearance themes. Now you're going to see that WordPress has already given us one of many default things that it's created for users. But he's a really just best. If you're creating a blogged, if you want to create any sort of website for your business with not necessarily advanced features, but features that do look more professional that the kinds of features you would see on a on a business website like social media icons, you're gonna want to use a different WordPress theme. So you can either add the theme here where you can add it here. And there are literally thousands of free themes you can choose from WordPress, the one I like to use, the one that I think works best with L. A mentor and still keeps things really easy is called Astra. So let's go ahead and install it now. Just to be clear, Although we are installing a WordPress theme, we're not really gonna do anything with it. We just need something to lay down a solid base so that Wordpress looks at the website and says, Yep. You have a theme. You could do what you want with plug ins. Go ahead and publish it. With Astra installed, it's time to customize your theme. However, I don't want you to use the customized menu. I want you to goto Astra options and use the shortcuts that Astra has given you. If you try to go through, customize and go through all the options, you're actually gonna end up wasting a bunch of time as you'll see in the next step. We're gonna be using element or templates to build our website. So they're going to take care of most of that stuff for you. They're going to decide fonts and colors and all that amazing stuff so you don't have Teoh . So rather than get caught up in what's under customized, we're just gonna focus on what specifically you need to do to get the bare minimum into your theme. That means you need to upload your logo. Customized bonds. Ignore this. Do not use this right now. You can change this later. If you don't like the funds that your template has put onto your website header options, you do need to to use. This is gonna help you create the menu in the header of your website and set colors and decide how you want the menu toe open and people to interact with it. This is something you cannot create or customize with element or the same goes for your footer. So if you want widgets down there like, if you want a link, links to your web pages if you want to include a small subscription form if you wanna create a personalized message whatever you want to put in the bottom of your website, you're gonna have to do that here. The other options over here I would leave them be. Your template might actually take care of them for you, so just take care of the bare minimum here. And then we're gonna create a new page, and we can fill in the rest later. 4. Create your home page with Elementor: Now we're ready to build our website, so we're gonna do that by going to pages and new. And the first page I always like to start with is the home page. It's crux of your website. So really, if you can nail the messaging and the design and everything on the home page, the rest is gonna be a breeze. When you open a new page, even though you have element or installed, even though you have Astra installed, it's still going to give you the default. WordPress editor. We don't want to use this. This isn't gonna help us design anything. It's gonna help us put some words on a page, and that's not at all what we're looking to dio. So let's give the cage my name, but save it as a draft, and then let's go into edit with L. A mentor. Even if you've never used a page builder plug in, this is gonna be a very short learning curve. In fact, it's just Azizi is dragging and dropping elements on the page and then moving them around wherever you need them. What we're gonna do instead is use a template. Now, Elementaries Library has page templates. That means a full page has already been created, and it has dummy content in there. So fake images, fake text, fake buttons. But it's all been well thought out and well designed, and you can actually take a look at them before you add them into the page. So let's say you're creating a restaurant website. Just click on the one that you're interested in. You can preview it and this looks great, right? There's nothing you have to do except go in and customize it. Add drone images and text your contact information, obviously, and you can also pick and choose what you want to appear. So let's say you love the look of one of the home page templates or an internal page template. But you feel like something's missing so you can go to the black templates and you could see if L. A mentor has created something to fill in the gaps. You could see here that there's a bunch of different blocks frequently asked questions. There's contact sections. You can add progress bars. I mean, elementaries really thought everything through. The only thing you have to be careful about is anything marked with a pro, the pink pro, and it will say it down here. And if you do try and choose one of those, it's gonna take you to the L. A Mentor website, where you have to upgrade. The good news is if you can't build what you want with a free template. When you do upgrade, you get access to the full library of pro up rates. Get all of the's pro blocks. You get all of the pro page templates and the same thing with the building block elements that we already explored. So operating might be worth it if you have a bigger business, if you're planning to scale up really quickly, if you're going to sell any goods on your website. But if it's just something basic, I would suggest starting with with a free template. For the purposes of what we're doing today, we're just going to choose a very basic template we're going to start with. Um, we'll do. The restaurant will say that you are running a restaurant and wanted toe look great click insert, and in just a few seconds, Elementary is gonna pre populate your page with everything it's already taking care of for you so you could see that that template we just left at is right here. So any of the elements you wanna edit, you can hover over them, and the second you click on them, the sidebar over here is gonna change, and you can adjust them. So if you want to change the alignment, if you want to change the size of the image and then the style is more, um if it's text, it's gonna be choosing the typography. It's gonna be choosing the colors. But like I said earlier, L a mentors done a really good job with building out these templates. So unless something needs to be swapped out in terms of an image or you're changing what the words say, I really wouldn't mess too much with the formula that's on hearing. I think this is very well composed page. So here you could just say bakery or, you know, whatever you need to swap it out is same thing. Here you have the photo gallery. You're just gonna edit everything over here on the side bar. So the second you click on an element, it will open up over here and let you do the editing. If you feel like there's just one little thing missing, there's no reason to try and build the page on your own or even try to build the block on your You can still leverage those block templates from L. A mentor to at least give you a head start. So, for instance, let's say we've gotten to the bottom and we just we want to add a frequently asked questions like, What time is your shop open? Um, how much does a small cup of coffee cost? Whatever the common questions are, that's what we're looking to dio. So you could see here when you select any section on the page, it's gonna bring up this little bar up here, and this allows you to add a new section above it. So we're going to click on that. And again, you can either drag a new widget, which is what these are over here and created yourself. Or you can leverage templates, and we're gonna use the blocks just a matter of finding when you like. And that fits the overall style of the website. I think maybe this one yeah, that looks fine. And if I'm not happy with it, I'll just change the colors and customize So you can see now its added a completely new section to your website, and it's the same thing. Is, is anything else. You're just going to go over here and everything, So, like I said, um, what time does your store open? Things can be is complicated or simplest and answers you want. Just make sure to go through this one more time before you commit to it. Make sure you have swapped in, um, any images and text that makes sense. You've added the new sections that you want and deleted the ones that you don't need. So, for instance, let's say a testimonial doesn't make sense for your business. There's no reason that push it. You don't have to include this section, you just delete it and then it immediately emerges the other one now with Element or you have a few options for saving Justus. You do with WordPress, but publish means it's actually gonna push your website live. And if you're not ready for that to happen, you could just use your save options here and save it as a draft and another neat thing. I mean, there there's a lot of stuff that you can look through here, but the one that I think is important for you to know is the responsive mode, and this is really cool because it lets you take a look at your website and actually build your website based on the device the user would see it on. So in this example, this is what it looks like on a tablet Miss one big on a mobile device, and you could see that again. Elemental has done a really good job in planning this out so that this top image it's completely above the full. That's what this, this Linus here. So there's no need for users to scroll. You don't have to customize the size of the different sections they've created. They've already made this so that it looks great on any device, and that's exactly what we want. That's exactly what your visitors air expecting to see, and that's what Google's going to reward you for. So that's another one of the benefits of using an element or template to build a website. Then, when you're good to go, I just always bring it back to desktop, since that's the default mode and you can preview your changes from here. And this is what your home page is now gonna look like. Once you hit that publish button and it goes live, this is your new website. 5. Create your internal pages with templates: with your home page done. You now just have to fill in the guts of your website. For most business websites, that means an about page, a contact page and depending on what you're selling, it might be services page, product, page a portfolio, something that gives a bit more detail about what you're offering to the visitor. But I just want to show you right now is how to put together an internal page and then turn it into a template so that you don't have to redo the style for every single page on your website, and you can create a nice, clean, consistent look site wide. So let's add a new page. And this is the same exact process we did with the home page. Only thing as you're gonna template ties it. So let's call this your about peach, and we're gonna say that as a draft and go to edit with L. A mentor. You already know what you're doing here. You're just gonna go straight to the templates so element, or has this library? Some of them are pros. I'm on number free. We happen to start with the restaurant home page, so let's see if there's a restaurant internal page, whether it's an about page or something else. So it looks like they have created specific pages for restaurants. However, most of these air pro with the exception of this contact page and this looks great. So if you have a multi location restaurant or even just a singular location and you want to delete this, this would be a great page to just slap up on there, fill in with your own text and images and publish it. Or we can just go back Teoh the list of pages and we can see if we can find a just a regular landing page that is somehow related. So for a restaurant, I would look for something in hospitality, maybe like a hotel. Um, and actually, this 1st 1 this 1st 1 would work. But we'll use this as our example so you can see that it added its own header section, which we don't want to do because this is automatically going to get stuck to the top of the page. So we're just gonna delete this, and now we just have this image here, and you could see here. It's not something you can hover over and select. So instead you're going to edit the section because that's how it's been built into the page. And then from here, go to style and you can choose a new image. And in this case, you're gonna want something that looks good for your restaurants. So let's say you want to use the same exact image from the home page that would give it a nice, consistent look. You don't have to do any other work tryingto find, ah, an image to go here. It's already there for you, and it's already properly sized in this section. We're gonna call for reservations credit shoes, and then we change this. Make a reservation. Of course, Any time you customize anything that's in this template, you have to make sure to dot your I's and cross your T's s case. You would have to add a link to your reservation form, and that might be on a completely different platform from your website, where it might be using a premium plug in and a peach you've created. But that's something you're gonna have to work through as as you do this. So let's say this is for an about page. You might wanna use something like this. It's just a basic introductory block, and this would give you a chance to explain your company's history where you've come from, you can delete this part if you don't want them to read more. If this is just the text that that you want there, um, let's say you want to include a list of services or different kinds of menus. You just wanna put a bunch of blocks in there and you don't want to have to build the mountain size. All that jazz. That's fine. Just scroll through. You could see there a lot of blocks in here that have already been made. So our services you could use see what else image services you could put, Um, an icon or image there that represents your brunch menu, your lunch menu and your drinks menu. Something like that. But let's say that you're happy with this. You really like your about page, and you want this to be the basic structure for the rest of your website. We're going to save this draft because we want this to be our actual about Paige, and we're also going to save it as a template. We're just gonna call it internal Page template. In that way, when it comes time to create other pages on the website, we're not gonna leverage elementaries templates were going to use our own. So to do this, we're gonna exit out of here, exit to the dashboard, which takes us to the original page, gonna save our draft one more time just to make sure the changes have been committed. And now we're gonna add a new page. In this case, we're gonna call it services. Each can be any page you want any page that is going to use the same exact structures the one we just created again. Click on Edit with L. A mentor and from the templates, we're now going to go to my templates and you can see this now exist. So we're gonna insert it and there you go. You now have the about us page or the template that you've created automatically inserted. It'll save you a lot of time in creating the rest of your website and getting this published an online for people to find 6. More things to do with your fast and attractive website!: Alright, guys, that's it. You've created your website using WordPress in the Element or Page builder Plug in. Now it's time to hit that published, but in and make sure all of those pages and all that work you did actually goes live on your domain. Do you run into any problems if you have any questions at all? If you found any meat little tricks with the templates that are available in the library or with any that you've created, I love to hear about it. Feel free to leave a comment below the L A mentor page and block template library. There's just a lot to work with their and for free. So, um, I'd be interested to see what you guys have done. I'm sure everyone else would as well. And if you have any questions at all, feel free to message me here, COMESA tree on Twitter or my website as well, and you can follow me here for a more course. It feel like you're ready to take your website to the next level. The next step is to take my very first course. You don't have to go through the initial stuff where it shows you how to set up WordPress or theme or anything like that because you've already done it. But you do want to watch the last few chapters that cover all the plug ins that you need that will make sure your websites running fast and it's secure that it's ready for S CEO, and it will make it all lot easier for you in the future. And then the next step is to read my block post about the element or add ons that you can use. A lot of them are free, and they let you do a lot more with all of those element or blocks. So if you're feeling like this is a good start, but you want to do more with social media with images, um, with more business features, you're definitely gonna want to use, um, plug ins, and I've covered the top list of plug ins There. It's all include a link below that you can follow. Otherwise, that's it. So please dio share your websites below. Please do let me know if you have questions and I look forward to sharing my next course way