Ever wanted to have more control on the design of your website in Rapidweaver? That's just what you get using the BlocksBox Air theme. BlocksBox is a so called empty theme without any predesigned elements. You are free to create everything yourself so your sense for design is a big plus.
To create the layout you will need a plugin like Blocks or Stacks. As a result, large navigation and blogs, are not very practical to incorporate. For single page websites it is possible to use plugins like Carousel and Accordion just like the page you are looking at.
With BlocksBox Air you can easily assign your custom images to the background. These images can then be positioned and optionally repeated in various directions. You can choose from a large amount of optional widths, from 300 to 1400 pixels and three variable widths. Besides these there are numerous styling settings including typography, text and specific page styles.
Below you see all style options you can find in the Page Inspector
Websites build with BlocksBox.
What people say
"Easy is an understatement with blocksbox."
"For me the only real reason to choose Freeway over RapidWeaver was the 'blank page' approach to designing a site, now RW has that and much more, yippee! "
"This theme is probably one the biggest breakthroughs in theme design for Rapidweaver."
"Thanks for making this great theme - without it Rapid Weaver would be much less useful to us."
Getting started with BlocksBox Air
Welcome to the BlocksBox Air manual. This manual is dedicated to help you quickly start to use BlocksBox. In the Page Inspector Style tab all BlocksBox specific settings can be found for you to customize the layout of your website.
Every time you are going to use BlocksBox for a project it's recommended to make a duplicate of the original theme. This way you can always revert to a clean version. Besides being more safe you are also having more room for adding your own custom images.
Since there are no predesigned elements in BlocksBox you will have to create the navigation yourself. The navigation needs to be created using a plugin. You can choose between Blocks and Stacks. Accordion and Carousel are great options if you like to create a single page website.
The navigation can be created using text-links, image-links, stacks and even embedded pages. Embedding other pages is done using either Blocks or PlusKit. This way it's possible to use plugins like Kwix for navigation.
In the next part we will have a more extensive look into these plugins.
BlocksBox is all content area. No predesigned elements which stand in the way.
One of the major reasons Blocks or Stacks are necessary is the fact that you need to create your own navigation with them. Although completely different both are great for layout. Blocks offers precise positioning of your images and other elements, everything has a fixed height and width. Unlike Stacks, which is very flexible, but less good in positioning and overlapping. Although Blocks and Stacks are the main plugins to use, other pages can be embedded using a Page Block.
If you want a single page website you do not need to worry about navigation. Thus you are free to use plugins like Accordion and Carousel which are a kind of navigational structures on their own.
To avoid most common mistakes we will now discuss the main plugins briefly.
Every time you create a Blocks-page you need to set the IE Overflow Wrapper to 100% in order to prevent some unwanted margins to appear. The IE Overflow Wrapper settings can be found in the Block Inspector.
On the same tab in the Block Inspector you will find the settings for both the width and height. Make sure to set the width less then or equal to the width specified in the Page Inspector.
In Blocks all elements have a default Margin which can be changed inside the Block > Style tab. Without these default margins it is easier to position elements since you do not need to do any math. On the last tab of the Block Inspector you can create a Grid. Both Guides and Grid are great for quick and precise positioning. Once you get used to these features you will definitely start to appreciate them a lot.
In Blocks you can create links from text and images. One of my favorite features is the possibility to create a mouseover-effect. The mouseover-effect is great for creating custom navigation as well. If you have a large image whereby only a small area or multiple parts need to be links you can use empty Image Text Blocks on top of the larger image. These Image Text Blocks can be made into links without being visible.
The first BlocksBox setting you will probably encounter is the width. You can choose any width from 300 to 1400 pixels in steps of one hundred pixels. New in BlocksBox 5 is the option of a variable width. This has been added for more flexibility when using a plugin like Stacks for example.
With BlocksBox it is really easy to have your own imagery positioned and optionally repeated. There are a total of nine positions for you to choose from. Images can be repeated in either horizontal, vertical direction or both. The final option is to have the background image fixed. When fixed the background will not scroll with the content.
You do not necessarily need to use an image for the background. Using the Color Picker it is possible to set a background color.
Custom background images
You can use your own images in the background of the body, header, footer and content area. Therefore you will need to enter the BlocksBox (Theme) Contents folder. Before adding your own images make a duplicate of the BlocksBox theme if you have not done so already.
Without optimizing your images a website can be really slow. Photoshop has the possibility to Save for Web & Devices.
In the following steps we will guide you through to process.
Step 1: enter the theme contents folder
Open the Theme Drawer in Rapidweaver. Right-click on the Theme Preview and select Reveal Theme Contents in Finder... A new finder window will be opened and you will see a couple of files and folders. Open the images folder. Now you can save all images. Later on they can be selected using the Page Inspector.
Step 2: naming and saving
In the Page Inspector you will see names ( i.g. background and header ) and extensions ( i.g. .jpg and .gif ). When saving files you need to be sure the names and extensions are spelled exactly the same as shown in the Page Inspector. Otherwise the connections will be broken. Now you can select the image from the Page Inspector and set both the positioning and repeat which we discussed in the previous part (Layout).
Here you can set the overall colors for Text and Links in both normal state and when they are hovered. Links can be underlined and have a background color with a hover state as well.
That's it. We hope you are now ready to explore the possibilities of BlocksBox on your own. Good luck!