help.sitevision.se always refers to the latest version of Sitevision
Panels Appearanace on layout
When you right-click on a layout/grid/grid row/grid column, at the bottom you can choose to go to the layout'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).
To access all the properties for the layout, click the Overview panels icon in the upper-left corner.
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.
Here you can set the spacing between the content that is in the layout. This to obtain a specific space between each item you add. This is a setting that the administrator normally sets in the page templates for a content area. For example, if you have a layout where there are three modules, the modules are usually stacked on each other without spacing. If you set a spacing of 10 pixels in the layout, the three modules appear with a spacing of 10 px. The person who adds new modules does not have to make a setting every time.
Technically, spacings are margins.
You can select from PX or EM units, or percent when setting spacing.
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.
Why adjust columns sideways?
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:
- Auto - Background image’s normal width and height
- Contain - Rescales the image to the largest size so that both its width and its height can fit inside the content area
- Cover - Scales the background image so that it is as large as possible, so that the background area is completely covered by the background image. Some parts of the background image may not fit.
Here you set how you want to position the image, where the default is Top - left. The following options appear:
- Top - Left
- Top - Centre
- Top - Right
- Centre - Left
- Centre - Centre
- Centre - Right
- Bottom - Left
- Bottom - Centre
- Bottom - Right
Here you adjust whether the image should be repeated and how. The following options are available:
- Horizontal and vertical
- No repetition
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.
- Style - Select type from the list. The following options appear:
- Color - Select a color from the list. The colors that are set as website colors are available in the list.
- Thickness - Set the thickness of the border. Click the plus button to increase thickness or the minus button to reduce the thickness. You can choose between the PX or EM units. Click the arrow to change unit.
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 page published: