Wrappers let you group elements inside a Fluid Grid block container and give the group its own layout: flow direction, alignment, spacing, padding, and background. You can nest wrappers inside other wrappers, so one container can mix stacked and side-by-side layouts.
Why use wrappers
Mix layouts in one container. A container’s flow applies to every element in it. With wrappers, you can stack a headline above a paragraph and put two buttons side by side, all in the same column.
Build complex blocks in one container. Profile and product cards, testimonials and stats rows (a value above its label) no longer need extra containers.
Style text and buttons. Text and buttons don’t have their own background settings. Wrap a single element to give it a background, padding, and rounded corners. This is an easy way to create tags, pills and badges.
Wrap several elements
Click the first element you want to wrap.
Hold Shift and click each other element you want to include. They must all be in the same container.
In the floating menu above the selection, click Wrap.
The elements are grouped, and Wrapper settings open in the right sidebar.
Wrap a single element (tags, pills and badges)
Right-click the element, for example, a short paragraph.
Choose Wrap.
In Wrapper settings, set:
Background color
Wrapper padding, for example, 6 px top and bottom, 16 px left and right
Corner radius
Set the wrapper layout
Click the wrapped element to open Wrapper settings.
Set how the elements inside the wrapper are arranged:
Flow: side by side (→) or stacked (↓)
Justify and Align: position the elements inside the wrapper
Space between: set the gap between elements
These work the same way as in Container settings, but they only affect elements inside this wrapper.
Optionally, add Wrapper padding, Background color, and Corner radius.
Nest wrappers
You can place a wrapper inside another wrapper. You can also select elements inside an existing wrapper and wrap them.
Example: A stats row is a side-by-side wrapper that holds several stacked wrappers. Each stacked wrapper contains a value and its label.
Unwrap or delete a wrapper
Unwrap: In the wrapper toolbar, click Unwrap. This removes only the wrapper. The elements stay where they are.
Delete: Click the trash icon. This removes the wrapper and everything inside it.
Limitations
Wrappers are available only in Fluid Grid blocks.
You can wrap only elements that are in the same container.
Wrap appears in the floating menu only when two or more elements are selected. To wrap one element, right-click it and choose Wrap.
FAQ
Why don’t I see the Wrap option?
Either only one element is selected, or the selected elements are in different containers. To wrap a single element, right-click it and choose Wrap.
My elements moved left after I wrapped them. Why?
New wrappers start with Align set to Start. Set Align to Center in Wrapper settings.
How do I remove a wrapper without losing its content?
Use Unwrap, not Delete.