3.2 Menu & Hours Pages

In the case of our bakery site, it's going to really help us to build out pages to list our menu and hours. These are two crucial pages for basically any business. Even if you run a service business, you might have a menu, so to speak, of services that you offer. Let's dive right into creating those pages. Let's start off by jumping in the Pages and creating a new page. This type I'm going to start off by creating the menu page, then hitting publish. Let's go ahead and open up the Frontend Editor, just as we did with the homepage. Now, the first thing that notice here, is this banner that we need to remove. This is called the breadcrumbs. And just like Hansel and Gretel in the fairy tale, breadcrumbs are used to help visitors find their way back on the website. When you have pages that go several levels deep, breadcrumbs on the side are used for navigation. But since we're building a simple website with no multi-layer pages, we need to disable it for this page. Eventually, we'll add a menu right here at the top. So there's no need to double up on navigation. If I switch back to the WordPress admin panel, let's go back to the Page settings for our menu page. On the right side, I'll disable Breadcrumbs with this option box. Then scroll back up and press Save. Let's jump back to the page builder and refresh and now that's gone. Now let's use some content blocks, just like we did in the last lesson to build out a menu set up. What I'm picturing here is three rows, each with two columns. On the right side, we'll put a favorite image that fits the category. On the left side, we'll have a description of that category of item and then bullet in what we offer in that category. Let's start by adding in a row and then come back to the settings here to set up the columns. For this, I'm going to do a two-thirds and one-third setup. I'll use the left side for menu descriptions and then an image on the right side. I'll choose a layout that looks like that and then press Update. Let's say that those categories for our bakery are bread, baked goods and bagels. So for each row, I'll have a text block on the left side to list off the information and on the right side, I'll drop in an image. For the first text box, I'll give it a header title with an H2 element and then add the details below. I'll bullet point out the individual items, along with prices to make it easy for our visitor to browse. Let's jump ahead and go ahead and lock that in and then prepare to add an image here to the right side. I'll add that as a block and then start browsing to the image to add here. This is also a great time to remember that a subscription to Elements includes access to stocked photos that can be really helpful when building a website. Obviously, you want to fairly represent your products. But while you're getting up and running, you can include placeholders to see how everything will look. The same Element subscription that includes WordPress themes like Bonfire, unlocks all of the stock photos that you'd ever need to build website. Moving back to the page builder, let's go ahead and jump ahead while I build out these other categories. I'll simply repeat the process of adding blocks and filling them in with the details. It might seem like this is kind of specific to the fictitious bakery that I built for the purpose of this course, but just remember how many businesses you can apply this to. You could just as easily showcase the types of websites you build, or the design services that you offer. Let's lock in all of the changes and then jump over to a preview of the site. It's looking great. Last stop, let's build one more simple page in this lesson. The page that shows are hours. I'll go back to the WordPress admin panel and start setting that up with the title. I'm also going to make sure that I disable the Breadcrumbs for this page as well, by ticking the box and then pressing Save. Let's jump into the page builder again. We're going to have a dedicated contact page, but we want to make it easy as possible for people to stop by and see us. We also already have contact details in the footer so lets leave this page really dedicated to our hours. Again, lets go ahead and add in a simple text box in the page builder. From there I can simply use this easy editor to just type in and add our hours that visitors can reference at any time. There's no need to get fancy with a page like this. Many visitors are looking for the quickest way to find out when they can stop by your business. Less is more when it comes to a page like this. Let's go ahead and save everything and then have a quick look at the page. That's it for these two important pages. In just a few minutes, we built out two critical pages that basically every business needs. In the next lesson, we'll finish up building out pages. Stay tuned.