Ask a Question ?
Design & Publish Websites Faster

Build a Boutique Style Website from Scratch

Building your own boutique website is an easy task. Today we will be showing you how to to do a simple boutique style website design in a few steps.

This is how your site could look like at the end:

We will be designing the following sections of the site:

  • The Homepage
  • Inspiration Page
  • The Sketches
  • The Work Page
  • Navigation Menu

On this link you can find all images and elements used on the site to create the page, feel free to download them and play with them

 

The Homepage

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.

Homepage

Video Tutorial

 

Image Tutorial

Text App and an InLine Image are being used

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

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

 

Navigation App being styled

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.

 

Our own entries for our own pages are being used

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.

 

Image App for the Logo

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 "+" symbol.

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.

 

Using a Text App

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.

 

Carousel App

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.

 

Use the Wrench Icon on the App Toolbar to open settings

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.

 

Social Icons Theme being changed

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.

 

Urls for services are being shown

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.

 

A dot being used to modify left/right spacing.

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.

Inspiration Page

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! Inspiration

Video Tutorial

Image Tutorial

Duplicate the Text App and change it's text, replace background

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.

 

Arrows indicate resizer lines

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.

 

Border being added by the Dot

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.

 

Article

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.

 

Section with three columns and three videos

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.

 

Three text apps

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.

 

How to Edit Content on the Embed App

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.

 

Pageslide for the embed app

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.

 

How to center apps that cannot be centered

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.

 

The Sketches

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. Sketches Page

Video Tutorial

Image Tutorial

Arrows show places to be clicked

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.

 

Different apps

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.

 

Differences

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.

 

Jewlery

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.

 

Section being removed

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! Work Page with Galleries

Video Tutorial

Image Tutorial

Background being changed

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.

 

New configuration

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

 

Image Gallery and Title

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.

 

Resizing the Gallery

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.

 

Resize feedback

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.

 

Image Galleries

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.

 

Credit Section

Add a section at the bottom with three columns for the credits of the page. Use text apps for this.

 

Links on Credits

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!

Video Tutorial

Image Tutorial

Linking

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

 

Roll Over Color

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.

 

Dot Usage

Once links are added use dots to align

 

Link Roll Over

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.

Menu