Ask a Question ?
Design & Publish Websites Faster

Import Your Website Into Breezi: An Optimal Approach

Hi there! Welcome to another of our tutorials, this time we will be doing something different, an instead of showing you how to create something on Breezi from scratch, we’ll set a guide to follow an optimal approach to importing your website from Photoshop (or any other software) into Breezi.

Photoshop to Breezi

There’s a reason why we do this; you may already have everything set up or an actual image or template of what you’ll site will be so the only thing is to optimize the process and follow a logical workflow, so with these steps and tips your site will be done in a couple of hours.

Where To Start

We will have to approach this in a different way, knowing that not everything can be done trough images (you want your site to be functional right?, placing images all over the place won’t work), so we have to plan our layout and the apps we will be using.

Establishing your layout comes first and is one of the easiest but must important parts of the process, see how many blocks you are going to use and how many apps you are going to place. We will start by using a stie mockup and translate what is already there into Breezi.  We will start with our layout.

On the next picture you’ll see the site that we are going to transfer to Breezi, click the picture to see a bigger version.

Mockup

Small version, click to show a bigger one!

The Layout

Once you have your site set up it’s time to start building our layout, on the next picture I’ll show you how we’ve arranged our site in 4 different blocks (header, intro, body and footer) depending on the apps that we have there, the background color that we want to manage and the hierarchy that needs to be presented. Place important content on the body and use introductory content in the intro (sorry for being redundant!), use the header to add logo and navigation and the footer for any extra info and copyright.

Blocks Comparison

See how there are some thin lines on all blocks but the Intro one, this are our sections and columns!

The Apps

Once blocks have been defined it’s time to define our sections and columns. Columns are contained inside sections contained inside blocks.  The next step is to analyze and see how many sections we are going to need and how many columns inside each one. This depends on the functions and elements that are displayed in your page; if you need a CTA button, then use our Button app, if you need a Banner, use our Banner app, check our Apps section for more information.

On the next picture we will show you how we translated each one of the elements in our PSD template into fully functional apps within Breezi.

Apps comparison

This is a side to side comparison on how the apps will work, see how we’ve also included divisions for sections and columns.

 

Meanwhile, in Breezi

Now it’s time to start building things on Breezi. On the next picture we’ll see how we already arranged apps inside our layout, everything is blank and has no content yet, is just arranged to see how we can arrange everything the same way that we had it on our psd file.

App Arrangement

All apps in it’s default state.

Now it’s time to add content, this means that we will replace default images and text with the ones that we will be using on our site, don’t worry if  you still don’t have content defined, when in doubt through lorem ipsum around and place holder images around.

Let’s start by replacing images, that’s the easiest part. Take the images out from your PSD file or from your computer and replace them on Breezi by double clicking on them, do the same with content, if content is not defined yet, use Lorem Ipsum.

This is how our layout looks now that content has been replaced, style still needs to be applied.

Content

Now content has been replaced!

Now it’s time to start editing, this is the fun part, styles need to be applied and you can experiment with what you already had planned or try different things, we will do a little bit of both.

The first thing is to edit the text we already have, before doing this we have to define our headings,  start thinking wich ones will be your H1s and what’s gonna be a subtitle. Double click on them, select the text that’s gonna be a heading and asign it through the EIP toolbar.

H Tags

This is how we add H Tags.

Once all H Tags have been added its time to edit them, do this trough our Bulk Style Editor, select fonts that are the same as the ones on your file or something similar, you can always  use the partial skins we offer on the Skins section (click on the shelf at the bottom of the editor).

On the next picture you see how we have changed text styles already.Click on the picture to see the whole site.

Tags Cropped

This is how our site looks like now that we have styled our text by tagging it.

Once that text has been styled, we have to go into margins, spacings and padding, this is really easy, either you can edit it trough or Bulk Style Editor or apply a partial skin to it.

We are also editing the background color of our Intro & Footer blocks, hover over the left upper corner of those two blocks, open the dot that shows there and select a color.

Background Dot

Background dot is being edited.

 

Styles & Settings

Now that we also modified backgrounds, we need to add proper borders. Do it by clicking on a dot and scrolling to the Borders option.

Borders

See how only the bottom border is added.

You can do the same thing for drop-shadows.

One of the main things to do also, will be to edit the way that the apps show. If you see a wrench icon click on it so you can edit it’s settings, open their dots also to check other options.

The first thing that we will do will be to edit the Navigation App style, do this by clicking on it’s dot and choosing separators as an option.

Nav App

You can even choose the separators colors.

Now we are going to change the style of our Social Icons App, do the same thing, hover over the app and click on the wrench icon.

Social icons

There are several styles to choose from!

Keep modifying styles and settings until you get the desired look , so far, we are done!
Take a look at the final result, it looks a little bit different since we’ve remixed it a little bit but as you see styles look more professional and you avoided coding and time consuming tasks.

Final Full

This is how it looks at the end!

If you have any questions take a look at our How To section or post a comment!

Menu