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.
Block offers four background types:
- Single color
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.
Options allow you to define border on the block with custom color, width and radius for rounded block edges.
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.
Shadow can be displayed as outside or inset shadow type.
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 size or cover height is defined for block, you can also vertically align content inside block using icons available in the block toolbar.
For cluster blocks that are inserted inside Columns block is available additional option “Cover column height” which will fit the height of Cluster block to the full height of column in which is inserted. This option has effect if the Cluster block is only the one block inserted directly into Column. Of course you can insert as many as you want other blocks into Cluster block.
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.
Width settings are available only with active Citadela Pro plugin.
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.
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.