We’ll start with the homepage, on this one we will place basic but important information such as your logo, contact information, social network contacts and clientele opinions. Under this text you’ll find a link with images and text documents of the elements used on this page, you can use them or use your own since this is just a tutorial and you can start creating your site right away.
Remove all blocks but one, also, use only a section. Once that done insert a text app into that section and write the name of your store, you can change it size using the Edit In Place bar that comes at the top, use letter spacing and line height to give it a proper look. Inser an InLine Image using the icon at the right side of the bar. We are placing a logo over here. You can use this bar to change the text color, style and font. Font being used is Josefin Sans.
Add a background using the background dot by clicking on it, check the box for background image and click on Edit, choose one of the backgrounds or upload your one by clicking on Custom Image, you'll see how the background gets applied once loaded, you can always remove them by clicking on the X at the corner of the thumbnail
Open the App Store on the Shelf at the bottom of the editor by clicking on the Apps tab, look for the Navigation App, drag and drop it on a new section above the one we were using before, from here you can add links, we will style this by clicking on each entry, deleting it's content and writing the pages we are gonna sue, if you are not sure about this leave them just like that, you can always return and edit them, this will be our main navigation tool between pages.
This is how it will look like once you have added your entries, try different fonts and play with the dots to get the proper look.
We've split the section where our Navigation app is on two and added a Logo of our own using the Image App. Hover over the section and click on the dot to alter spacing options to align the Nav App to the logo. you can actually click on the image and link it to your own homepage to make it a clickable logo.
Use the plus sign or character at the bottom of your block to add one, this will be used to place more content on a different block. Background will stop showing on this once since its a completely different space.
Install a text app on the column for the section of the new block, we are gonna use this to add info about or customers opinions. Ass you see on the Edit In Place Toolbar at the top of the editor you can change text style really easy. We're using Abril Fatface as a font here, change the color a little bit and size too.
Install the Carousel App from our App Store on a new column on the same section that we were using before. Remove title and optional images and place your customers name and opinions here.
Once entries have been added and styled, hover over the app to show the App Toolbar, click on the Wrench Icon to pen the settings and make it show only one entry.
Create a new block on the the one that we were using before, this will be our footer on every page. install a Social Icons App from our App Store and style it. As with the Carousel App open it's settings to see what you can do, choose from an array of themes and you'll see actual icons change.
Scroll down trough the settings and you will see URL fields for some social networks, placing your url there will make an icon show and removing it will make it disappear. This icons will function as buttons, once clicked a page will pop up with the profile for the service you selected.
Finally, us dots to add spacing, borders, shadow and gradient. Use this to add spacing between sections, columns and blocks and to differentiate places from others. If you have any questions about how the site was built take a look at our video to see our process.
On this page we will be adding the things that you like and inspire you to become the seller who you want to be. No reasons needed for the content of this page, with Breezi you can always be sure there are no limits. This is how your inspiration page can look like, add anything that you feel attracted to in your work!
Once a new page has been created from the previous one, duplicate the main text app and replace it's text with the proper one, change the background also.
Split section into three columns and place our text in the middle one, use resizer lines, show with white arrows on the picture, to center the text app.
Open the Dot found on the upper left corner of the app itself and add borders to it, white arrow points to the dot being used and red arrows shows fields that can be modified as thickness and type of border. Make sure check box is checked and key chain button are acttve so all borders are equal.
On the next block we are gonna remove previous sections that we had before and create two new ones. One will be for our header which indicates title for our section (The one that says "Words By Lily Silverton", we're using Josefins Sans and Abril Fatface as fonts for this one to create hierarchy) , the other section under this one will contain two columns, one for a brief paragraph and another one for a picture related to it. Once this is done add a section under this one using the button shown in the picture.
Split the newly created section into three columns, install a video on the first one, replace it and then duplicate it twice so you have three videos with same size and style, drag and drop each one of them to each column and replace them with your own urls. If you have any questions about this step just watch the video.
We are gonna add two more sections, one split into two columns and one using just one column. You can see that we added text apps to each one of the columns. The boldest one functions as a title for our text in the right, both of them contained in the same section and the bottom one contains an inspirational quote, change style, color, font and size to create hierarchy and importance, note how text at the bottom is lighter and clearer to show an important but slightly imperceptible effect.
Create a new section under the other ones, install an Embed App from the shelf and click on the Pencil Icon to Edit its content. Over here we are gonna add a song by Alessandro Coronas as music inspiration, you can get it's embed code from it's page. Only use this ap if you know at least a little bit of HTML codes or know what you're doing, with this app you have no limits but keep in mind improper code can break your site. Click on the pencil icon now.
A page slide will open and here's where you can change the app code, erase current content and place yours, once yu are done editing hit the save button on the right upper corner and watch how the app has changed.
If you are not able to center your app with the use of code, simply split the section into three columns and place your app in the middle one. Use resizer liens to help you center it. We're done with this page, continue to the next one and if you have any questions check the video tutorial and use dots to style your site.
On this page we will add beta work and demos of your store. We can create a simple but dynamic page by using the sliding gallery to save space and add motility to your site. This is how the sliding gallery will look like, keep in mind actual images are moving so be sure to check the live site we have included at the begginign of this tutorial.
As we have done before we have to replace the background for the proper one for this page using the dot on the left upper corner, also, duplicate the text app that we had before and change the text on the new one, remove the old one and style using dots.
Duplicate the text apps in the next block and replace the text on the new ones with proper text, remove the old ones, remove also the image app that was related and replace with a Slideshow App from our App Store, style in a similar way to the one in the picture, Arrows point to each app, a text app for the title, another one for the slideshow description and another one for the slideshow itself.
See how the text has changed now. Click on the green overlay that shows when mouse rolls over picture to replace entries. If more entries are needed click on the Add Entry icon on the left side of the app toolbar.
We have to create a similar section to the one before by using other sketches. We will be using a section for the title and a two columned section for the content, similar to the previous one just in a mirrored way. Do as before, duplicate apps and replace text and entries. Watch video for proper step by step instructions if you have trouble with this.
Duplicate the text for the quote and replace it with the proper one, remember to delete the original app so it does not get modified in the previous page. Remove the section where the embed app is by clicking on the x shown on the picture.
The Work Page
On this page we will be adding proper product and work from your store. This is where you can showcase with pictures and information what your store is actually about. Under this paragraph you’ll see how our Work page looks like, check the live site and use arrows at the sides of our pictures to browse trough the gallery. Upload your own images and play with them!
As in previous pages, change background by clicking on the dot and use the Custom Image button after clicking on the Edit button. Also, duplicate text app, remove the original one and replace the text on the second one.
Change the next block by removing the sliding app and merging the columns on that section, duplicate current text apps and replace with proper text
For the next two sections remove also all apps but the one with the title, duplicate this one and replace text, remove the original one. On the section under this one merge all columns and install an Image Gallery from our App Store, this is how the sections need to look now.
Replace the entries with proper images as we did with the Slideshow App, now, as you can see one of the red arrows points to the corner of one of the entries. Click and hold on this corner and drag it, this will allow you to resize the entry. Automatically all entries should resize.
Resizing an entry generates feedback wiich you can see as a blue overlay showing you the actual size once click is dropped. A tooltip will come up telling you the scale of the image that's being resized relative to the one you uploaded.
Once the entries have been replace and resized, create a second section for the next gallery, simply duplicate each one of the elements that we had before and replace them with the proper ones, check video for full process.
Add a section at the bottom with three columns for the credits of the page. Use text apps for this.
Add links to the credit section that redirect to a newpage with information about who participated on your store or anything that you like. If you are stuck in any of this steps watch the video for step by steps solutions. Next section is a simple but important one.
The Navigation Menu
On this section we will be customizing our Navigation Menu found at the top of the site. Now that we have proper links we can easily customize it in a few steps. Don’t give up yet, this is the last step!
Selec the part of the text that you want to make a link, click on the Lin Icon at the toolbar (you can see the mouse hovering over it on the picture) and choose the page where you want the page to go to. We are opening the pages on the same one so choose that option
Once the link its added, click on the color box on the toolbar at the top, this time you have two options, one for the regular color, and one for the roll over one.
Once links are added use dots to align
Once on the actual site roll over a link to see how color changes!
As you see is quite easy to create your own site, if by any chance you find yourself stuck in any step or don’t know how some of the steps were performed just take a look at our video.
Continuing with the Breakdown (From Scratch) series, today we'll recreate this event website design.
The original site we'll be recreating with our is called New Adventures in Web Design. The event took place on January 18-19th of 2012. Here's what it
We have released the Bulk Style Editor. With it you can edit the styling, like colors and backgrounds, of multiple items (apps, text, containers, etc) at the same time and from a single panel! Check it out, it will help you design faster.
You may have noticed small differences when you open your site using certain browsers. There shouldn't be any major inconsistencies, but to some extent, this is normal. Some of the differences that you may find could be present in fonts, rounded corners,