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:

  1. Go to the Design tab > Scheme tab.

  2. 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.

  3. 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.

  4. 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:

  1. Go to the Design tab > Colors tab.

  2. Select the website element in the Page area menu. You can modify Site background, Watermark, Header, Footer, and Content areas.

  3. Click the arrow in the Color or image menu.

  4. Select the opacity level for the background.

  5. Do any of the following:

    • 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.
  6. 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.

    Note

    Modifying the styleset on the Scheme tab will override the changes made on the Colors tab.

  7. Click OK to save changes.

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

  1. Go to the Design tab > Fonts tab.

  2. For each font type, select the font face and size in the menus.

  3. 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.

  4. Click OK to save changes.

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

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

To select borders for website elements:

  1. Go to the Design tab > Borders tab.

  2. Select the border type for elements inside your website from the Internal containers border menu.

  3. 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.

  4. Select the external border for your website from the External site border menu.

  5. Click OK to save changes.