CloudApp in Breezi: a Clean White Website
Last time we did a breakdown based on a Mac App.
Today we’ll do another, this one is called CloudApp, for sharing files.
Preview of the original CloudApp site
We’ll analyze the original site to get a glimpse of what we’ll do in Breezi. Note that we will be recreating only the homepage.
These are the containers and apps that we’ll use:
- Header: Logo & Navigation Menu
- 2 Columns: Image/Navigation
- Intro: Banner & CTA
- 1 Column: Image
- 1 Columns: Button
Text
- Body: Features
- 2 Columns: Text/Image
- 2 Columns: Image/Text
- 2 Columns: Text/Image
- 2 Columns: Image/Text
- 2 Columns: Text/Image
- Footer: Copyright Info & Navigation Links
- 3 Columns: Text/Navigation/Text
We’re going to take the same modular approach from last time. We’ll take on the following in this order:
- Layout
- Apps
- Content
- Styling & Configuration
Layout
We’re starting from scratch, you can do so by resetting your site and choosing a blank template.
As mentioned above, we’ll have 4 Blocks. It won’t be necessary to create additional Blocks, since the blank template already has those 4.
This is the layout we’re using as a starting point
Header and footer will only have one section, intro Block will have 2, and the main (body) Block will have 5 sections.
Add sections by clicking on this white button below any other section
We’ll also create some columns (by splitting an existing one) where needed. And adjust the width of them accordingly.
You can create columns by splitting one that already exists
The empty layout will look like this:
Blocks, sections and columns ready
Apps
Installing apps is the next step.
From the App Store we’ll drag all the required apps into the right columns.
To install an image, drag and drop this button into your layout
Content
Now, we can begin inserting images, editing text and items, and adding all necessary content.
We’re changing the default images of the Image app
When dealing with images, sometimes (depending on the containing column) they appear larger or smaller. In these cases we can adjust the size back to 100%, or desired scale.
Dragging the corner of an image to resize it
Note that we’re only adding content here, not changing colors, backgrounds or style.
We’ll edit the navigation items by clicking on the “Edit Content” button of the Navigation app toolbar
Once content is set, we’re half the way.
Once content is entered, mostly styling is what’s left
We may mark some text as headings of different levels, for example H2. This will be helpful on the next stage, when we’re editing the style.
Marking them like this will let us use the Bulk Style Editor later on and edit them all at once
Style
We’ll now begin changing colors and adding style to our apps and containers.
This can mean alignment for an image:
The alignment for an image is changed in this dot
Or changing the default/rollover colors of the Navigation app:
Changing default and rollover colors on the Navigation app
Or editing the button’s background color, gradient and border:
When selecting a border color for one side, you can click on the chain to make them all the same
For some items, like text links or headings that we may have previously set on the content, we can use the Bulk Style Editor to edit them all at once.
The Bulk Style Editor can help save a lot of editing time, doing it all at once
Additional Configuration
We’ll use a custom Favicon. From the shelf, we’ll select “Favicon & Breezi Badge”, and select a file.
Favicons are shown on browser’s tabs or bookmark lists
We’ll also make some changes on the page settings.
We’ll change page name and SEO fields
The page name, meta keywords and meta description are important for SEO purposes, so we’ll update those.
The most important aspect for SEO is the title
We’re Done
Here’s a preview of what the finished site in Breezi looks like.
Click to enlarge this Breezi version
Did you enjoyed this how-to? Please share your thoughts!
