Our site.pro tips

A page is created, changed or edited using the pull-down menu on the top left corner, next to the Site.pro logo. You can also create a new page while creating or editing a menu. To do this, click on an existing menu and select "Edit Menu" or create a new menu. By clicking on the "+ New menu item" link at the bottom left of the window that opens, you automatically create a new page for the menu item.

You can remove a page from the menu by clicking the "x" to the right of a menu item in the same window. This does not delete the page itself.

To ensure that horizontally arranged containers/columns break from a certain browser width, i.e. slide below one another, you can proceed as follows:

1. Select a container that contains multiple columns.
2. On the right in the editing options under the "Layout" section, check the "Switch to vertical layout on smaller screens" checkbox and use the radio buttons below to specify from which view the columns should slide below one another.

In the right column under the "Layout" section there is a checkbox labeled "Sticky". This allows objects to be fixed to an edge of the browser. In the square below you specify which edge that should be.

If, for example, the menu items of a menu should have rounded corners, you can proceed as follows:

1. Select the menu
2. On the right in the editing options under the section "Menu items" click on the box "Border" (the style can be set individually for standard, floating (= hover) and active)
3. In the grid view, click on a corner (you can also click the "Use different borders" or "Use different corners" checkbox below and style the borders or corners differently). A selection of different corner styles will appear. You can also specify the corner radius using a manual value.

1. Select the menu
2. On the right in the editing options under the "Menu items" section, click on the "Animation" box
3. Select the "Hover" tab in the window and select the desired animation from the "Effect" pull-down menu. Then specify the required direction, duration, delay, etc.

The context menu for editing a container can be accessed either by clicking on the pencil icon in the upper right corner. It is even more convenient to simply right-click on the container.

Margin and padding, i.e. the outer and inner distances around an object, can be defined in the right column under the "Spacing" section. Below that, you can specify what percentage should be used for each device/screen width.
Margin and padding can also be adjusted more intuitively by dragging the outer edge of the object with the cursor.

Site-wide styles/text formats can be set up either by clicking on a text container, then on "Edit Text" and then on the pencil icon on the far right. You can access the same settings by clicking on the "Settings" menu item at the top right and then on the "Style" sub-item.

Here you can see that some formats are already available by default. You can adapt existing formats or create new ones.

Subsequent changes to a text style affect all areas to which it was applied.

Select the main container of the content area and check the checkbox in the "Max" field under the "Size" section on the right in the editing options and enter the desired maximum width.

A favicon, i.e. a small image that can always be seen on the left in the browser tab, can be added via the "Settings" menu at the top right, sub-item "Favicon".

Select the form, check the "Label Column Width" checkbox in the right-hand column in the "Labels" section and enter the column width for the label.

Once you have created an element of the "Languages" type on the page and added other languages in the right column under the "Languages" section, an additional drop-down menu for the languages will appear when editing each text. There you can select one of the available languages and enter a translation.

You can start by creating an object of type "Button". Then you can add a background in the right column under the "Button" section by clicking on the "Background" field. Now click on the "Image" field to select a background image. Then set the filling and position, and whether the image should repeat horizontally or vertically. Since this is a link, these settings must also be made for the Hover (Floating) and Active states.

If a specific design cannot be implemented using the modular options, you can also add your own style sheets:
- Select "Pages" in the "Settings" menu at the top right. Then switch to the "Scripts" tab and enter the desired style sheets in the "Before </head>" field. However, such changes are not visible in the assembly view, but only in the preview.

Graphics that contain text can also be replaced depending on the page language. The prerequisite for this is that you have already created the required languages, as described in the "Translate page" section.

Now place the image with text in the first language, then click on the pencil icon and hover over the "Remove" menu item. All available languages will then emerge for selection. Delete the image for any language you don't want it to appear in. Then insert the image with the text in the second language and continue as above.