Design: Design Templates, Layout, Styles, Color Scheme, and Header

Every web site page includes a number of elements (banner, footer, sidebars) that help organize the information displayed on the page. You can apply a design template that is a combination of such elements, as well as customize the site layout according to your needs.

You can also improve the appearance of your site by changing colors, background images, fonts, and styles, as well as setting website header elements such as banners, logo image, site name, and slogan.

This section describes how to change the layout and appearance of your site.

Selecting a Website Design Template

When a new website is generated, the editor applies a random design template to the site. A design template is a combination of website elements (banner, footer, sidebars), page layout settings, and colors.

You can review the list of available design templates and select the design you like the most, or you can individually adjust the layout and colors of website elements, as described further in this document.

You can also prepare your own design templates and save them to ZIP archives, upload them to the editor, and apply to websites.

Selecting and Applying a Design Template

Note: When you apply a design template, all site-wide elements and modules are overwritten along with the content they might contain.

To select a design template and apply it to a site:

Go to the Design tab > Templates, select the template you want, and click OK.

Preparing a Custom Design Template

The following site elements and settings can be saved in a design template:

The website layout: the location and size of the header, footer, content areas, and sidebars.
The banner image.
All site-wide modules.
The color scheme or individually selected colors.
The fonts.
The information about the borders and shapes of the page elements' corners.

To create a custom design template:

Adjust the layout and design, as described in Changing Your Website Layout and Selecting Website Colors, Fonts, and Styles for Borders and Corners.
Add the necessary site-wide modules and a banner, as described in the chapter Content: Text, Tables, Images, Video, Forms, and Scripts, and in the section Changing the Website Header Elements.
Save the design template: Go to the Design tab, and click Export Design.

Importing and Applying a Custom Design Template

Note: When you import and apply a design template, all site-wide elements and modules contained on the site are overwritten along with the content they might contain.

To upload and apply a design template:

Go to the Design tab, and click Import Design.
Select the ZIP archive containing the design template.

Changing Your Website Layout

The layout of your site can consist of the following elements:

Header. This is the topmost area where a banner image and a company logo are usually placed. You can do the following to the header:
- Move the banner image and logo from the header area to any place on the page.
- Reduce the header height to 25 pixels by removing all elements from it.
- Change the header width from the default size to 100 percent, so that it is expanded to fit the page width.
Content area. This is the main part of a webpage where most of the content is placed. You can do the following to the content area:
- Adjust the height of the content area.
- Divide the content area into several columns. You can do this by dragging new modules to the left or right edge of the content area and inserting them.
- Change location of the columns in the content area by moving the content to the left or to the right.
Sidebars. These are vertical columns that can be used for placing all kinds of modules, site-wide and page-specific. You can do the following to sidebars:
- Add one sidebar and place it to the left or to the right of the content area.
- Add two sidebars. They will be placed to the left and to the right of the content area.
- Adjust the height and width of the sidebars.
- Move the sidebars to the top of the page and place them to the left or to the right of the header area.
- Switch places of the sidebars.
Footer. This is the lowest area where the company name, contact information, or a copyright notice are usually placed. You can do the following to the footer:
- Reduce the footer height to 25 pixels by removing all elements from it.
- Change the footer width from the default size to 100 percent, so that it is expanded to fit the page width.
Advertisement block below the footer. Depending on your hosting plan, an additional text block containing some advertisement from your hosting provider might appear below the website footer. If that advertisement block appears on your site, you might want to upgrade to another hosting plan to remove it.

To change the layout of your site:

Go to the Design tab > Layout tab.
Select the number of sidebars: Under Sidebars, select No, One, or Two.
Select the locations of sidebars:
- To move a sidebar to another side of your website, or to switch places of sidebars (if you have two sidebars on your site), click Switch sidebars.
- To move the sidebars to the top of the page, click them in the layout model.
Set the size of page elements:
- To set the total width of the website pages, under Website width, select either of the following:To change the width of the header, footer, and the main content area to fit the page width, click the corresponding elements in the layout model.
  - Fixed layout: your website will be of a specific size regardless of the size of the browser window viewing the page. In this case, specify your website width in pixels.
  - Liquid layout: based on percentages of the current browser window's size. In this case, specify your website width as a percentage of the browser window's size.
- Under Minimal column height in pixels, specify the height of the main content area and each sidebar, if you have chosen to use them.
  This value shows the height of your website elements without content. When you add content to the main content area and to the sidebars, they will stretch in height to fit the content.
- To ensure that the sidebars and the content area are vertically aligned, select the checkbox Stretch the sidebars and the content area down to the footer.
- If you use one or two sidebars, under Sidebar width in pixels, specify the width of each sidebar. The size of the main content area will be determined automatically.
- Under Margin sizes in pixels, specify the size of vertical and horizontal margins. A margin is the space between the edges of neighboring elements.
Click OK to save changes.

Selecting Website Colors, Background Images, Fonts, and Styles for Borders and Corners

The general color scheme, or styleset, of your website comprises four colors. Each color is used for several website elements at once. You can adjust colors of individual elements on the Design tab > Colors tab.

To select the general color scheme for your website:

Go to the Design tab > Scheme tab.
Select the color scheme, or styleset, of your website in the menu.
You will see the four colors used in the color scheme of your website.
To adjust one of the colors of your website color scheme, click the respective color field and change the hexadecimal color code value or select a color with the color picker.
Note: These changes will override any previous changes of individual elements' colors made on the Colors tab.
Click OK to save changes.

Alternatively, you can click Choose for Me to have Presence Builder choose a color scheme for you automatically. The color scheme will be chosen to match the banner in the header, or, if no banner is present in the header, the first one present in the content area. If your website has no banners, a color scheme matching the background image will be chosen. If your website has no banners and no background image, an error message will be displayed.

To set colors or background images for individual website elements:

Go to the Design tab > Colors tab.
Select the website element in the Page area menu. You can modify Site background, Watermark, Header, Footer, andContent areas.
Click the arrow in the Color or image menu.
Select the opacity level for the background.
Do any of the following:For an element with text, adjust font colors by clicking the respective color field and editing the hexadecimal color code value or by selecting a color with the color picker.
- To fill with a solid color, leave the Solid color option selected, and select a color with the color picker.
- To fill with a gradient, select the Gradient option, and then select a pattern from the library.
- To fill with a background image, select the Pattern option, select a pattern from the library or click Upload to upload your own image. Specify whether it should be tiled, cropped or resized and where it should be placed.
Note: Modifying the styleset on the Scheme tab will override the changes made on the Colors tab.
Click OK to save changes.

To select fonts for headings and body text of your website:

Go to the Design tab > Fonts tab.
For each font type, select the font face and size in the menus.
For headings, select the font decoration. You can use bold (the B icon) and italics (the I icon).
Note: The settings made here define only general rules for your website fonts. You can always adjust fonts of individual elements in place.
Click OK to save changes.

To select the shape of corners (square or rounded) for website elements:

Go to the Design tab > Corners tab.
In the Page area menu, select the element whose corners you want to change.
Do any of the following:
- To make rounded corners, select the corresponding checkboxes.
- To make square corners, clear the corresponding checkboxes.
Click OK to save changes.

To select borders for website elements:

Go to the Design tab > Borders tab.
Select the border type for elements inside your website from the Internal containers border menu.
Select the elements that will have the border.
Note: You can select only one internal border type for all elements on your website, but you can select whether this border will be used for certain elements.
Select the external border for your website from the External site border menu.
Click OK to save changes.

Changing the Website Header Elements

The site header consists of the following elements:

Banners. There might be one or several banners in the header area, depending on the selected design template.
You can do the following to the banner:
- Upload your own banner image or a Flash file in SWF format.
- Select and apply a banner from the Presence Builder library.
- Add text to show on the banner.
- Remove the banner and use a background filled with a color or images.
- Remove the banner and all other elements from the header area to reduce its height to 25 pixels.
- Move the banner to the content area and insert it into a specific page or into all pages of the website.
Logo image. You can do the following to the logo:
- Upload your own logo image or a Flash file in SWF format.
- Move the logo from the header area to other parts of webpages, such as sidebars and content area.
- Insert any number of logo images into the site-wide (DESIGN) areas.
- Resize the logo by specifying the desired dimensions in pixels, or by dragging the sides and corners of the image with a mouse pointer.
- Remove the logo.
Site name. This usually contains a company name or a brief site description like, for example, "John Doe's Recipes".
Site slogan. This usually includes a description of your site or a company slogan.

To change a banner image or other elements (logo, site name, slogan, or text):

Click the banner image.
Click the thumbnail in the Image list menu.
Do any of the following:
- To use an image from the library, select it. To find relevant images, type a keyword into the input box. To hide the images that do not match the website's color scheme, select the Suitable by color scheme checkbox.
- To use your own image or a Flash file in the SWF format, click Upload, and select the file that you want to use. Images should be in the GIF, JPEG, and PNG formats, preferably not wider than 900 pixels.
- To remove an image, select the option No image.
If you want to resize a banner, drag the icon up or down.
Under Show banner elements, select the checkboxes corresponding to the elements that you want to show.
If you want to remove a logo image or upload your own logo, click the logo image.
If you want to change the site name, slogan, or text, click the corresponding fields on the banner and change them as you want.
To make it easier to see the site name or slogan, select the Outline checkbox. This adds a black or white outline around text, one pixel in width. If the font color in site title or slogan is black, then the outline is white, and vice versa.

Note that you can freely move the blocks with website name, description, logo, and text within the banner area.

If you occasionally remove a banner, you can re-insert it.

To remove a banner:

Click the banner image and click Remove.

To insert a banner:

Go to the Modules tab, select Banner, and drag the module to the place where you want to add it.

To insert a logo:

Go to the Modules tab, select Site Logo, and drag the module to the place where you want to add it. You can upload a new logo image or a Flash file in the SWF format, and align it to the left, center, or right.

You can also resize the logo image by specifying the desired dimensions in pixels, or by dragging the sides and corners of the image with a mouse pointer.

Note: When you resize the image with a mouse pointer, the option to keep the original aspect ratio is switched off automatically.

Hjälpcentral

Kategorier

Kategorier