Cluster block for WordPress: Add background image under multiple blocks

Today we’ll introduce you handy block that we made for WordPress editor – Cluster block. It is part of our special blocks group. They help you create beautiful website. We have recently released brand new Citadela Blocks plugin.

Cluster block allows you to group multiple blocks into one. You can effectively work with the whole clustered group as it was one block. Cluster width can be set to full page width that means you have an extra large space to add various blocks.

Cluster will not stretch to full width if:

• You have an active sidebar
• If you use columns that will limit space for Cluster

Because some of the core WordPress blocks can be aligned only to content width, Cluster block offers greater variability in building your website. Great feature also is, that you can set Cluster background image, change color or set background image overlay. Background can be therefore configured to website design.

In this article we will show you:

• How to add Cluster block to WordPress editor
• Grouping inside Cluster
• Basic settings in toolbar
• How to add background image under grouped blocks
• What is Background overlay

How to add Cluster block

Cluster block is a premium block and is only available if you install and activate Citadela Blocks plugin. After installing the plugin, Cluster block will be automatically added to WordPress block editor and you can immediately start working with it.

Cluster block can be added into both posts and pages. Simply click on “+” sign in top bar or anywhere on editor desktop. After then just search for Cluster block.

 

Second option to add Cluster block is by typing “/” and block name after that. Cluster block is then ready to use.

 

Grouping blocks using Cluster

Main feature of Cluster block is to group multiple blocks into one. Let’s have a look how it works. If you insert Cluster block to your page, you’ll immediately see a placeholder “Insert more blocks here”. If you click on it, you’ll get a list of all available blocks. You can also search for requested block using search bar on the top of the list.

 

All nested blocks will have all default options and settings available. For example if you insert Image block, you’ll have option to upload image or to select it from Media Library.

Using Cluster block you can for example create eye catching section on your website to present your recent work. Add images from your portfolio and after that set background image underneath it. You have just created a nice link to your portfolio.

 

Cluster block can be also used to create attractive product presentation. You can set product image as section background and choose it’s color. Service block can be also nested inside Cluster block.

 

Multiple blocks in a single one

If you want to add multiple nested blocks into Cluster, you can use Columns block. Using Column block you can add several blocks side by side. Each column can have different content type, such as image, paragraph, lists or button.

Typical example of multiple columns in combination with Cluster block is one page website.

 

Basic settings in toolbar: Content alignment options

By default, Cluster block width is set to content size. You can change this behaviour in toolbar. There are the following options available:

• Content size – default option, Cluster block has the same width as content.
• Wide size – content inside Cluster is wider than content width.
• Full width size – in this case Cluster width is from side to side of the browser window.

It’s important to note that this setting will only effect Cluster content if your currently active theme supports it. All nested blocks can be configured based on availability of their options.

 

Purchase Full Membership to get access to Citadela Blocks plugin and Cluster block in it.

Purchase Full Membership

How to add background image under grouped blocks

True power of Cluster block is that you can add background image and set background color underneath grouped blocks. Everything can be configured easily inside WordPress inspector. Let’s have a look how to do it.

1. Click on Background image and activate function “Show background image”.
2. Click on “Select image”. Media Library will open. You can select existing image or upload new image to your library.
3. Background image can be also set to fixed. It means that if you scroll the page, background won’t move with the content and it’s position will be fixed.
4. You can also choose which part of the background image should be shown using “Focal Point Picker”. It’s also possible to choose part of the image using percentage.

 

 

Background overlay

One of advanced options in Cluster is Background image overlay. You can choose one of default colors or select custom color using color picker. It’s also possible to set color opacity. These Cluster block settings help you to create really attractive website presentation.