3.1 Homepage

We've got the theme installed and the plugins that we need activated as well as the design options set. Now it's time to move on to building the pages that we need for the site. On the WordPress admin panel, let's come over to the Pages panel here on the left side and we'll click on Add New to get started. Now, we're on the WordPress page where we can create new pages for our site. Let's go ahead and type in Home here at the top and press save to go ahead and lock this page in. We also need to set this as the homepage for our site. We need to go down to the Settings > Reading option here below in the WordPress admin panel. WordPress was a blogging platform first and it defaults to showing the latest posts by default. So we need to change it from showing the latest posts to a static homepage. Let's tick the static page box and then set the Homepage to Home. I don't plan on implementing a blog for this site, so no changes are required to this post changes drop down. Let's save this and jump over to our website, and here we are on our homepage. We haven't added any content yet, so it's not surprising this is a blank slate. But that's a great chance to get started with building it. Jumping back to the page editor, it's time to get started with building our site. Below where we set the title, we have a blank content box. We can type in this box using the editor and whatever we put here is going to show up on the site. But, thanks to the plug ins that come packaged with Bonfire, there's a much easier way. I'm going to click on Frontend Editor to jump into a plug-in that makes it a breeze to build out a website with drag and drop tools. That plug-in is called WPBakery and it comes packaged with Bonfire. It basically makes it possible to drag and drop and build out your website. You can just add different types of content blocks and fill them with whatever you want. Lets get started by clicking on Add Element. Each of these is different content blocks that we can easily add to the site to make it appear just the way we want. For the homepage, I really wanna keep it simple. We need to build a good looking homepage that makes what we do clear quickly. I'm going to feature a simple image slider that captures people's attention with our products, then some text boxes below to add some detail. On the Add Element screen, I'll just start typing image and find the Image Gallery block. Let's go ahead and select it. There are a few options that we can set, but the main thing to set here is to simply add in our images to the slider. This is going to lead to a strong impact on visitors from the get go. I'll set the image size to large to use high resolution, high quality images. Let's go ahead and click Save Changes to lock everything in. This is the idea of using Bonfire, and the plugins that are packaged with it to build out a website. We didn't have to code up an image slider from scratch, or futz with writing any kind of code. This slider is just a block that we drop in easily, thanks to WPBakery. I'm walking you through building an example site, but there's no reason you couldn't build something totally different with your own options as well. Next up, let's add a text block. I actually want to add a text box above this image slider to lead into the page. It's important when you're building a website that you think about how search engines will view the site. Let's scroll down and click the plus button here to add another box. There's plenty to learn when it comes to optimizing your site for search engines but for the basics, let's just make a text box with a header that describes our business main purpose. I'm going to highlight that text and make it a header element, so that readers and search engines know that it's important. Now we actually want this block to be at the top, so I'm going to grab one of the handles here and actually drag and drop it up to the top. This is really one of the benefits of using this WPBakery page builder. As you build out the website, you can always drag and drop to reposition the box into the order that you want them. Now, the last thing that I want to add to the homepage are three text boxes that describes some of our key product lines. This time, I'm going to press the plus button and then chose row. Let's open up the options for the row here on the left side and let's set this to be three equal columns. This menu helps you add more than one block to a single row and automatically shows it in multiple columns. You can basically pick the proportions that you want boxes to show in. Once that's on the Canvas, let's press the plus button for one of these boxes. I'll choose text block from this section. And as we saw with the header, we get a text editor that we can simply type content into. At the top of this, I'm going to type in what I'm going to describe, and set that as the Heading 2. Since we already have a Heading 1 on our site, we need to make future headers h2 or less. Basically, you don't want to use too many of the same header type, as search engines crawl your website, so that they'll know what's important. Then I'll simply use some paragraph text to describe each item. When I'm finished, I'll simply click on save changes. Then I'll use each of the other boxes to include descriptions for other items. Jumping ahead, let's go ahead and press update to lock in all of the changes and save our site. And I'll jump back to the preview, that's it. We've built out a great-looking homepage that acts as an effective segue to the rest of our content. It's simple, but the combination of this image slider and brief descriptions of what we offer will get visitors excited about the site. In the next lesson we'll keep building out these key pages. Stay tuned.