Whether you're using a model or starting from scratch, here are some tips to make the most of our new design editor.

You can also check out our other article covering each of the components in the new design editor. 👉 What are the components of the new design editor?

Employing rows allows you to easily compartmentalize your wall, both vertically and horizontally.

It's also a way to modify responsiveness, wall behavior before/after blocking and the spacing etc. of each 'block'.

In sum, rows will make your life easier! ✨

If you'd like to use the same block or component multiple times in your design, you can simply duplicate them by clicking on [⧉], meaning you don't have to keep recreating the same thing!

Once duplicated, you can then drag & drop the elements in another block.

When you use one row, you get one column.

If you cut the row in 3 (thanks to the little [+] in the corner), you get 3 columns.

"Elementary my dear Watson" 🕵️‍♂️

For each column, you can insert one or two components in a vertical arrangement.

By default, the columns have a 'flexible' size, meaning they'll take up the whole space.

You can modify the width of each column in the 'settings' tab.

Thanks to the 'Responsive' options, you can modify the way that each element is displayed on different screen sizes.

For instance, you could decide to hide/show one element or change the size of the columns/rows according to the screen.

To modify the responsiveness, click on your chosen element's icon [✏️] .

Thanks to the new design editor, you can modify each element's behavior before and after the article has been unlocked.

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

The elements that are visible after unlocking will appear beneath the unlocked content.

To manage these options, you can go to the 'Settings' tab after clicking on the [✏️] icon.

In the 'Edit appearance properties' page, you can personalize the colors used in each element, including for buttons, links and wall background.

Our new design editor offers great possibilities without code. Nevertheless, you can go further by adding even just a few lines of CSS in the 'Edit appearance properties' section!

Little reminder, on each row, column or component, you can add additional CSS via the 'Styles' tab.

There are a lot of resources online to help you understand how CSS works and which properties to use.

Let's take your wall to the next level! 🚀