Sections and Pages

Building block layouts

What are building block layouts?

Building block layouts allow us to position content within a row. 

See the Page components summary for details.

Building block layout options

  • When you add a row it will ask you to select a building block layout
  • There are several preconfigured options available
  • If in doubt select the simplest option - the single block layout

select-building-block.jpg

For next steps see the Block elements guide.

Building block settings

Building block settings affect 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.

Edit building block settings

  • Click the spanner to the right of the row 
  • Click columns button
  • Click the cog at the bottom - a menu will appear to the right
  • Expand the panel to show the settings for the building block

Row menu

1 - updated.jpg

Columns and cog buttons

2 - updated.jpg

Expand the settings panel

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.