Designing a Website in Site Builder


d00

Creating and designing a new website can be a daunting task. Don’t worry though, Site Builder is a great tool for helping you to triumph over the difficulties of creating your own presence on the web. To get you started, you will first need to know the basics of how to use Site Builder. This list should help with any questions you may have.

Adding a New Page

You’ll notice that when you first make your site it only has one or two pages to get you started. You can start adding pages by going to the Page tab in the main menu. Click on the green “+” button and name your new page. Click “OK” and the page will be added to your site’s menu.

Choosing A Layout

We have pre-populated your website with a layout and some widgets we think will suit the kind of site you want to build. Keep in mind these are suggestions to help you get started and can all be easily changed!

d07

You can begin populating your website by clicking into the widgets already on your page to add text or other content. In addition to this, the Widget menu is where you will find all the tools to add content to your site. Ranging from YouTube, to Picture Galleries, and Social Media Widgets – there are plenty to choose from!

Changing Styles

Your website already has a style chosen by default, but there are a wide variety of styles to choose from. To change your style click on the Style menu, and browse our full selection Premium Styles. It’s easy to change your style, so don’t worry if you aren’t sure which one to use.

d02

Changing Layout Options

If you do not like the style layout we have selected, you have the option of one of nine layouts. Click on Page Layout to view the options. You can start with a blank page, or use a preset layout with drop zones to give you greater control over your content. Drag and drop widgets vertically or horizontally to easily achieve the best look and feel. You can use the same layout for your whole site, or a different one on each page. You can also change the banner image, background color and background picture on a lot of the styles.

Adding Text

Drag and drop a Text Widget onto your page (located in the “Popular” tab in the Widgets menu). Click inside the Text Widget that you have just added to your page to start adding text. Just type in a few short paragraphs or, if you like, copy and paste some text you would like to add to your page.

d03

However, please remember not to paste directly from MS Word or any other external sources!

Copying and pasting directly from a program like MS Word, email, or other webpages is one of the easiest ways to create bugs in your website. When you copy and paste directly from these sources, there is hidden formatting in the text that can cause the page to break. Here are some things that may happen to your site as a result of pasting text directly:

  • Your page will not load in the Sitebuilder. This might not happen initially but your page could break at some point.
  • Content on the page might not be editable.
  • Inconsistent appearance of your text in different browsers.
  • Text and images appear “jumbled” and do not display the way you laid them out.
  • Inability to format your text as you would like.
  • Other elements of the style may break, such as the menu links.
  • You may be unable to access various Sitebuilder functions, such as saving or publishing.

When you are editing your text, you will notice that a Text Editing Toolbar opens up at the top of your page. It looks very similar to the toolbar on other word processing software you might have used.

Text Editing Toolbar

d04

You can use the Text Editing Toolbar to change the formatting of text, you will be able to do anything you could want to do with a block of text.

  • Make text Bold, Underlined, or Italicized.
  • Change the format of your text.
  • Change the alignment of your text.
  • Click on the palette on the right to access the style designer to format your font-family, color, size, and more.
  • Create a bullet-ed list
  • Create Indents
  • Add a link to another website
  • Add an Image
  • Made a mistake? Don’t worry, the Undo left arrow icon will undo any recent changes.

Remember to save your page often to avoid losing your work. We will prompt you to save your work at key moments to make sure you don’t forget. However you should still save after every significant change.

Text Widget

Using the Text Widget allows you to insert a number of pictures in the same text box. You can add as many pictures in a row as your chosen style will support. Separate each picture by one or two spaces for the best results. To use this you will want to go to Widgets -> Popular. Then drag and drop a text widget onto your page. At this point you can use the ‘Add Image’ button on the ext editing toolbar.

f01

Once in the File Manager, select the image of your choice. You will be able to wrap the text and pictures within the Text Widget by clicking on the picture you just added, and then clicking various Text Wrapping buttons on the Text Editing Toolbar.

Personalizing Your Site

You have the ability to personalize the look of your website by changing the banner image, page background, add a logo, and more. In addition, our Style Designer allows you to tweak particular elements on your site, such as the navigation, header text, and paragraph text. Using these customization tools will help you to create your website that’s form fitted for your needs.

Customize Your Banner

If the style you’ve selected supports custom banners, you will be able click directly on it and the style designer will open up on the left hand side of the page. You can use this to customize your banner in a number of different ways.

Edit Banner Size

Each banner has a recommended size that is set up by default, however you can choose to change this. You can find the dimensions of the banner on the top of your banner area that appears when you hover over the banner area with your mouse.

Upload Banner Image

If you want to use a custom image as your banner you can do so easily!

  • Click on your banner area to open up the Style Designer.
  • Under ‘Colors’ find “Banner Image” and click on the square on the right hand side.
  • The Banner Editor dialog box will open at this point, click “Edit” -> Select an Image.
  • You can now upload an image from your computer to your website.

Once you’ve chosen the image you’d like to use, you can add a background color, or a foreground color. You can also choose the opacity, and position your banner within the banner area. You can make the image within your banner repeat. There are a few options:

  • Auto – Keeps the original image size
  • Cover - stretches your image across the span of the banner area
  • Contain – stretches your image to fit proportionally to fit in the banner area

Use Different Banners on Different Pages

You can set your website to have a different banner on each individual page. When you initially set up your banner within the Style Designer, you will be prompted to acknowledge the changes that were made and additionally it will ask you if you would like to apply your changes to all of your pages.

Using The Default Banner

If you’ve made a mistake, or if you just don’t like the banner you’ve created you can easily go back to the default. Just click inside the banner and within the Style Designer, locate “Banner Image”. Click on the square to the right hand side and the Banner Editor dialog box will open. Choosing the “Default” option will bring back the original banner image with the same style for you to use.

Changing the Page Background

If the style you select supports a custom background, We give you the option to either change the background color of your style or upload your own background image, or both!

Changing the Page Background Color

In order to change the page background color click on ‘Style’ -> ‘Style Settings’ -> ‘Background’. At this point the Style Designer will open. Under ‘Colors’ you will be able to edit the ‘Background Image’ and click on the square on the right hand side. Then the Dialog box will display, click on ‘Edit’ -> ‘No Image’. Then you will be able to click on the square next to ‘Background Color’. This is where you will be able to choose the color you would like for your background. After you’ve chosen simply click ‘OK’.

d05

Upload Background Image

You can also upload your own custom background image. You can do this by clicking on ‘Style’ -> ‘Style Settings’ -> ‘Background’. At this point the Style Designer will open. Under ‘Colors’, locate ‘Background Image’ and click on the square on the right hand side. The Background Editor dialog box will display. Click on ‘Edit’ -> ‘Select Image’. At this point you can upload an image from your computer to use as your background.

You can Edit this image after you upload it. You can re-position it, change the size, make it repeat, or ‘attach’ it to the screen. (This just means that it will not scroll with the rest of your content and will stay in the same place on your screen.)

Use the Default Background

If you have made a mistake, or just don’t like the changes you’ve made to your background you can easily go back to the default. If you would prefer to change the background on your site back to the default background of the style, go to ‘Style’ -> ‘Style Settings’ -> ‘Style Designer’. Under ‘Colors’, locate ‘Background Image’ and click on the square to the right. In the Background Editor dialog box that opens up, click ‘Default’.

Adding A Logo

A logo is a great way to brand your business. And will make your website feel unique to you. The Style Designer allows you to easily add a logo to your site. Click on ‘Style’ -> ‘Settings’ -> ‘Style Designer’. Under ‘Colors’, you’ll need to locate ‘Logo’ and click on the square along the right hand side. At this point the Logo Editor dialog box will open up, click on ‘Edit’ -> Select Image. Then you can upload a logo from your computer to your new site.

After you add your logo you can edit the alignment and width of the the logo. However, please note that not all styles support the ‘Logo’ option, so you may need to use a different style if you’d like to use a logo.

Navigation

One of the first things people notice when going to your site is the navigation. This is how the users will move throughout your website and is essential to the flow of your site. Using the Style Designer you can change the font color, font-family, alignment and more.

Navigation Font Color

Changing the font color of your navigation bar can be done easily by going to ‘Style’ -> ‘Settings’ -> ‘Style Designer’. Under ‘Colors’, you will see a few options for your navigation.

  • Navigation Background – This will allow you to change the background color for your navigation.
  • Navigation – This is the default color that your navigation links display.
  • Navigation (Selected) – This is the color of the link that displays when the visitor is on this page.
  • Navigation (Hover) – This will change the color of the navigation link while you hover over it with your mouse.

d06

If you click on the square on the right hand side of the element you want to edit you can use a color selection of your choice, then click ‘OK’

Navigation Typeset

You can change the font family, font size, alignment, and more options for you navigation by going to ‘Style’ -> ‘Settings’ -> ‘Style Designer’. Then under ‘Fonts’ locate ‘Navigation’ and click on the square on the right hand side. At this point the Navigation Editor dialog box will open. You’ll be able to edit the following:

  • Font Family – This is the typeface used for your text.
  • Font Weight – This is how thick or thin you want your text to be.
  • Font Size – This is just the size of your text.
  • Text Decoration – This is when you add a line to your text.
  • Letter Spacing – This is the amount of space in between each letter.
  • Line Height – This is the amount of space added above and below your text.
  • Text Transform – This controls how your text is capitalized.
  • Text Alignment – This changes the horizontal placement of your navigation.

Pictures

Pictures are the cornerstone of a good website. They catch the eye, and direct the flow of your website. Because this is such an essential part of any website, there are many various ways you can add and edit your images.

Picture Widget

The Picture Widget is a great way to place an image on your website. You’ll want to go to ‘Widgets’ -> ‘Popular’. Then drag and drop a Picture Widget onto your page. From here you’ll have the option to select an image. You can either upload a new image from your computer, or use an existing one that you’ve uploaded previously.

d17

Edit Pictures

The Picture Widget will allow you to customer the look of your image, create alternate text for the image if that image doesn’t display for some reason, and set up links.

Picture Gallery Widget

The Picture Gallery Widget gives the users opportunity to create a professional gallery without needing to upload and resize pictures individually. With this gallery, site visitors will be able to browse through attractive, clickable thumbnails – it’s perfect for any site’s portfolio!

To scroll through your gallery, site visitors simply click on the picture and click “Next” tab in the top right corner. To scroll back to the previous picture, click “Prev” in the top left corner. Adding a gallery to your site is easy. Go to ‘Widgets’ -> ‘Popular’. Drag a Picture Gallery Widget onto your page.

d18

Upload a Picture from your Computer

In order to upload a new image you just need to click on ‘Upload New Images’ You will then be able to browse your computer to select a file to upload. Select the image you want, then ‘Open’, and it will automatically be loaded to your gallery.

Add Pictures you’ve already Uploaded

In order to add pictures to your gallery that you already have uploaded to your website you will simply want to clcik on ‘Browse Uploaded Images’, and select the image from the file manager that you would like to include.

Upload Multiple Pictures at Once

If you have a large number of images, trying to upload them one at a time can be a frustrating experience. So you can upload many images at once by following the same process as uploading a single file. Except you will want to select every image that you would like upload. You can do this by holding down the ‘CTRL’ key (for PC) or ‘CMD’ key (for MAC) while clicking on the images you would like to upload.

f02

Creating Sub-Pages

If your website has a lot of pages, not all of them really need to appear on the main navigation menu. So you might want to have your visitors navigate through other pages before finding additional related content. So you can use the Page Manager to organize your pages. You can find this by going to ‘Page’ -> ‘Page Properties’ -> Navigation. The Page Manager dialog box will display where you can then use the green indent arrow next to the page you’d like to make into a sub page. Then drag and drop your pages vertically under the top level page. Then click ‘OK’.

f03You can add the Site Builder product by either navigating to My Products > My Add-Ons > Site Builder or by clicking here and filling out the ordering wizard!

Was this article helpful?

Yes (23)
No (3)

We're sorry you didn't find this article very helpful. Please help us improve it by leaving your feedback below.

Error