Whether you’re using a template or starting from scratch, here are some tips and tricks to help you get the most out of the new design editor

Before getting started, feel free to check out our full article on components 👉 What are the components of poool's design editor?

Use rows

This component is a full-width block that spans the entire width of the wall.

Using rows allows you to easily structure and organize your wall.

It helps you manage spacing between blocks more efficiently, handle responsiveness, and control behavior before and after unlocking. It also enables you to create columns and manage their horizontal and vertical alignment.

In short, the row is the component that will make your life easier ✨

When you add a row, it automatically creates a column.

If you divide the row into 3 columns (using the [+] on the sides), you can insert components one above the other.

Define rows size

3 possible options :

• Flexible (by default) => fits to the available space
• Adapted to content => adapts to its content
• Defined column size => fixed width of x column(s).

Example :

12 columns = 100% width

6 columns = 50% width

If you have components or block that should be repeated, you can easily duplicate them by using [⧉] on each element.

Define alignment

In row options, you can choose the Columns direction. This option defines the main axis (row or column) and the direction (normal or reversed).

Horizontal alignment

Specifies how space should be distributed between and around components along the row’s main axis.

• Left / Right / Center : the elements will be grouped on the left, right or center
• Space between columns: the elements will be evenly distributed, the edge of the first one is aligned with the beginning of the row and the end of the last one is aligned with the end of the row
• Space around columns: elements will be evenly distributed, at each end, between the edge of the row and the first/last element, there will be a half space applied between each element

Vertical alignment

Sets the vertical alignment of the components in the row along the main axis.

• 4 available values : Top / Center / Bottom / Stretch

Inter-column spacing

Enables/disables the spaces between the column and the row edges.

Example

We created a row, divided in 2. On the right, we have an image and on the left, we have a title, a text and a button. The right column has a fixed width of 8 columns and the left column is set on "Flexible" (it takes 4 columns as the right column takes 8 columns).

Dashboard view

Reader view

Handle responsiveness

Thanks to "Responsive" options, you can manage the display of elements for each screen size.

For each row of your design, you can easily choose to display or not to display it according to screen sizes.

To manage this, click on [✏️] on the element you want to work and go in the "Responsive" tab.

Settings for displaying before/after unlocking content

Within the 'Settings' tab of each component, you can define whether a component will be visible before or after a user unlocks content.

By default, elements are visible before unlocking the content and hidden after unlocking the content.

Check our video tutorial :

If you have any questions, don't hesitate to contact us via the chat !

Login to the Dashboard

Updated on: 25/03/2026