Day 15: Adding the Site Icon & Other Customizations
Single Page or Single Post
IMPORTANT: You very likely DON’T need to customize these at all because if you like the template you’ve installed, then just stick with the current spacing of the content on pages and blog posts.
If you go to Page > Single Page or Blog > Single Post, you’ll find the options to be nearly the same.
You can change the container width so that it’s different for the width you chose earlier for the whole site. I recommend sticking with the boxed or normal one.
For the titles, you can change the Banner Layout, which means having your page or post titles to the left by default, as in the first picture, or placing them on a colored background.
Site Identity & Additional CSS
Under Site Identity, you can upload the favicon, the image that you see in lefthand corner of a browser tab, usually a small version of the logo. Additional CSS is where you put the extra code to style the theme even further.
For example, in the free version of Astra, there are no options to change the background color of the page and post titles, so I can add custom code here to do that.
Responsive Web Design
Notice at the bottom of the customizer panel that there are three icons for the different devices visitors use.
When you click on them, you can get a preview of how any page looks on those devices. And when you change settings in the Customize panel, they will appear on the preview screen as well.
While this tool for responsive design can be helpful, it’s not always 100% accurate, so it’s best to check on actual devices of different sizes or use a more reliable platform for previewing on different screens. You’ll learn more about this in a later module.
Why Go Astra Pro
If you want more flexibility or options for customizing the following things because you find the defaults limiting, then purchasing Astra Pro is a fantastic idea.
- Nav Menu
- Blog Layouts
- Site Layouts
- WooCommerce
- Sticky Header
- Page Headers
- More Color Controls
- Better Typography
- Site Builder
- Scroll to Top Link
- Footer Widget
- Header Sections
- More Header Designs
- Spacing Control