The LSX Container Block is used to add full-width background images or colours to any desired content.

Adding a Container Block to your page

  • Select the Plus sign for adding a new block and search for “LSX Container”.
  • Once selected, you will notice the Column block space does not take up the full width of the content area. You can leave it as is if you wish for the background to respect the normal page width.
  • To set the container to full-width, select the LSX Container block and set to “Full width” in the alignment options above the block.

Configuring the block

On the right hand side of your edit screen you have your block toolbar. Once the block is selected, you can add your background and configure the container spacing.

Padding Top (%) – The spacing inside the container section above the inside content.

Padding Bottom (%) – The spacing inside the container section below the inside content.

Padding Left (%) – The spacing inside the container section on the left of the content.

Padding Right (%) – The spacing inside the container on the right of the content.

Margin Top (%) – The spacing outside the container section above the inside content.

Margin Bottom (%) – The spacing outside the container section below the inside content.

Inside Container Max Width (px) – Set a maximum width of the inside content.

Background Options – Here you can either set a background image or a background colour. This will display full-width on the page.

Now that the container is configured, you can add as many blocks into the container as you wish.

Need help with a different LSX Block?

Need help with a different LSX Block? Find the walkthrough you are looking for from our block documentation homepage.