Blocks in Loopia Sitebuilder are highly flexible. Many elements can be customised while the layout keeps its clean, mobile-friendly shape – block background, content alignment, spacing between blocks and much more. This guide goes through every setting you can change in the Block settings menu.
Opening the Block settings menu
Hover over the block to activate its control panel, then click the Block settings icon. The menu has two tabs: Layout and Appearance.
The Layout tab
In the Layout tab you can switch the block’s layout or hide some of its elements.
To switch layout, click the relevant button, choose a new layout for the block’s content, and click Submit. Scroll down for more options and click a layout to preview it.
To hide a specific element, untick the blue checkbox next to its name. You can tick it again if you change your mind. Remember to click Save to apply your changes.
The Appearance tab
In the Appearance tab you can choose the block’s background colour, change content alignment, enable background overlays and more. Since each block type has its own special features, each block also has its own set of settings.
Replace image
For blocks with a background image, you can swap the image here. You can also change the background image’s position and focal point by clicking the crop icon and dragging the image, or by using the zoom tool.
Block style
To customise the block’s colours, change its colour scheme by clicking the plus icon under Block style.
Media content width
In split blocks and side-media blocks (where the image covers half the block), Media content width lets you increase or decrease how much of the block the image takes up – useful for creating a distinctive layout.
Block spacing
Adding space between blocks keeps your site from feeling cluttered. Adjust both the top and bottom margins here.
Note: some blocks don’t have a spacing option – for example, full-width Gallery blocks. In some full-width blocks, such as the Header block and Contact us block, you can enable the spacing option by unticking Fullscreen.
Content layout
Some blocks (such as the Gallery block and FAQ block) let you choose the number of items per row – pick an option with the matching radio button.
Media content position
In blocks where media takes up one half of the screen and text the other, you can mirror the layout horizontally.
Vertical alignment
Move the block’s text content up, down, or centre it.
Horizontal alignment
For blocks such as the Call to action block and Text block, align the block’s content to the left or centre using the matching radio button.
Content style
Add a border and shadow to make elements stand out on the page by ticking the relevant checkboxes.
Background settings
There are two ways to customise your background image: add a black-and-white filter, or create an overlay effect. Add black and white filter turns your background content black and white. Add overlay places a semi-transparent overlay on the block’s background image, and you can adjust the overlay’s opacity.