Instructions
Introduction
The following instructions have been designed so that you can be exposed to the Big Breeze’s features in the order that you are most likely to use them. It is not an exhaustive explanation of the Big Breeze’s features, and it is unlikely that you will have to learn how to use every control to set up your site. If you have any questions, then please post them to the forum.
Troubleshooting the Customizer and Preview Pages
Most of your site will be designed in the customizer. The customizer is a great tool, but it isn’t perfect. There are a few things that you should be aware of when you are updating your site. In particular, you may use one of the controls to make a change, but you may not notice the change that you expected. You can troubleshoot using the following methods:
- Make sure you actually updated the control that you think you updated. Some of the controls look similar to each other. Did you flip the switch that you meant to flip?
- Make sure that you are on a page or page size where the change is relevant. Not every change affects every page or page size.
- Make sure you don’t have another control that is contradicting the control that you are using. Most of the controls are independent. But some of the controls offset the values of other controls. Think about updates that you have already made which may be contradicting your new updates. Did you add anything to the Additional CSS section?
- Make sure the customizer actually made the update. The customizer and preview pages are not perfect representations of your live site. They are only demonstrations of your live site. They don’t always make all the updates that they should. Try setting the control back to it’s original position then resetting it again and see if that makes the change that you are looking for.
- Make sure the media has loaded properly. Sometimes the size of your media is too large to be serviced by your server. You can try to reload it or you can go to the main admin page and adjust the size of your media in the main admin section. For example, if your logo is loading too large then go to Media, then select your logo, then select “edit image”, then change the height to 88. Although when it comes to logos, you may be able to save yourself the hassle if you add your logo using the customizer. Don’t add your logo using the logo block.
- If none of these methods resolves your problem, then please post your issue to the forum.
Building Your Homepage or a One Page Site
To build your homepage or a one page site, just head to the different sections of the customizer in the order that they are written below.
To open the customizer from the admin center just go to Appearance > Customize.
Colors
Start in the colors section of the customizer. You can start at the top of the section and work your way down until you reach the opacity range bars. You may want to read the remainder of the controls, but you probably won’t need to adjust them. The only exception would be if you plan on using WooCommerce with bright colored text. If you do, then you will want to look at the “WooCommerce Dark Mode” control.
Typography
The Big Breeze theme gives you access to the entire free Google fonts library. All you have to do is go to fonts.google.com. Find the ones you like then copy and paste the names into corresponding areas of the Typography section of the customizer. It’s not a bad idea to keep a separate text document that you can copy and paste the different names of the fonts onto, so you don’t lose track of what you tried.
Background Media
A background image isn’t mandatory, but it is encouraged. There’s tons of places where you can get free open source content. Three of my favorite resources are:
Once you are in the background media section, you’ll see a control that reads “Homepage Header Space”. You can decide how much you want to expose your background image at the top of your homepage using this control.
Navigation
Next, you’ll want to see what navigation is most appropriate for your site. You should make your way down the section and mix and match each control and see how each one interacts with the others. You can probably stop at the menu spacing control.
Footer
Next, you should head over to the “Sidebar and Footer Blocks” section, then enter the footer subsection. This is a good place to add social media icons if you use them. You can also go to the Menus section and create a menu to add into the footer section.
Set Your Homepage
Now, you’re going to go to the “Homepage Settings” section of the customizer.
If you want to create a one page site, then look under the control “Your Homepage Displays”, select “A static page”, then select a page or add a new page if you don’t have one. Make sure that nothing is selected for the “posts page” section if you don’t plan on using a blog.
If you want to create a multi-page site or blog, then make the selection appropriate to your site.
Blocks
In the Block editor, you can find several extra blocks that serve as multiple blocks at once. They are called instruction blocks. You can find them by searching the blocks using the key term “BB”.
You could set up these blocks from scratch using preexisting blocks. But implementing them as groups will save you time.
Building a One Page Site
The remainder of this section explains how to set a menu to build a one page site. If you are planning on building a multipage site, then you can skip to the next section.
Turn Off the Underline Current Page Feature
Go back to the Navigation section, then find the “Underline Current Page” control and turn it off.
Remove Your Excess Pages
Leave the customizer and go back out to the main admin page. Go to the pages and posts sections and delete every page that isn’t the front page, unless the page is important. If the page is important, then click edit under the page title, then when you’re inside the block editor click on “switch to draft” if it is not a draft already.
Create Your Sections
Your page should be broken up into different sections. You can define each section by adding heading blocks. For each heading block you’ll need an html anchor that can be found by looking under the advanced tab in the block section for the heading block.
The anchor may be filled automatically. It’s also not a bad idea to add a prefix to each title such as “bb-” so it doesn’t get confused with an anchor created by WordPress or another plugin. You should make sure that your titles are intuitive because you’ll need to remember them later.
Create Your Menu
Go back out to the main admin page then go to Appearance then menus. Select “create a new menu” then add your links under the custom links section. In the URL section, type in “#” followed by name of the html anchor for each section.
When you’re done adding all your pages, check the Primary box in the display location section and click save menu.
If you decide to expand your site in the future, you will be able to move your new menu to the sidebar and create a new menu for your main menu.
A Note on Conflicts Between Smooth Scrolling and Lazy Loading
The Big Breeze theme uses smooth scrolling. If you use lazy loading on your site, this can cause problems with smooth scrolling. What happens is the height of the body changes as it is scrolling, so the location where it is supposed to stop changes as well. However, there are a number of ways to resolve this problem:
- Make sure all your images load right away.
- Ignore the problem if the discrepancy is insignificant.
- Set your images to the side (like with a media and text block) so the text sets the height.
- Set your images as links that open in another page.
- Keep all your images below your lowest scroll point.
- Avoid using inner page links on pages with a lot of images.
Multi-Page Sites and Blogs
Sidebars
The Big Breeze theme allows you to add two sidebars to your pages area and two sidebars to your blogging area.
Sidebar Menu
If you are converting from a one page to a multi-page site, then can you move your single page menu from your main navigation bar into your sidebar on your homepage.
If you are interested in building a table of contents for a particular page, you can learn how in the One Page tutorial and apply the menu to the sidebar instead of the main navigation bar.
If you go into the menu section of the customizer, you’ll see that you can add a menu to the top of each pair of sidebars. If you want to control where the sidebar is displayed in the pages section, you’ll find in the Layout section a control called “No Sidebar for Static Pages”. It allows you to segregate the sidebar to your homepage or every page except your homepage.
If you want to segregate your sidebar menu even further, then you can go into your individual pages and turn off the sidebar for each page in the page tab under the templates section of the block editor:
This control is an example of a control in which page preview doesn’t work very well. You may need to push update to see the change.
Sidebar Blocks
You can also add blocks such as “Recent Posts” into your sidebar using the “Sidebar and Footer Blocks” section.
Homepage Header Media
If you go into the Homepage Header Media section of the customizer you’ll see a number of different options for adding media and video to your homepage. Once you have done this, you may want to revisit the Navigation section and determine if your current navigation settings are the best look for your homepage. When you add Homepage Header Media, the Big Breeze theme automatically replaces any Background Media on the homepage with the header media.
Featured Media
Featured Images
Like Homepage Header Media, featured images automatically replace Background Media, and header space is created when the “Header Space for Featured Media” control is set to “featured images only” (this is the default setting).
If you have already used featured images by using the classic method for adding one, then the Big Breeze theme will set the images for you. However, if you use the new featured image block, then you will be given additional options. Each featured image block has two new styling options which you can access in the right hand settings panel under the block tab. The first option is Fit Top. This will remove the featured image from the body then set the featured image into the background so that it can be displayed at the top of the page. It is set as large as your user’s monitor will allow without going outside of the screen. The second option is full top. This fills the image into the entire screen while pushing as little of the image off of the screen as possible.
Featured Videos
Featured videos can be displayed in the header area on single pages and posts.
WordPress doesn’t have a true featured video option, but the Big Breeze theme provides a high quality substitute. When you add a video block, you are given an extra styling option labeled featured. If you select this, then the video will disappear from the body of the page, and be reset into the background so that it can be fully displayed at the top of the page.
Whenever you add a featured video, it’s a good idea to also add a featured image. You should use a frame from your featured video. Featured images also create header space when the “Header Space for Featured Media” control is set to “featured images only” (this is the default setting).
When you add a featured image, it also improves mobile compatibility, and it allows you to avoid the manual creation of an excerpt with media. It also allows you to avoid having to make changes in the layout section of the customizer. The featured image will be shown on smaller screens and the featured video will be shown on larger screens. You can see a demo here.
Using a Featured Video Without A Featured Image
You can use a featured video without a featured image, but if you want to display it with header space at the top of the page on single pages and posts, then you will need to go into the Layout section of the customizer and find the control labeled “Header Space for Featured Media”, and switch it to the “On” position. Note that this will create header space on every single page and post regardless of the page’s featured image status.
Excerpts
You have the option of creating a custom excerpt. You can use this to display featured videos in your posts page. Under the post tab of the block editor in the right hand setting options, there is a section labeled Excerpt. There are many ways that you can fill this in.
If you want to create a video excerpt, I recommend clicking on the video block, then selecting the three dots on the right of the options panel above the block, then select edit as html—make sure you select featured first in the block styling options. Copy and paste the html then put it in the excerpt, then copy and paste or write whatever you want written beneath it. And if you are familiar with html, you can also wrap the video block in an anchor to your post.
If you do this with a featured image attached to your post, then the featured image will replace the video on small screens. If you don’t use a featured image, then the video will always display. If you don’t add a video to the custom excerpt and you use a featured image, then the featured image will always be featured in the excerpt; and on the main page for that post, it will replace the featured video on small screens.
A Note on featured videos, excerpts, the query loop block, and latest posts block
Featured videos in excerpts are designed to be run on the posts page. They are not designed to be run in query loop blocks and latest posts blocks, and are turned off in these blocks. You should avoid displaying these block if they display featured videos, especially if they are being displayed on single pages or posts.