Hey there! Today we’ll present the first of a series of experiments consisting in recreating live & working sites from around the web.

The idea is to present examples of “real” sites and how they can be made in Breezi.

Video

Check out this video of the whole process. Its a bit long, but it shows each and every step! Be sure to watch it full screen and in HD.

Steps

We took the flow of this micro site’s homepage and made them into blocks in Breezi. We’re going to go block by block, step by step.

These are the sections of this post, as we organized them in logical blocks:

1. Header (site logo and navigation)
2. Intro – (featured section & intro)
3. Body 1 – (portfolio of projects)
4. Body 2 – (about)
5. Body 3 – (blog summary)
6. Body 4 – (client testimonials)
7. Body 5 – (contact form )
8. Footer – (copyright information)

Before Beginning

We’ll start with the assumption that you’ve already created a site (else, go to our homepage and click on Sign Up!).

Once you have your site open, go to the shelf, open the More menu, and reset your site.

We’ll do this to pick a new starting point. Look for the one labeled “Blank”.

This will get us an empty page, from where we’ll start.

1. Header Block

The header is what we’ll do first. This is how the original looks:

Select the Style Dot of the block, and change its color to white. By default it comes in gray.

Next, we’ll merge the columns to have just one (as the original). we’ll also create an additional section below current one.

Now we’ll put the apps in place: an Image app for the logo, and a Navigation app for the menu.

We’ll customize them accordingly, switching the default image with the actual logo, and editing the content of the navigation.

The image will need resizing, as it appears by default at a larger scale.

The navigation may need some more customization, as it comes with more default data. Let’s open its settings and change its alignment to “Center”.

Now we’ll change the content, and add the respective links.

We’ll also delete the sub level links (on “Manage Links”).

Next step: customize the font. We’ll use “Raleway Thin” as it resembles the original “Helvetica” font. We’ll change the color to a custom gray (Hex code #747474) for the default color and a blue (#419efb) for the rollover. Also we’ll select 24 for the size, and remove the bold.

And this is how it would look.

2. Intro Block

We’ll continue to the Intro block. Here we find an intro and some featured items in a slideshow.

First, let’s edit the background (on the style dot).

Once the block’s dot is opened, check the box for “Background Image” and click “Edit”. This will open a new window with default image backgrounds. We’ll use a custom image already prepared for this purpose (a grayed gradient).

It’s important to select “Repeat Horizontally”, as the image is not wide enough to cover the whole area. This option it will make the image repeat as many times as necessary to cover the whole area of the block.

Next: installing a Super Banner app.

For this app we’ll perform a series of customizations:

Super Banner App Settings

• Content Settings
  • Content Position: Left
  • Check only: “Display Title”, “Display Subtitle”, “Display Button”
• Arrow Nav Settings
  • Arrow Type: V-shape Thin
  • Arrow Location: Outside Image
  • Default Color: Light arrows
• Pagination Settings
  • Pagination Location: Outside Image
  • Pagination Type: Dots
  • Default Color: Custom gray (Hex code #999999)
  • Active State Color: Custom blue (Hex code: #419efb)

The other ones can be left at their default state.

Now, on to the content.

Super Banner App Content Edits

We’ll open the CMS panel, and select a slide. There we will edit the “Slide Title”, the “Slide Description” and the “Button Text”. We’ll also replace the default image wit one of our own. The image was recreated taking into account the dimensions of the original site slideshow, but the height may vary from slide to slide.

This is pretty straight forward. Just modify the respective fields.

Super Banner App Styling

Following, we have some styling to do. First: the content background. We’ll remove it by lowering all the opacity.

Then we can proceed to the button. On its Style Dot, we will:

• Change the color to our custom blue (#419efb)
• Change the “Rollover” color to a darker shade of blue (use one of the color picker)
• Reduce the “Corner Radius” to 5px
• Adjust the “Width” to 38%
• Check the “Gradient” box and adjust the intensity

Now, on to the style of the text inside the button. These kind of Style Dots may be a little bit tricky to select sometimes, but hover around it until it shows, and click it.

Once this toolbar opens, we’ll change the font (Raleway Thin), size (18) and we’ll set the color to white.

The slide title needs customizing too: we’ll select the “Raleway Thin” font, 42 as size and our shade of dark gray for the color. As for the slide description text, it will be a lighter gray, and size 14.

And that’s it for the “Intro” block!

3. Portfolio Block

In this block we’ll use 3 Breezi apps: Text, Projects and Button.

Text App

This app we’ll use as a title for our blocks, so we’ll only have to set it up once and then just duplicate it whenever its necessary.

The customizations of text imply: switch to our font of choice (Raleway Thin), size 48, black color, center-align it, and select 48 as “Line Height”.

Projects App

The Projects app is also a complex one. We’ll install it right below the title (former step) and we’ll customize its settings as following:

• Uncheck “Show Categories Above List View”
• Columns: 3
• Show Project Info: Over Image
• Show Project Info On: Rollover state
• Image Rollover effects
  • Effect: Blend
  • Intensity: High
  • Color: #419efb (our shade of blue)

Editing content’s next: we’ll only add an image and a project’s name and leave the other defaults.

Once those fields are modified for the existing items, and new ones are created to have a total of 6, it should look like the following image.

We’ll change the Style Dot for the text inside each item. Modifying one will affect all.

Font will end up as 30 size, Raleway Thin, bold and white.

A Button app will be installed below the projects app. For this one we can just import the style of the button we previously set on the button of the Super Banner App.

First we need to save the style as a profile. Click on “Save Styles as Dot Profile” right below on the Style Dot panel and assign a name to it. Now you can use it in any dot by clicking on the “Load Dot Profile” next to it.

Some additional options may be tuned too, like removing the “Slogan” on the settings, change alignment (center) and the font, which is actually independent. For it we’ll double click it to open the “Edit in Place Toolbar” and select a white color, 18 as size and Raleway Thin as font.

4. About Block

For the next block we’ll change the background color to a custom light gray (#f2f2f2). Then we’ll duplicate the title (Text app) of the previous block (Portfolio) and move it right into the new block. We’ll change the text to “About”.

Next we’ll add a section and split it into 4 columns. To split them we need to hover over the bordering line of each column.

Now in each of them we’ll install two things: an Image and a Text app. The image will be from the set we already have (little icons) and the text will be of the original site. We’ll need to modify the font, size and color to match: blue Raleway Thin 22 for the upper text, and gray Arial 15 for the lower.

We’ll also have to reduce the bottom spacing of the image, which will be above the text. Also reduce the top spacing of the text.

Then we’ll just duplicate these two apps to fill each of the adjacent columns. We’ll only edit the content (image and verbiage) of each. It will look like this:

We’ll add a new section below this and install another Text app.

The text will be the verbiage from the original site. Styling: centered, gray Arial 18.

Next we’ll install a Social Icons app, below the last one. The settings for this will be:

• Icons Theme: Candy
• Alignment: Center
• Add links to: Facebook, Twitter, Dribbble

5. Blog Block

Next Block: we’ll start by duplicating the last title and bringing it over. We’ll change the text to “Blog”. We’ll add a new section below, which we’ll divide by two. On each of them we’ll install a Text + Photoblock app.

Customization for these apps (both) imply:

• Removing the app title as it is not necessary
• Adding the right picture, title and description to each one right there
• Resizing the image to 100% (it may automatically appear at a lower size)
• Changing font to dark gray Raleway Thin 18 for the title and light gray Arial 13 for the description
• Limiting the “Entries to Show” (settings) to 3

We must have a total of 3 items on each app.

Last thing we’ll do for this Block is duplicate the “all my work” button from the Portfolio Block, take it down to the “Blog” Block and change the text to “view my blog”.

 6. Clients Block

For this Block we’ll change the background to our light gray and duplicate the title from the last Block and change its text to “Clients”.  Next we’ll duplicate the Super Banner app (which already has some settings that we need) and customize it. Settings will be set to:

• Transition Fx: Dissolve
• Fx Speed: Medium
• Content Position: Top
• Content Checkboxes: should only be checked “Display Title” and “Display Sub-Title”
• Arrow Location: Don’t Show

Now for the content, we’ll use an image with the same color of the Block’s background. We’ll also edit the slide title and subtitle.

Then we’ll change the styles of the title to gray (#6c6c6c) Georgia 30. We’ll also reduce the bottom padding from the subtitle so its closer to the navigation below.

7. Contact Block

For the Contact Block we’re using a 3 column section with the following measures:

We’re doing it this way to keep the width of our apps there limited, in a “restricted” width.

First thing we’ll start by duplicating the title and change it to “Say Hello”.

Then we’ll install a Contact app below the title.

We’ll modify it so its only showing:

• name & surname
• e-mail
• company
• message

The labels are edited on the settings, while the available fields (which to show and which not to show) on the “Form Settings” button below the form itself.

For the button we can load the Dot Profile we saved previously. For the labels, we’ll also edit the style and center it, and make it a 16 Arial black font.

8. Copyright Block

The “Copyright” is the last Block. It only features an image and some text info. We’ll use… you guessed it! An Image app and a Text app.

For it we only need to replace the image and text. We’ll style it a little bit, with gray centered text and default Arial font, 18 for the first line, and 12 for the rest.

And finally, we’re done! This is how the finished page will look. You can click to enlarge it.

Hope you enjoyed this post. Let us know what you think on the comments below!