Group

The Group Block allows you to combine multiple blocks into a single container, making it easier to manage and organize your content. This block is perfect for creating complex layouts and ensuring consistent styling across different sections of your site.

How to add an group block

  • Click on the ‘+’ button and choose the ‘Group’.
  • Alternatively, type /group and press enter.

How to convert multiple blocks to a group block

  • Select multiple blocks by either dragging your mouse over them or holding down the ‘Shift’ key and clicking on each one.
  • Click on the group icon or use the ‘More options’ button to convert them into a single group.

How to edit content within the group block

  • Add various blocks inside the Group Block to create a customized layout.
  • Incorporate columns, headings, paragraphs, images, and buttons for a dynamic design.

Note: Settings in the sidebar will adapt based on the block you select within the Group Block, offering tailored customization options for each element.

Block toolbar

After creating a Group Block, you’ll find these useful tools in the block toolbar to help you customize and manage your grouped content effectively.

Transform to

The ‘Transform to’ button lets you change a Group Block into a ‘Cover’ or ‘Columns’ block.

Drag & Move

Use the six-dot icon to drag your block, or the up and down arrow buttons let you move a block one position higher or lower.

Alignment

The ‘Alignment’ tool lets you adjust the width of your Group Block. Simply click the icon, and a menu will appear with options. You can set your Group to no alignment, max 1200px wide, or full width.

More Options

The More options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.

Block settings

Access the block settings from the editor sidebar, visible on the right side panel when you click on the block.

Layout

  • Inner blocks use content width: When you turn on the toggle, nested blocks use content width with options for full and wide widths. You can customize the width for all elements assigned to the center or wide columns using units such as px, rem, vw, and vh. Additionally, you can adjust the justification of items to ‘left’, ‘center’, or ‘right’. If you turn off the toggle, nested blocks will fill the entire width of the container. Toggle to constrain the width as needed.

Position (sticky)

You can select the position as ‘Default’ or ‘Sticky’ to make your Group Block stick to the top of the viewport for enhanced navigation, creating a sticky layout that remains visible as users scroll.

Advanced

Add HTML anchors or CSS classes for unique styles or navigation. The HTML anchor settings allow you to create a unique anchor text for the Group block, enabling you to link it to another web page.

Styles

Choose different styles such as ‘Default’ or ‘Full’ to match your design needs.

Colors

The ‘Color’ option enables you to customize your block by selecting unique colors for the background in your Group Block.

Dimension

  • Padding: Adjust the padding to create space inside the block.
  • Margin: Set the margin to create space outside the block.
  • Block spacing: Configure the spacing between nested blocks for a well-organized layout.

Border

Customize the Group Block’s border radius by specifying units such as px, %, em, rem, vw, or vh.

Additional resources