2.4 Setting Sitewide Design Options

Before we build out the individual pages, we should change the design settings that'll impact the entire website. This includes changing out common design elements like the header style, the logo and featured colors. We only have to change many of these once and they'll take effect for the whole site. To do that, let's dive into theme settings by starting in the admin panel and scrolling down here on the left and find the Apr Options panel here in the menu. This is where many of the site-wide design options are controlled. So let's get started by clicking on it to open up the options. We'll go ahead and click on this section titled logo to open up the settings that can control the logo and the fave icon. Let's start off by clicking upload and pointing WordPress to a replacement logo for our own business. The nice part about settings pages like this is that this replaces each instance of the logo all over the site. Let's also swap out the fave icon, which is the little icon that'll show in your address bar when a visitor is on the website. The next thing that I want to tweak is the preloader, which is the animation that plays while the site is loading. By default, Bonfire has this animation that plays before the site loads. But I wanna turn it off for simplicity sake. In the preloader settings, I'll just go ahead and switch to disable to turn it off altogether. Let's jump into the skin section and click on general to set a variety of settings. The general background setting allows you to set, either a solid color for the background or browse to upload an image instead. To keep things simple, I'll stick with a light neutral color from the chooser. But if you had a key image you wanted to use in the background, keep the options in mind here. Next up, there's a section where you can change the font that your site uses. This pulls from the free collection of Google Fonts and you can choose any font from there to use on your site. You can survey those fonts at fonts.google.com and find one that fit your side as you're seeing me do here. This is really a huge library of fonts. So spend some time browsing and decide, if you wanna change the default font in Bonfire. Coming back to the Bonfire options, I can simply start typing and find one and select it from the list. You could also tweak the font color in tandem with the other color scheme tweaks you make, but I've mostly left these default for the sake of simplicity. You can also set the primary color which controls many of the icons, key text and buttons. Let's tweak it and press save to lock in our settings so far. Now, let's go reload the site and see our changes in action. There's still not much content here, but you can see that some of the stylistic choices are taking effect. Always make sure that you're hitting save settings anytime you change something in this options panel. We've set a number of settings here. And now, let's take a pause before we move on to finishing the settings for our site.