Content options

Dialog 1 - Preferences set to global values

Dialog2 - Preferences set to own values

Content options

With page4 you have the possibility to design every single content (section) graphically. You can find the gear wheel in the toolbar on the far right. By default, all contents have the same settings. You can find the dialog in the menu "Design" and there at the bottom under "Design settings". If you open the dialog "Edit Content Settings" via the gear icon in the toolbar, you can edit the border and the background. There are two options above the setting options. "Accept values from layout" and "Use own values". If the "Apply values from layout" option is active, the content element uses the settings you entered in the "Design" menu under "Design settings".


If you click on "Use custom values" you can change the default values and the content element you are editing will use custom values for borders, background and spacing. This also means that if you change the global settings under the "Design" menu, these changes will only be applied to content elements that have activated the "Apply values from layout" option. All content elements that you edit manually keep their own values until you deactivate the option "Use own values".


You have different possibilities to change the "around" of a content element.

The toolbar

Each content element has so-called options, i.e. special settings. You can open the dialog by displaying the toolbar (picture above), by moving the mouse over a content element and then clicking on the gear icon (6). When you open the options for the first time, dialog 1 (large image) is displayed and all settings are set to "Apply values from layout". To enter your own values, you must click on "Use your own values" and can then edit or change the input fields.

Global options


For the global preference settings for all content elements, go to the "Design" main menu and select "Contents" (1). Apart from the marker, the dialog contains all options that the content element also has. It is a free floating dialog, with which you can see live all changes directly on the website.


You can create a border for each page of the content element and give it a strength. All the borders together can have their own color. The thicknesses of the borders are built up inwards. This means that if you create a border of 20 pixels (px) on the left and right, for example, the actual content is moved 20 px inwards. The total width of the content element, however, does not change. If you activate the borders displayed at the top and bottom, the height of the element increases and the actual content is moved downwards.


Each content element can have its own background color. If you want the background to be transparent, simply delete the color values with the trash.

Internal spacing (padding)

You can do several things with the padding If you just want there to be more distance between the individual contents on your website, you can globally set that each content element automatically gets a padding below. If you specify a padding above and below, then the distance between two contents naturally becomes as large as the specified distance above and below together. Therefore, it usually makes sense to enter only a distance below. If you set this globally, each new section and all existing sections that are set to "Copy values from layout" automatically have the global values for display. If you want to display individual contents at a greater distance from each other, you can of course overwrite the global values with your own specifications at any time.


If you use a border, it makes sense to give the content a certain padding to the border. You also use the padding for this. The border "pushes" the contents inwards as described but the padding is always calculated from the inner edge of the border. If you use 20 px padding, then the actual content of the element will be 20 px from the border, no matter how strong the border itself is.

Jump marker for links

Each content element automatically gets a unique label (#cnt1234). This allows you to create links at any time to jump to individual content elements on a page. You only see this effect if the page is so long that you have to scroll. An example of how you can use such jump labels:

Suppose you have a long page with 10 longer texts, each with a headline. Then you can create a table of contents at the top of the page, specify the headlines and each of them will link to the original headline on the page. All you have to do is use the jump markers of the individual headlines as a link. 

You can also jump to elements on other pages by inserting the jump mark after the link to the page. If the element to which you want to link is located on the page "holiday.html" then the link to the element with the jump label "#cnt5449" looks like "/holiday.html#cnt5449".

page4 Webbaukasten 0