Customising Section Style

Section Components are the building blocks of a website on the Sinorbis platform. They create spaces that hold content, like text and images.

This article shows you how to set universal default styles for Section Components in the Style Editor. These styles include width, background colours, and spacing.

• To make the changes active across the website, click the Publish button at the top of the Style Editor page.

See Also

You can override universal default settings by customising an individual component. See Customising Section Settings.

1  Customising Section settings

Go to the Style Editor page. At the top of the screen, verify the Default Styles button is selected (it should be green).

Scroll down to the Section area. Hover the mouse pointer on the Section area and click the pencil button. 

The Settings panel opens.

• Content Alignment - Choose the way content sits in a Section Component: near the top, in the middle, or near the bottom.
• Width - Adjust the width of the section display relative to page size. Set the width in pixels or percentage of the page.
• Height - Adjust the height of the section display. Set the width in pixels, percentage of the page, or Auto, which adjusts to the content inside the section.
• Inner Background - This tool places layered content closer to the reader. Inner Background content sits in front of Outer Background content.
• Outer Background - Outer Background content sits behind Inner Background content. Use this tool, for example, to place an image in front of the background colour: the image goes into the Inner Background, and the solid colour goes into the Outer Background

2  Customising the background

You can add a layer of colour or insert an image into the Inner Background or Outer Background. The colour and image tools are the same for both backgrounds.

• Color - Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. Click the box with a red line to select a transparent background. For information about branding colours, see Customising Brand Colours.
• Image - Click the Image panel to open the Image Selector. Click the Cloud button to upload an image from your computer. For information about adding images, see Adding Images.
• Scaling Image Size - Customise image scaling inside the Section Component with FILL and FIT. For more information about scaling images, see Sizing Images.

3  Customising Spacing

Click the plus (+) or minus (-) boxes to increase or decrease the padding and margins.

4  Customising Advanced features

For developers, add a Class Name to specify CSS rules. For more information, see Adding CSS.