When you right-click on a module, at the bottom you can choose to go to the module's properties. There you will find a number of setting options.
In the dialogue box that appears, you can access different parts of the properties dialogue. By default, the Appearance panel is shown. This covers the property settings for Appearance. Here you can access the decorations for the module, spacing (CSS paddings), margins (CSS margins), size, responsive web and grid, background, borders and style (CSS).
Click the menu selection in the upper left corner and you can access the overview of all panels on a module.
Under the decoration option you designate the decoration you want to use in the dropdown menu. From here you can also change or delete the decoration that is selected. Click the cross in the decoration menu to remove the decoration from the module.
Under CSS paddings, you can access padding settings. Padding affects distances within the module or layout. Here you set the padding at the top, bottom, left, or right.
You can make margin settings under CSS margin. This setting affects the margins around the module or layout. Here you set the margins at the top, bottom, left or right.
Set the size, width and height, of a module or layout under size. The default width of the module is the width of the entire content area. Here you can reduce or increase the width and set the height.
Here you can specify the module or layout’s width in columns based on those set on your website. The module can also be adjusted sideways here. The position is in relation to the columns that are set up on the website.
By default, the content appears in the order in which it appears in the content box, from top to bottom. You can use adjust sideways to change the order in which the content is stacked. The reason why you would want to adjust the order may be that you want to have different looks on your site for a visitor visiting from a computer compared to one visiting the website via a mobile phone or tablet.
How do you adjust the content of your page?
If the prerequisite is that the centre column is 8 columns and the right column 4 columns.
1. Move the right column so that it is above the centre column in the content box.
2. Go into the properties of the right-hand column and Adjust sideways: 8 columns right.
3. Go into the properties of the centre column and Adjust sideways: 4 columns left.
In the editor, everything looks as before, but in the content box, you will see that the order of your content areas is different.
Show in breakpoints and Hide in breakpoints means that here you can make the settings to hide or show a module in the breakpoints that are set for the website.
Background properties allow you to set a background colour for the current module or layout. Here you also choose if you want to designate a background image. The colours that you can choose depend on the colours that are available on the website, the colours that your permission can access, and the colours that the module has been assigned.
If you choose to designate a background image to your module, you have to make size settings directly under the properties of the current module. A new view is displayed where you can select image.
This sets the size of the background image with CSS. The following options appear:
Here you set how you want to position the image, where the default is Top - left. The following options appear:
Here you adjust whether the image should be repeated and how. The following options are available:
Here you can choose whether the module or layout should have a border and whether it should be all the way around (that is, top, down, right, and left) or just individual borders. Then you can select the type, colour and thickness.
If you select Separate borders, you can select the border that you want to add by ticking one or more check boxes. You can then set the type, colour and thickness.
To set an additional border, such as Border top, tick the box.
To remove borders, select the "No borders" option.
If the settings in the interface are not sufficient, it is possible to set up custom CSS classes on the website. You can then designate CSS class names to the module or layout to affect the appearance or function of the module. You can also enter custom style folders in the Custom style field.
The linked class names must be defined on the website, and the option is only displayed if these are present and available. To mark up a module with a CSS class name, click Select. A dialogue opens with the CSS class name that is stored on the website.
To disable the custom style on the module, click the X next to the CSS class name, and it will be removed.
The Appearance panel can be found on the items:
The page published: 2019-02-17