Skip to content
Verdant Studio logo

Changing layout

1. Controlling block width

By default the Advent Calendar uses the default content size to display its contents but you can change the width of the block.

Select the Advent Calendar parent block to highlight the settings and click on the align icon as displayed below.

A dropdown will appear allowing you to select more width options to make the block wider or even full width.

Note that these options may vary based on the theme.json inside your WordPress theme.

2. Grid layout

Super Advent Calendar also allows you to set the column width.

Just select the Advent Calendar block and change the minimum column width settings and the columns will align accordingly.

Or if you want you can manually define how many columns you want per row.

This works, but the doors are still quite flat… we can change this by selecting a day in our calendar. Each day represents an individual block with its own block settings. If we select the “Styles” tab in our block settings we can control its dimensions such as the padding.


Help! I am missing some of the block controls!

Super Advent Calendar seamlessly integrates with native WordPress block settings, including dimensions and other customization controls. However, some of these controls may not be available in your current WordPress version or theme.

If you’re using a third-party theme, you can request the theme developer to enable these advanced Gutenberg features. Alternatively, if you’re comfortable editing your theme’s functions.php file, you can enable them yourself.

Simply add the following lines to your functions.php file:

add_theme_support( 'appearance-tools' );
add_theme_support( 'custom-spacing' );

We can also define column and row spans to maintain a grid layout, allowing you to highlight specific days in your calendar as special.

By utilizing columns we can create a masonry layout such as the example below.