> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to use rows to structure your wall ? 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](https://help.poool.fr/en/article/what-are-the-components-of-poools-design-editor-ur3pe/)? # 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. [![](https://storage.crisp.chat/users/helpdesk/website/-/4/8/a/e/48aebeb9ab065000/c5cadf57-d562-443c-80c0-1563d1_27b6w5.png)](https://downloads.intercomcdn.com/i/o/817045350/17753d3f89b1337207b1042c/Capture+d%E2%80%99e%CC%81cran+2023-08-28+a%CC%80+14.09.16.png?expires=1773414000&signature=cb2a8ce5963b47348bd0e819ea377abc120bbe89c16593a678cec6d2e68b9661&req=fCEgFs17noRfFb4f3HP0gIh5zhnex6fmZr6cPjum3SczHnXhH9oS3qpZmFcr%0A79JWVH0MjXlArPqqFA%3D%3D%0A) If you divide the row into 3 columns (using the [+] on the sides), you can insert components one above the other. [![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/c/0/33c0f865401f0a00/29a55975-2bf1-4bc8-ac4a-9accf3_1p3ra5y.png)](https://downloads.intercomcdn.com/i/o/817090549/f76c39a5e8920d150f41191e/Capture+d%E2%80%99e%CC%81cran+2023-08-28+a%CC%80+15.14.50.png?expires=1773414000&signature=f681b4b292aa97c134c218c4a6cd91c1c6549853111e05617763d09f057c19f0&req=fCEgFsB%2BmIVWFb4f3HP0gJ%2FOKgDuf1RL%2BiJml%2F1KojD4LVbMiATzYEZ7GZit%0AldYFBvd6%2BNhypbBrOw%3D%3D%0A) ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/1-row-3-columns_1i7i0w0.png) # 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* ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/colums-flex-and-8_195l7yj.png) *Reader view* [![](https://storage.crisp.chat/users/helpdesk/website/-/c/8/1/c/c81c478f9cb2d800/f278d38c-d306-4b39-9163-e5f4f5_n0z387.png)](https://downloads.intercomcdn.com/i/o/s22rivig/2134144188/ce61554eee403a42d8fb9a71e35b/image.png?expires=1773414000&signature=49188d23afc5a1ae54c119374bc0e4d4f3cdc256be0d970ba44ce820777ae4fd&req=diEkEsh6mYBXUfMW1HO4zdoVslUMQxd0XSLNK6LQuzfjR1BgZSiLli3%2BH30T%0AHZ8SL%2B7JkO3Oj6RtgFc%3D%0A) # 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/responsive_s3tvvf.png) # 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/before-after-unlock_1exhwls.png) # Check our video tutorial : ${frame}[Advanced appearances](https://www.youtube.com/embed/rhNfUnAMvEg?si=-3lmgaIrHhchaqQ7) If you have any questions, don't hesitate to contact us via the chat ! [__Login to the Dashboard__](https://dashboard.poool.fr/en)