Blocks in Sitebuilder are highly customizable. Many elements can be changed while keeping the layout beautiful and mobile-friendly – block background, content alignment, blocks spacing, and many more.
This tutorial will walk you through every setting that can be modified in the Block settings menu.
Accessing the Block settings menu
To access the Block settings menu, hover over the block to activate its control pane and click the Block settings icon.
The Block settings menu has two tabs: Layout and Appearance. Let’s explore each of them in detail.
The Layout tab
In the Layout tab, you can switch the block layout or hide some of the block elements.
To switch the block layout, click the respective button and select a new block content layout, then click Submit to save the changes. You can scroll down for more options and preview the layouts by clicking on them.
To hide a specific block element, untick the blue checkbox next to its name. You can tick it back if you change your mind.
Remember to click Save to apply the changes.
The Appearance tab
In the Appearance tab, you can choose the background color of your block, modify content alignment, turn the background overlay on, and many more. Since every block type has its own special features, each of them has its own selection of settings. Let’s review the settings options one by one.
For blocks with a background image, you can replace it in the respective section.
You can also change your background image’s position and focal point by pressing the crop icon and dragging your image to the position you want or using the zoom-in/zoom-out tool.
If you want to customize the colors of your block, you can change its color scheme by clicking the plus icon in the Block style section.
Read more about your site’s color palette in our dedicated tutorial.
Media content width
You can customize the media content width in the split-screen blocks and blocks with side media (the blocks where the image covers half of the block space). The Media content width feature allows you to increase or decrease the part of the block taken by the image, as shown in the video below. This way, you can create a unique website layout.
By adding space between blocks, you can avoid your site feeling cluttered. Adjust whitespaces of a block – you can change the top indent and the bottom one.
Note: Some blocks do not have the spacing option. For example, you can’t adjust it in the full-width Gallery blocks. Also, in some full-width blocks, such as the Header block and the Contact us block, the spacing option can be enabled by unticking the Fullscreen checkbox.
Media content location
You can flip the layout horizontally in blocks where media content takes one half of the screen, and textual content takes another half.
In this section, you can move the textual content of the block up, down, or align to the center. The video below demonstrates both media content location change and vertical alignment adjustment.
You can customize the horizontal and vertical content alignment of various blocks, for example, the Call to action block and the Text block. Click the respective radio button to align your block content to the left or to the center.
Add a border and a shadow to make the elements stand out on the page by ticking the respective checkboxes.
There are two options for customizing your background image: adding a black and white filter and creating an overlay effect. The Add B&W filter checkbox, when ticked, turns your background content black and white. The Add overlay checkbox adds a semi-transparent overlay to the block background image. You can also adjust the overlay opacity.