Managing Sections

Building block settings

What are Building block settings?

Building block settings (Box Properties) affect a box's position, dimensions, appearance and functionality.

Some settings require specific pixel values, some you need to select from a list of options in a dropdown, and others can simply be toggled on and off.

How to access the Building block settings tab

  • Enable edit mode
  • Click the spanner
  • Select columns
  • Click the cog - a menu will appear to the right
  • Click the dropdown to show the settings for the building block

Row menu

1 - updated.jpg

Columns and cog

2 - updated.jpg

Dropdown menu

3 - updated.jpg

Columns and Rows Properties

It is important to know that each block has its own properties and settings. Before you adjust the block property settings you must click the cog relevant to the block you want to change. They will look similar hence why you should always click the cog first to ensure you are changing properties for the correct block.

6 - updated.jpg

Position & Size

Width: percentage written as a number for example 100, 90, 33.3 .

Tip: If you adjust the width of one of your columns, you should also update the width on all other columns in that row (the total width for all of the columns in a row must total 100% maximum ).

Z-index: value in whole numbers from one upwards, where boxes with higher numbers site in front of boxes with lower numbers, for example 1, 4, 326

Max (maximum height and width)

A box will obey the width settings (see above), and naturally take the height of its contents, but you can specify max-width and max-height thresholds beyond which it will not expand

Width: value in pixels e.g. 900

Height: value in pixels e.g. 300

Margin

Margin specifies the gap between a box and its neighbours. Each side can be set individually.

Top: value in pixels e.g. 0, 20

Right: value in pixels e.g. 0, 20

Bottom: value in pixels e.g. 0, 20

Left: value in pixels e.g. 0, 20

Padding

Padding sets the space between a box's contents its edge. Each side can be set individually.

If your box has a background colour or border, padding of 20 pixels is standard. 

Top: value in pixels, e.g. 0, 20

Right: value in pixels, e.g. 0, 20

Bottom: value in pixels, e.g. 0, 20

Left: value in pixels, e.g. 0, 20

Content

Align

Select the alignment of the box's content. If no alignment is chosen, it will default to the alignment of the box it is sitting within.

List style

List styles are used to manage the appearance of content, people, sections etc when shown on Filtered (Search) or Pinned lists (Sequence).

For example, some content list styles only show the content title. For other list styles, the content's image and date may also be included.

Box list styles only affect Filtered or Pinned lists elements. List styles should be assigned directly to the these elements. The box list style will only be used if 'None' is set as the element list style as the element always has priority.

Only one list style can be assigned per box or element.

Each site will have its own set of list styles customised to the needs of the site. To create a new list style or update an existing one, contact your SMLWRLD account manager for assistance.

Background

Background colour

The background colour of a box can be changed by entering a hex value into the field.

Note: you must include the "#" as part of the  hex value, e.g. "#80AA3F".

To translate your organisation's brand colours to hex values, go to:

WC3 colour converter

Image

You can upload a background image for the box. The image will appear behind any box content.

Go to:

  • Building block settings
  • Scroll down to background
  • Upload image

4 - updated.jpg

Example of background applied to a building block

5 - updated.jpg

Background Method

There are various settings to manage how background images will look and behave:

  • Repeat Horizontally: image will be original size, and repeated to the left and right
  • Repeat Vertically: image will be original size, and repeated up and down
  • Repeat Horizontally & Vertically: image will be original size, and repeated in both horizontal and vertical directions
  • No-repeat: image will be original size, and unrepeated
  • Fixed Position: image will stay in its exact location, it will not move as the user navigates through the page.
  • Contain: image will resize to fit perfectly within the box, while maintaining its original aspect ratio. To achieve this, parts of the box will not be covered by the background image
  • Cover: image will resize to perfectly cover the whole box, while maintaining its original aspect ratio. To achieve this, parts of the image will be cropped

"Cover"or "contain" suit the majority of cases.