Online Store

Block settings

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.

block-settings-1.png

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.

Replace image

For blocks with a background image, you can replace it in the respective section.

heading-block.png

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. 


Block style

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.

block-settings-2.png

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.


Block spacing

By adding space between blocks, you can avoid your site feeling cluttered. Adjust the 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. 

block-settings-3.png

Content layout 

Some blocks allow you to choose the number of items in a row (for example, the Gallery block and the FAQ block). Select one option from a set by clicking the respective radio button.

block-settings-4.png

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. 

Vertical alignment

In this section, you can move the textual content of the block up, down, or align it to the center. The video below demonstrates both media content location change and vertical alignment adjustment. 


Horizontal alignment

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.

block-settings-5.png

Content style

Add a border and a shadow to make the elements stand out on the page by ticking the respective checkboxes.

block-settings-6.png

Background settings 

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.


Once you are done customizing your block appearance, click
Save to confirm the changes.

We hope this guide helped you. If you have any questions, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

Was this article helpful?
0 out of 0 found this helpful