To customize the appearance of your Site:
- Navigate to the Sites Library
- Click into the Site you wish to customize
- Click Design next to the Site you want to customize.
The design tools will open in a new browser tab.
Changing the Site layout
Show/Hide Header and Footer
To show or hide a Site’s header or footer.
- Go to the Design tab
- Click the Layout tab
- Select or deselect check boxes in front of Show Header and Show Footer options.
Changing the content area width
The Site width is the total width of the content area for your Site. Your widgets all fit within this width, and resize accordingly. Each template has a default width which is designed to display correctly for most users, for example 976px.
To change the content area width:
- Go to the Design tab
- Select the Layout tab
- Drag the Width slider to the desired width, or enter the width, in pixels, in the Width field.
The preview will display the new Site width.
Changing the page alignment and margin
By default the content area of your Site is placed in the center of the browser window.
To change the alignment of the content area:
- Go to the Design tab
- Select the Layout tab
- Select Left, Center or Right alignment.
Changing the Site background colors
You can change a Site’s background colors based on its different sections - Header, Site, Footer can further customize the backgrounds depending upon the area of the section i.e. Outer or Inner.
To change the Site’s color palette:
- Go to the Design tab
- Click a color swatch from the section>>area of the section you want to modify - Header, Site, Footer
- Select the Color tab
- Select a color from the Color Palette or create a new color
- Click outside the popup box to see applied changes
- Repeat for each color swatch in each area
Text - Body of the content
Style | Description |
---|---|
Heading 1 | First Heading or the Main Heading of the content |
Heading 2 | Level two heading |
Heading 3 | Level three heading |
Link | Any hyperlink created within the Site content are placed under the link category |
Hover | The text color changes that appear when hovering your mouse cursor over a link can also be customized under this tab |
Visited | The links that have been visited or clicked can be customized to be displayed in a different font |
The availability and visibility of the fonts will depend upon style sheet of the selected design template.
Setting a background image
- Go to the Design tab
- Select color swatch from an area of the Site you want to insert a background image to display a dialog box
- Select the Image tab
- Locate your image file and select open
- Select a position for your image
- Select the tile option for your image
Changing the background image
- Go to the Design tab
- Select Remove Background Image (x) image field
- Locate your new image file and select open
Removing the background image
- Go to the Design tab
- Click the Remove Background Image (x) icon on the image field
Changing the Site fonts
You can define the font to be used for the text and headings on your Site. A select list of fonts is provided to ensure your Site appears correctly on all browsers and devices.
Modifying the text or heading font
- Go to the Design tab
- Select the Fonts tab
- Select a font level (Text, Heading 1, Heading 2, Heading 3, Link, Hover, Visited)
- Select a font style
- Enter the font size
Changing font color
- Click the font color swatch
- Click a color on the color wheel or enter a hexadecimal color
- Click the close (x) icon