We’ve recreated an iPhone app landing page before in Breezi. In this article, we’ll do something similar.

Pistachio is a “minimalistic sketching app” for iPad (and iPhone), and we’ll build its micro site completely in Breezi.

Dissecting the Original

First we’ll do an analysis of the original site. Here’s the Blocks and apps that we’ll use for this tutorial:

• Header: logo of parent company
  • 1 column: Image
• Intro: app logo
  • 1 column: Image
• Body 1: about and CTA
  • 2 columns: Image / Text, Text, Image
• Body 2: news and updates
  • 2 columns: Text, Blog / Text, Text
• Footer: links to parent company and social media
  • 2 columns: Text / Social Sharing Buttons

Before Beginning

If you are following this tutorial from an existing Breezi site, you must reset it to a blank starting point.

Otherwise, sign up and create a new site! There you can just choose that same starting point (blank).

Header Block

We’ll begin by changing the Block’s background to white.

This Block will feature only one column, where we’ll install an Image app.

This image will be aligned to the right side.

Intro Block

The Intro Block will feature only a custom background and an Image app.

We’ll start with the background. Clicking the Style Dot will open the options to style it up.

We’ll select the background and make it repeat horizontally. We’ll need to adjust its horizontal position to half the way the slider.

Spacing should also be set to 0 (none).

Then we’ll put an Image app and replace it with the logo of the app. Make sure its set to 100% of its original size.

By default its centered in our column, which is what we want. What we’ll need to edit is its top and bottom spacing. It should be set to 50 and 0 pixels respectively.

Body 1 Block

Off to the next Block. Since the background is already white, the only thing we’ll need to edit its the top spacing for the Block, setting it in 30 pixels.

We’ll divide the Section in two columns of the same width (480 pixels wide each).

Next, an Image app on the left column. We may not be able to resize it to 100% because of the width of the column that contains it, so about 85% should do it.

On the right column, we’re adding a few apps. First: a Text app for the title. Font settings should be: “Pacifico” for the font face, 36 for size, and set to bold.

Now we’ll increase the top padding to 50px on its style dot.

Another Text app will be installed below. For this one we’ll use Georgia as Font, sized 18. Remember that line height can be set independently, so a good advise is to keep an eye on it.

Next we’ll install an Image app below. We’ll resize it to 85% to match the scale of the left column image. We’ll and left-align it on its Style Dot.

We’ll also reduce the top padding to 0, on the inner app Dot. There’s a difference between the style dot of the actual app and its “inner” style dot.

Body 2 Block

This Block will have a custom background that serves as divider between this and the former Block. First we’ll change the color to a shade of gray (#E8E8E8), so it shows where the image ends.

Then we’ll insert the custom image of the border, which looks like this:

This image is not wide enough to cover the whole page, so we’ll repeat it endlessly so it fill it. So we’ll select the option to “Repeat Horizontally”.

Once the background is set, we can continue to duplicate the column into two: just like the former Block (480 pixels each).

On the first column on the left we’ll have a Text app (title) and below it a Blog app. On the one on the right, we’ll use two Text apps: one for the title above, and the next one for a message.

For the titles, we’ll duplicate twice the Text app we styled on the former Block.

This way we will only need to update the content (by double clicking it), without setting the font options again.

Below the title of the right column, we’ll put another Text app. This one will be Georgia, size 15 pixels.

And the last app for this Block: the Blog app will be installed below the title on the left column.

Each entry of the Blog app must always have a title. The original micro site doesn’t have a title for each of these entries, only date. So we’re going to use the date as title for each entry.

First we’ll need to hide the date from the Blog app settings. Clicking on the wrench icon will open them up. There we can leave the “Show Date” box un-checked.

Then we’ll need to edit its font, make it Georgia, not bold, size 15 and color #333333 for both default and rollover states.

Also, we’ll edit the font of content itself. Locate the dot for the content, clicking it will open a Bulk Style Editor with text options only. There we can select Georgia, size 16 and color black.

Now, the content. Double clicking on the text will open the CMS panel, where we can make content edits.

We’ll add as many options as necessary by clicking on the “New Post” tab on the left. Once we’ve added and customized all items, the Blog app should look like the following image.

The only difference here may be the spacing. One possible fix is to reduce the font size, so it resembles better the original site.

One last thing is to remove the border that appears on the bottom. Select its Dot and uncheck the box of the “Border” tab.

Footer Block

We’re finally down to the last Block. We’ll do two things first: change its background to #E8E8E8, and add some spacing below. The spacing isn’t there on the original site, but it looks better.

Here, if it there’s only one column, we’ll split the column into two. Else, it may already be split into two or more columns. We want to end up with only two columns.

Next we’ll remove the top spacing and add a border on the top side of the Section. For this we’ll need to edit several options:

• Select the Style Dot for the whole Section
• Scroll down on the options to “Borders” and enable it (by checking its box)
• Leave 1 pixel for thickness
• Change the type to the dotted option
• Check only the box for the “Top” side (it may be needed to “disable the lock chain” so each side can have different values, otherwise modifying one updates all)
• Select a gray tone for the color (hex code #BBBBBB)

The one on the left will feature a Text app. It will be Georgia, size 15. We’ll insert two links, by clicking on the anchor icon of the Edit in Place toolbar. We’ll change the color to black (for both states: default and rollover).

Next on the column on the right, we’ll install a Social Sharing Buttons app.

It won’t need any additional setup, it will show by default as the original site.

That’s a Wrap!

We can now publish and admire the replicated site.

Click on the image below to get a full screenshot preview.

Do you want to learn about a particular step? Have a question? Please use the comments below!