Contents

    Detailed description: Layout tab (Portlet)

    On this page, you will find a detailed description of the functions of the Layout tab of the portlets in the OnPage Composer. You can reach the tab by opening the OnPage Composer, selecting any portlet, clicking the pen icon, and switching to the Layout tab.

    Pane A

    Background colour: Set a colour to appear in the background of the portlet. Click in the input field and enter a colour code directly or select a colour from the colour selection.


    Font colour: Set the font colour of the portlet. Click in the input field and enter a colour code directly or select a colour from the colour selection. Please note that the font colour setting has no effect on some portlets, as this setting can be overwritten by individual style sheets (e.g. the active template).


    Font size: Specify the font size in pixels (px), em, or as a percentage, e.g 5px, 0.5em, or 50%.

    Pane B

    Padding: Specify the space between the element, such as an image or text, and the border. If you do not set a border, the padding is considered to be the space between the element and the “imaginary” border. You can specify the space in CSS units such as pixels (px), em or rem, e.g. 1.5em or 1rem. If you specify only a number without a unit, the number will automatically be interpreted as a pixel.


    Border: Enter the size of the border. You can specify the space in CSS units such as pixels (px), em or rem, e.g. 1.5em or 1rem. If you specify only a number without a unit, the number will automatically be interpreted as a pixel.


    Margin: Specify how large the space between the border and other elements should be. You can specify the space in CSS units such as pixels (px), em or rem, e.g. 1.5em or 1rem. If you specify only a number without a unit, the number will automatically be interpreted as a pixel.

    Note: The set margins of the portlets are fixed and do not automatically adjust to different screen sizes. To create responsive spaces, read the guide entry: Centring content with the OnPage Composer.

    Pane C:

    Border style: From the drop-down menu, select whether the portlet should have a border and specify the type of border. If you select Unset, no border is displayed.


    Border colour: Select a colour for the border of the element. Click in the input field and enter a colour code directly or select a colour from the colour selection.


    Border rounding: If you want the border to be rounded, enter a value here in pixels (px), em or as a percentage, e.g 5px, 0.5em or 50%. The larger this value, the more rounded the corners. You can specify the distance from the corner at which the rounding will start.


    Pane D:

    Custom class names: Enter the CSS class names to be assigned to the portlet via class attribute. The class names that you assign can be controlled using the active theme or with custom CSS in the template settings.


    Hide portlet for XS/SM/MD/LG: Select whether the portlet should be hidden when viewed on certain devices. XS stands for mobile phones, SM for tablets, MD for desktop computers and LG for large desktop computers.