Blocks

Create blocks

To create new blocks, you need to go to the component menu.

Now you can proceed with creating the block itself.

Click the "Create" button, and a modal window appears in front of us.

Name field	Description
Name	Block name
Chunk	Chunk name
Fields	Block fields
Tabs	Block tabs
Availability	Block availability

Let's create a simple Hero block as an example, which will have 4 fields: title, description, image, and background.

Step 1. Create block

Step 2. Add the block to the page.

Step 3. Create chunk

We will use Fenom syntax.

*The chunk name must match the field name Chunk when creating the block.

Chunk hero

<section class="hero" style="background-image:url({$background.url})">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>{$title}</h1>
                <p>{$description}</p>
            </div>
        </div>
    </div>
</section>

As you've already understood, the variables $title, $description, and $background are the names of the fields we created when making the block.

Ready blocks

There are situations when the same block is repeated on different pages.

Of course, you can copy the block, but we need the data to be updated on all pages when this block is changed. To solve this problem, we need to add the block to the "Ready Blocks" section.

Step 1. Go to the "Ready Blocks" menu.

Step 2. Add the block just as you would in a resource.

Step 3. Add the ready block to the page.

When updating one such block, regardless of where it is located, other blocks will be updated as well.

Block synchronization

You also have the option to add synchronization to an existing block. We need to know the ID of the block with which we want to enable synchronization. Usually, we synchronize blocks with predefined blocks, but it's possible to synchronize with any other blocks as well.

Or remove synchronization to make the block unique.