Experiencing an issue?

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. 

See Also

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

 

 

1  Customising Section settings

  1. Go to the Style Editor page.
  2. At the top of the screen, verify the Default Styles button is selected (it should be green).
  3. Scroll down to the Section area.
  4. Hover the mouse pointer on the Section area and then click the Pencil button. The Settings panel opens.
  5. To make the changes active across the website, click the Publish button at the top of the Style Editor page.

 

section-style-1.png

 

Content Alignment

Choose the way content sits in a Section Component: near the top, in the middle, or near the bottom.

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 background colour:

  • the image goes in the Inner Background
  • solid colour goes in 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:

 

trans-box-1a.png

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:

Scaling Image Size

Customise image scaling inside the Section Component with FILL and FIT. For more information about scaling images, see:

 

3  Customising Spacing

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

 

section-space-1.png

 

4  Customising Advanced features

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

 

Related articles