Ask a Question ?
Design & Publish Websites Faster

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

Preview of the original CloudApp site

We’ll analyze the original site to get a glimpse of what we’ll do in our web design app. Note that we will be recreating only the homepage.

These are the containers and apps that we’ll use:

  1. Header: Logo & Navigation Menu
    1. 2 Columns: Image/Navigation
  2. Intro: Banner & CTA
    1. 1 Column: Image
    2. 1 Columns: Button
      Text
  3. Body: Features
    1. 2 Columns: Text/Image
    2. 2 Columns: Image/Text
    3. 2 Columns: Text/Image
    4. 2 Columns: Image/Text
    5. 2 Columns: Text/Image
  4. Footer: Copyright Info & Navigation Links
    1. 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:

  1. Layout
  2. Apps
  3. Content
  4. 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.

4 Blocks on the layout

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.

Adding a section on the intro Block

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.

To create a column, click on the "plus" button on the left side of the column

You can create columns by splitting one that already exists

The empty layout will look like this:

Empty layout: setting the context

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.

Installing an image app

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.

Updating an image on Breezi's image editor

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.

Image resize on the header Block

Dragging the corner of an image to resize it

Note that we’re only adding content here, not changing colors, backgrounds or style.

The Navigation app toolbar

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.

A preview of the header and intro Blocks

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 some text as Heading level 2

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:

Style Dot for an image

The alignment for an image is changed in this dot

Or changing the default/rollover colors of the Navigation app:

The Navigation app "Edit in Place" toolbar

Changing default and rollover colors on the Navigation app

Or editing the button’s background color, gradient and border:

Style Dot for a button

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 with the H2 text tab selected

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.

The dialog box for replacing the Favicon

Favicons are shown on browser’s tabs or bookmark lists

We’ll also make some changes on the page settings.

Page menu from the shelf

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.

"Edit Page" settings panel

The most important aspect for SEO is the title

We’re Done

Here’s a preview of what the finished site in our platform looks like.

Small Breezi version of the CloudApp site

Click to enlarge this version

Did you enjoyed this how-to? Please share your thoughts!

Menu