Cluster block

Cluster block allows you to group other blocks into one parent block and create that way interesting section of blocks with custom background.

Block settings in the toolbar

Toolbar buttons available on the block allows you to change the width of the block to Content Size, Wide Size or Fullwidth Size. Once the image is selected as a background, toolbar icon allows you to change the image displayed in a block. For Cluster with custom height defined are available options to align content vertically. You can align content to the top, center or bottom of Cluster block.

Block settings in the sidebar

From sidebar settings of block, you can define background, overlay, border, shadow and height options related to block.

Background settings

Block offers four background types:

• None
• Image
• Single color
• Gradient

1. Image background

Image background options allow you to upload a custom image into the background and define other additional option:

• set background image size
• set repeat option for an image in the background
• define if an image in the background is fixed or scroll with the page
• set position of an image in the background by defining the focal point on an image
• set background colour or gradient under an image, these options are useful if your background image is in transparent png format
• set overlay over the image, the overlay can be defined by single colour or gradient with custom transparency to create interesting background look

Responsive option for image background

Allows you to define different background image settings for desktop size and custom responsive screen size. Once you upload an image as background another radio button shows up. After enabling it, new tabs show up. Go to Mobile size tab and define parameters.

You can define the screen width when responsive options are applied.

Responsive layout can have another image in the background. Change the image with a smaller size and speed uploading time. Go to block toolbar and replace the existing desktop background image with mobile version image. Choose a position and background colour for transparent png format. Other options are used the same as in the desktop layout.

2. Single color background

Option allows you to define single color in the background of block.

3. Gradient background

Option allows you to define gradient in the background of block.

Border settings

Options allow you to define border on the block with custom color, width and radius for rounded block edges.

Shadow settings

Defining the color in shadow settings you can activate shadow under the block. Available are all needed parameters to customize shadow per your needs, there are controls for horizontal and vertical offset, blur and spread radius in pixels.

Height settings

Using height settings you can force the block to display in defined height, if the content inside the block doesn’t exceed this height. You can select from different units for block’s minimal height, available are pixels, vh and vw.
Once the custom height is defined for block, you can also vertically align content inside block using icons available in the block toolbar.

Width settings

Width settings allows you to customize width for content in Cluster block which is by default defined in General Layout settings in WordPress Customizer.
Width can be changed separately for different sizes (content, wide and fullwidth) set up in Cluster block toolbar.

Mobile settings

With mobile settings can be defined if Cluster block is displayed or hidden only on mobile. You can hide the block with its content under responsive screen size.

Spacing settings

Options allow you to define padding (spacing) around content in Cluster block. Available are three types of space: None (default spacing), 0 (zero, no spacing), small and large spacing.