You are here: Home / Additional modules / Smart site 2.0 / Layout / Design

Smart site 2.0

Layout / Design

In this area you can define the basic appearance, the arrangement of the elements and the colors. On the left side of the structure list the individual elements are listed which can be configured.



Only users with the “Edit Templates” permission can access the “Templates” option and the micro template editor.

With a template you choose the basic structure and design of the website (e.g. the position of the menu bar, size and position of the banners, distribution of the text windows). Use the magnifying glass to preview the template. Select or change the template by clicking on the selection circle on the left below the template. You can change the templates as you like, your content remains intact and is optimally displayed. With the preview at the top or bottom right you can see and test the page in real.

The templates are different, here some hints with special features

  • Template 4 has a picture background, there is no banner change possible. The last banner image is always displayed. Please pay attention to the recommended image size, if you want to use an individual image as background image.
  • Template 6 only displays the banner image on the start page
  • The 2nd menu bar is displayed horizontally, the position is different depending on the template.
  • Template 2 can display a 3rd menu bar – at the bottom –


Here you can adjust the colors for the individual elements of the website to your liking. The preview on the right side is a preview of the selected template, so that you always get an impression of the real page.

The colors are given as a 6-digit number/letter combination , which usually only a designer knows. You can also select the color according to your wishes by clicking on the color square smart site Symbol Farbquadrat on the right.

A dialog box opens with various selection options.

  1. Color preview: Here, the previous hue is displayed on the left and the new / selected hue on the right
  2. Free choice of colors: With the color gradient (1) you determine the basic color, in the large square (2) the brightness (3) / darkness (4) is determined by the luminosity (5,6). This allows you to adjust the color individually and finely.
  3. Color charts: A selection of 140 basic colors is shown here, which can be selected by clicking.
  4. Numerical values: The numerical values for the currently selected color are specified here. However, you can also enter the values of your company color here if you have these.

Please do not forget to save the color settings.

The preset color sample was carefully selected and the individual colors matched to each other.


Please save and clear the cache so that you can see the changes directly on your website.

By default, the logo from your onOffice enterprise edition is used, as long as you have defined one for the HTML / PDF brochures.

You can specify a different logo here, once a file has been uploaded, this will replace the default logo. The entered logo is displayed as a preview. If you do not want a logo at all, you must deactivate the use of the standard logo.

An image is displayed as a banner on your website. Exceptions are Template 4, which uses the banner as background, and Template 7, which does not use a banner.
In the category Banner you can choose which picture should be displayed. onOffice brings along 7 pictures which can be seen in the tab ‘Global’ and from which you can choose.
Of course you can also use your own picture as a banner. Please switch to the ‘Individual’ tab. Here you can upload the picture you have selected. The recommended size or aspect ratio of the image depends on the selected template and is displayed in the hint text to the right of the file upload. For larger images or other aspect ratios, a corresponding section from the center of the image is displayed, smaller images are distorted. The time for changing the images cannot be changed at the moment.

Below your individual image you can also specify a short alt tag, which will be displayed should the image not be loaded.


Individual / uploaded images can be deleted by clicking on the trash can icon in the upper right corner of the thumbnail.

smart site banner individuell löschen

Different banners on the individual menu items? That is also possible. In the menu ‘Contents / Structure’ you can define an individual banner image for individual menu items.


The favicon is the icon that is placed next to the page name in the browser tab. It can only be uploaded in a maximum size of 32 x 32 px.


Website Name
If you create or use more than one website, you can enter an internal name for each one here. The web pages can be selected in the list at the top right. You always edit the page whose name is displayed at the top right.

Website Slogan
Here you can enter your company slogan, which will appear on your website if you use one of our Premium Templates 2-4.


The website name is the internal name, it is not the name displayed in the browser. The settings for the displayed name in the browser can be found here.


Here you can enter keywords for your page. These keywords are inserted into the source code of the web page in the meta area. Separate individual keywords or keyword combinations with a comma. The keywords you enter will help some online search engines find your website more easily.