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

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

Columns and cog buttons

Expand the settings panel

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.

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.