2.5 Setting Sitewide Design Options, Part 2

In the last lessons, we set a number of design settings for our website. Now we are going to wrap up the rest of those settings in this lesson. So that we've laid all the design groundwork for our website. Returning to the settings let's jump into the Yypography section. We changed the font in the prior lesson and what we need to change now is the header fonts. As you can see here the font we chose in the last lesson doesn't automatically feed through to being our header text fonts. I'm going to update each of these to use the same font. You could use a different font for the default than you're using for the header as sometimes it does look nice to pair fonts. But for our example, I wanna move quickly here, and I'll keep it as the same header for each. You could also set a different color for your headers using the color chooser, or tweak the font size slightly here for each one. Each of these different header options represents a different header level tag that websites use. An H1 header is for the top level heading, you can use H2 for second level headings, and so on, and so forth. Last up, let's leave the button font set the default as a nice contrast to using our key font everywhere else. Let's go ahead and Save our changes now. Let's jump into the Header options now. You can choose one of these other header styles, and I'm going to pick one of the lighter color ones for my site. Any of these are a good choice, now that we're using a lighter color header. I also need to browse to and update a logo that will fit that form as well. When you're changing design elements like the header, you need to be on the look out for things like change in the logo so that color schemes match. Below, there is a varieties setting that you wanna check out based on your site needs. I'm tweaking a few setting, including search, the cart and sticky header which keeps the data on top of the page. Switching to this side header information, let's also go ahead and take the time to set up our contact details that are in the header. We'll also jump into the Header Styling section. Now this top section really allows you to tweak the way that your logo appears. If you uploaded a custom logo you might need to tweak settings for where your logo is positioned, or how much padding is around it. The rest of the settings aren't going to be relevant to the site we're building, so we'll skip past them in this video. You could also tweak any other background colors here, I'm going to go ahead and hit Save again. Last up, let's also take a look at the Footer settings. Much like the header, there are built in presets for how we want the footer to appear, I'll change over to a different one. Now we need to add our logo here to the footer so that it shows. You can actually use a different logo if you had a smaller one and you wanted to use in the footer, for example. And finally, let's go ahead and update the Copyrights and Description Footer text here with the text permanent to our website. This will lock in the footer settings for each and every page. Let's jump to the Social links which involves adding all the social media that we have. For the purpose of this course I'm not going to add any social links for my fictitious business. But simply change this option to On, and then drop in the URL for each of your social media profiles. Finally, the Footer Styling section has plenty of settings to change out your featured colors, if you really want to customize things. Bonfire looks great out of the box, so I'm going to leave these set as is, and hit Save Changes to lock in my settings. That's it, we've set up most of the important settings that control the overall look and feel of the site. There is plenty of customization options that you can apply for your specific business. Now, it's time to build up the content for our website using Bonfire.