> ## 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). # What are the components of poool's design editor? In this article, we give you the details of all the customization options available in the design editor to create your Engage elements, however you like. For those already familiar with Poool Access, the design editor should hold no secrets for you 🙂 You can nonetheless discover here some specificities unique to Engage. # Getting started... The appearance of an Engage element is built using the different components at your disposal. In Engage, click on "Create an element". In the first block that appears, you can add a component by clicking on ⨁. / ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/screenshot-2026-04-01-at-16310_1d511l7.png =1398xauto) You can then navigate between the "Basic Components" and "Form Fields" tabs. To access a component's options, click on the [✏️] icon of your chosen element. You can then modify the options in the 4 available tabs: * **Settings**: component-specific options * **Style**: management of different style settings (background color, spacing, borders, shadows, rounded corners...) * **Responsiveness**: management of compatibility with screen sizes * **Advanced**: add a condition to show/hide a component. --- # Basic components ## Definition A basic component is a **static element** of your appearance. With the different components at your disposal, you can build your appearance. ## Row 📚 **Description** This component is a block that takes up the entire width of the element. Within it, you can do several things: * add a component * split it into several columns, which can each contain components thanks to the small [+] on the sides [![](https://storage.crisp.chat/users/helpdesk/website/-/d/c/6/c/dc6c641aaa616800/067cb8cb-5c85-4050-8c56-d8bbac_1emb9m1.png)](https://downloads.intercomcdn.com/i/o/1128890636/287b37573be2cb532c156251/image.png?expires=1773333900&signature=384cc8d60fc904005dae08e49a8a7386f1a995d62f483bd11a7a1a985095810e&req=dSElHsF3nYdcX%2FMW1HO4zaHw7N9XOiW9XsrbyiM7pUPENN64SICPia51hzl2%0AeIBu%2BOOLaN0Vz6dCOlU%3D%0A) In this way, you can arrange several components in the same row, side by side or one below the other. **⚙️ Row settings** *Column Direction* Defines how the components are placed: it defines the main axis (in a row or column) and the direction (normal or reversed). 👉 Available values: Row (left to right) / Reversed row (right to left) / Column (top to bottom) / Reversed column (bottom to top) *Horizontal alignment* Specifies how the space should be distributed between and around the components along the main axis of the row. 👉 Available values: * 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 half the space applied between each element *Vertical alignment* Sets the vertical alignment of the components in the row along the main axis. 👉 Available values: Top / Center / Bottom / Stretch *Inter-column spacing* Enables/disables the spaces between the columns and the row edges. 👉 Available values: Enable / Disable **⚙️ Column settings** *Size* Sets the width of a column relative to the entire row "sliced" into 12 columns. 12 columns = 100% of the width 6 columns = 50% of the width [![](https://storage.crisp.chat/users/helpdesk/website/-/3/9/2/0/3920ce9745c98a00/2d1c8834-3559-4d30-a70d-8bfef5_1vq3nca.png)](https://downloads.intercomcdn.com/i/o/387014350/28b8943efbbf3971f9e3d250/Group+10+%281%29.png?expires=1773333900&signature=50711f51a04b00021e88046d3321a05d85235c98a0bdc5a0b1f290fb0ad2f8a1&req=dyggFsh6noRfFb4f3HP0gCZTOopBWIs5yieyYXK0BByM0SFBtKshhooGE1Am%0A8ZlEmCYLUXCDUS24pw%3D%3D%0A) 👉 Available values: * Flexible: fits to the available space * Adapted to content: adapts to its content * x column(s): fixed width of x column(s) ## List 📚 **Description** This component allows you to add a bullet list. [![](https://storage.crisp.chat/users/helpdesk/website/-/6/e/e/5/6ee5cb5d38748400/7cdc47d9-35fd-4d5d-bbea-ddaf7b_zam7ym.png)](https://downloads.intercomcdn.com/i/o/1147847335/4288c1c460439a683f3296d9/Capture+d%E2%80%99e%CC%81cran+2024-08-16+a%CC%80+11_30_40.png?expires=1773333900&signature=e2a1df1c72c86a4fe8e69a0da60a811bb8ce9803931f5a55587d477e399f75bc&req=dSEjEcF6moJcXPMW1HO4zVqujkinoQwHmNr8hjx4UUA08jPIcWIpJOANRnpj%0AbtcEfPWU4pAAxFikCYk%3D%0A) ⚙️ **Settings** *List settings* Allows you to enter the list items. To add an item, click on [Add element]. 👉 Available value: a text of your choice ## Title 📚 **Description** This component allows you to add a title and choose its type (Title 1, 2 etc.) You can also style it (bold, colors, size etc.) [![](https://storage.crisp.chat/users/helpdesk/website/-/b/d/8/9/bd89b9e8bf43e800/ae7a9f70-37cf-4c71-b358-789f70_1k397wn.png)](https://downloads.intercomcdn.com/i/o/1147847827/37b8260e701c58ffc78bc5a9/Capture+d%E2%80%99e%CC%81cran+2024-08-16+a%CC%80+11_31_19.png?expires=1773333900&signature=60584749ca4a4caef5c8efa35c06e4638446fb6f1ae552c510cb760d26e0164b&req=dSEjEcF6moldXvMW1HO4zZWCtBaPcAfgU7HTmlOvXn75UCFE9XdXIkamuBVI%0Ay6Xwa7dxFI6hl9quLMk%3D%0A) ⚙️ **Settings** *Type* Allows you to select the type of title from largest - Title 1 (h1) - to smallest - Title 6 (h6). 👉 Available values: Title 1 (h1) / Title 2 (h2) / Title 3 (h3) / Title 4 (h4) / Title 5 (h5) / Title 6 (h6) *Content* This space allows you to type your text and style it with different classic options. 👉 Available options: * Bold / Italic / Underlined * Color * Size * Left / centered / right / justified alignment * Add a link ## Text 📚 **Description** This component allows you to add a text. You can also style the text (bold, colors, size etc.) [![](https://storage.crisp.chat/users/helpdesk/website/-/8/4/d/9/84d996d4bd246800/bb359469-ffd0-4e78-b3a3-f98454_1sfdtlq.png)](https://downloads.intercomcdn.com/i/o/1147848491/bbc19f31eec0cbd10bf572be/Capture+d%E2%80%99e%CC%81cran+2024-08-16+a%CC%80+11_31_51.png?expires=1773333900&signature=2af324ab43b7f2b28c0f15c7ce0e768e69e10d91cd66a203b0cfc480844127ca&req=dSEjEcF6lYVWWPMW1HO4zaZ2rE4ARYibbwPk7JNOzuo%2Bh95dChQFO9OvLIhk%0AuKEoqK3CjfU6ktZPmR4%3D%0A) ⚙️ **Settings** *Content* This space allows you to type your text and style it with different classic options. 👉 Available options: * Bold / Italic / Underlined * Color * Size * Left / centered / right / justified alignment * Add a link ## Button 📚 **Description** This component allows you to add a button and style the text within it. The button allows you to trigger an action: * open a link * or trigger a JavaScript event For a URL, simply enter it in the dedicated field. For a JavaScript event, simply indicate the event name `customButtonClick`, with a listener previously integrated into the page's code. This opens up a world of possibilities! [![](https://storage.crisp.chat/users/helpdesk/website/-/4/a/8/d/4a8d8b85f14c4000/c753da5f-a9ca-4d1f-9b38-959df8_1231u7a.png)](https://downloads.intercomcdn.com/i/o/1147850519/9de4e515ec35a73cf526a54a/Capture+d%E2%80%99e%CC%81cran+2024-08-16+a%CC%80+11_33_17.png?expires=1773333900&signature=527830605b1b7fc09a2143d6ec16c20cb23b31a476fe6b7e68dde606b7b33e40&req=dSEjEcF7nYReUPMW1HO4zYTlRb9Z2eqSw07jedopeUNiCLdBEAylWbVSlgpE%0AQFDdxSU25eZ3P0nf%2B1g%3D%0A) ⚙️ **Settings** *Content* This space allows you to insert the text that will be displayed on your button and style it with various classic options. 👉 Available options: * Bold / Italic / Underlined * Color * Size * Left / centered / right / justified alignment * Add a link *Action* Allows you to select the action performed by clicking on the button. 👉 Available values: Open a link / Trigger an event *Link URL (for the "open a link" action)* Allows you to enter the URL to which readers will be redirected after clicking the button. 👉 Available value: a URL of your choice *JavaScript event name (for the "trigger an event" action)* Allows you to trigger the `customButtonClick` JavaScript event upon clicking the button. 👉 Available value: `customButtonClick` *HTML element type* Allows you to select your button's HTML element type. Visually, your button will remain a button but in the HTML code of your page, it may be a button (HTML tag