Table of Contents
Cluster block allows you to group other blocks into one parent block and create that way interesting section of blocks with a custom background.
Block settings in the toolbar
Toolbar buttons available on the block allow you to change the width of the block to Content Size, Wide Size, or Fullwidth Size. Once the image is selected as a background, the 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 the Cluster block.
Block settings in the sidebar
From the sidebar settings of the block, you can define the background, overlay, border, shadow, and height options related to the block.
Background settings
Block offers four background types:
- None
- Image
- Single color
- Gradient
Image background
Image background options allow you to upload a custom image into the background and define other additional options:
- 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 the Mobile size tab and define parameters.
You can define the screen width when responsive options are applied.
A 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 a mobile version image. Choose a position and background colour for transparent png format. Other options are used the same as in the desktop layout.
How to change background image
Background image can be changed by clicking on the following icon:
Single color background
The option allows you to define single color in the background of the block.
Gradient background
The option allows you to define gradient in the background of block.
Border settings
Options allow you to define the 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.
Shadow can be displayed as outside or inset shadow type.
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 size or cover height is defined for the block, you can also vertically align content inside the block using icons available in the block toolbar.
For cluster blocks that are inserted inside Columns block is available an additional option “Cover column height” which will fit the height of the Cluster block to the full height of the column in which is inserted. This option has an effect if the Cluster block is only the one block inserted directly into the Column. Of course, you can insert as many as you want other blocks into Cluster block.
Width settings
Width settings allow 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 the active Citadela Pro plugin.
Mobile settings
With mobile settings can be defined if Cluster block is displayed or hidden only on a 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 the Cluster block. Available are three types of space: None (default spacing), 0 (zero, no spacing), small and large spacing.
