The whole menu
Everything below is something you could also do with the palette, the canvas, or the Modify drawer. If it is not on this page, Ask AI cannot do it. The walkthrough of how to open the panel lives on Ask AI.
Keep Maya's homepage hero in mind. You already added a heading above the first row. The phrases below are the rest of that job — put a button to the right of the image, move the heading, give the second row a gap.
Ask AI is targeted on purpose. “Make me a banner” and “improve this page” are not on this menu. See what Ask AI will not do if a request feels adjacent and you are not sure.
Adding components
Ask AI can drop any component that is on your palette — the ten RuleCMS ships (Text, Image, Video, Icon, Button, Divider, Embed, List, Accordion, Custom Component), and any component from a component library your team has enabled. A new drop gets the same starter styles a manual drop would: your project's defaults for that component, that row, and that column.
You choose where it goes:
| You say | What happens |
|---|---|
| Add a text component above the first row | A new row is created above that row, with the component in it. |
| Add an image below the heading | A new row is created below that row. |
| Put a button to the left / right of that image | The component is added as a new column in the same row. |
| Add a divider at the end of the second row | The component is appended as the last column of that row. |
| Add a text component at the end | A new row is appended after everything currently on the widget. |
There is no “add an empty row” request. A row exists because a component was dropped above, below, or at the end — the same as dragging from the palette.
The components RuleCMS ships, and the settings Ask AI can change on each one:
Team-library components work the same way: Ask AI can add them and change the settings those components expose. Those settings are documented by whoever maintains the library, not on this site.
Moving, copying, and duplicating
| You say | What happens |
|---|---|
| Move the heading above the image | The column is taken from where it is and placed at the new position — above, below, left of, right of, or at the end of a row. |
| Copy that card to the bottom | A second column is created at the new position. The original stays where it is. |
| Duplicate this column | A copy is placed beside the original, in the same row. |
| Duplicate this row | A copy of the whole row — every column in it — is placed immediately below. |
Removing
| You say | What happens |
|---|---|
| Delete that column / that image / the button | The column is removed. If it was the only column in its row, the empty row is removed too. |
| Delete this row | The row and everything in it are removed. |
Delete is applied immediately, like every other Ask AI change. Undo brings the row or column back. There is no confirm step, and there is no “empty the whole widget” request — Ask AI will not reset the canvas.
Changing how things look
Any setting you can change in the Modify drawer, Ask AI can change — on the component, on the column around it, on the row, or on the widget as a whole. You can ask for one value everywhere, or different values for phone, tablet, and desktop. You can also point a setting at a CSS variable instead of a typed number or colour, the same way the drawer's Value / CSS variable toggle does.
The lists below are complete. If a setting is not here, Ask AI cannot set it.
On the selected component
These are the settings that belong to the component itself — the words, the picture, the button label. Each component offers a different set; they are listed under Adding components and documented with the component.
Typical requests:
- “Change the heading to Welcome back” — Content Text on Text.
- “Make that text a heading 2” — Enclosing Tag on Text.
- “Set the button label to Get started and link it to /signup”.
- “Use the hero image we already uploaded” — Media Selector, for a file that is already in your media library. Ask AI cannot upload a new file.
On the selected column — the box around the component
Spacing, size, colour, borders, typography, visibility. Every column offers the same list. This is the drawer section labelled Selected Column.
| Setting | What it does |
|---|---|
| Margin | The empty space pushed outward from the edges of the column, separating it from its neighbours. |
| Padding | The cushioning inside the column, between its edges and the content sitting in it. |
| Width | How wide the column should be across the page. |
| Height | How tall the column should be. |
| Min Width | A floor for the column's width — it will never shrink narrower than this. |
| Max Width | A ceiling for the column's width — it will never grow wider than this. |
| Min Height | A floor for the column's height — it can grow taller, but never shorter. |
| Max Height | A ceiling for the column's height — it will never grow taller than this. |
| Overflow | What happens to content that is too big for the column: show it, hide it, or make it scroll. |
| Overflow X | What happens to content that is too wide for the column. |
| Overflow Y | What happens to content that is too tall for the column. |
| Pointer Events | Whether clicks and taps land on this column or pass through it to whatever sits behind. |
| Border | A visible line drawn around the edge of the column. |
| Border Radius | How rounded the corners of the column are. |
| Box Shadow | A soft shadow behind the column that makes it look raised off the page. |
| Horizontal Alignment | Where the column's children sit across its width when the column is a flex container. |
| Vertical Alignment | Where the column's children sit from top to bottom when they are not all the same height. |
| Flex Wrap Setting | Whether children that no longer fit wrap onto a new line, or stay on one line and squeeze. |
| Align Content | How multiple wrapped lines of children pack from top to bottom inside the column. |
| Flex Direction | The main axis children follow inside the column: row, column, or reversed. |
| Gap | The space between the items inside the column, when the column arranges them in a row or grid. |
| Background Color | The colour that fills the column behind its content. |
| Background Image | A picture painted behind the column content, with control over how it is scaled, placed, and tiled. |
| Text Color | The colour of the text in the column, which everything inside it inherits. |
| Typography | The group of nine text settings on the column: family, size, weight, style, line height, letter spacing, alignment, decoration, and transform. |
| Font Family | Which typeface the text in the column is set in. |
| Font Size | How large the text in the column is. |
| Font Weight | How bold or light the text in the column is. |
| Font Style | Whether the text in the column is upright or italic. |
| Line Height | How much vertical space each line of text occupies, which sets the gap between lines. |
| Letter Spacing | How much space sits between individual characters. |
| Text Align | Whether the text in the column lines up on the left, the right, the centre, or both edges. |
| Text Decoration | Lines drawn through the text: underline, strikethrough, or overline. |
| Text Transform | Force the text into capitals, lower case, or title case without retyping it. |
| Opacity | How see-through the whole column is, from fully solid to invisible. |
| CSS Classes | Attach your own CSS class names to the column so your site's stylesheet can style it. |
| Hide Column | Remove the column from the page entirely, either everywhere or only on chosen device sizes. |
Typical requests:
- “Give the image 32px padding on desktop and 16px on phones”.
- “Make the heading colour #1a4f8a”.
- “Hide that banner on phones” — Hide Column.
- “Set the column width to 50%”.
On the entire row
How the columns in a horizontal band sit together — alignment, wrapping, gap — plus the same family of box styles the column has. This is the drawer section labelled Entire Row.
| Setting | What it does |
|---|---|
| Row Margin | Space around the outside of the row band. |
| Row Padding | Space inside the row, between the row edges and its columns. |
| Row Width | How wide the row band is. |
| Row Height | How tall the row band is. |
| Row Min Width | The smallest width the row is allowed to shrink to. |
| Row Max Width | The largest width the row is allowed to grow to. |
| Row Min Height | The smallest height the row is allowed to shrink to. |
| Row Max Height | The largest height the row is allowed to grow to. |
| Row Overflow | What happens when row content does not fit the row box. |
| Row Overflow X | Horizontal overflow behaviour for the row. |
| Row Overflow Y | Vertical overflow behaviour for the row. |
| Row Pointer Events | Whether clicks and taps land on this row or pass through it to whatever sits behind. |
| Row Border | Border around the row band. |
| Row Border Radius | How rounded the row corners are. |
| Row Box Shadow | Drop shadow behind the row band. |
| Horizontal Alignment | Where the columns sit across the row, and how any leftover space between them is shared out. |
| Vertical Alignment | Where the columns sit from top to bottom within the row when they are not all the same height. |
| Flex Wrap Setting | Whether columns that no longer fit drop onto a new line, or stay on one line and squeeze. |
| Align Content | How multiple wrapped lines of columns pack from top to bottom inside the row. |
| Row Flex Direction | The main axis columns follow inside the row: row, column, or reversed. |
| Gap | The space between columns inside the row. |
| Row Background Color | Fill colour behind the row band. |
| Row Background Image | A picture painted behind the whole row band. |
| Row Text Color | Default text colour inherited by content inside the row. |
| Row Typography | Font and text settings inherited by content inside the row. |
| Row Font Family | Font family inherited from the row. |
| Row Font Size | Font size inherited from the row. |
| Row Font Weight | Font weight inherited from the row. |
| Row Font Style | Font style (for example italic) inherited from the row. |
| Row Line Height | Line height inherited from the row. |
| Row Letter Spacing | Letter spacing inherited from the row. |
| Row Text Align | Text alignment inherited from the row. |
| Row Text Decoration | Text decoration inherited from the row. |
| Row Text Transform | Text transform inherited from the row. |
| Row Opacity | Transparency of the entire row band and its contents. |
| Row CSS Classes | Attach your own CSS class names to the row's flex wrapper so your site's stylesheet can style the band. |
| Hide Row | Hide the entire row for one or more device sizes. |
Typical requests:
- “Centre the columns in the second row” — Horizontal Alignment.
- “Put 24 pixels between the columns” — Gap.
- “Give that row a light grey background”.
- “Stop the row wrapping” — Flex Wrap.
On the widget as a whole
The box every row sits inside — the same kinds of settings as Widget Settings in the gear menu. Some of these (size, spacing, overflow) are left off the editing canvas so drag and drop keeps a full surface; open Preview to see them applied, just as with a manual edit.
| Setting | What it does |
|---|---|
| Widget Margin | Space around the outside of the whole widget, between it and the host page. |
| Widget Padding | Space inside the widget edges, before the first row starts. |
| Widget Width | How wide the whole widget is on the host page. |
| Widget Height | How tall the whole widget is. |
| Widget Min Width | The smallest width the widget is allowed to shrink to. |
| Widget Max Width | The largest width the widget is allowed to grow to on the host page. |
| Widget Min Height | The smallest height the widget is allowed to shrink to. |
| Widget Max Height | The largest height the widget is allowed to grow to. |
| Widget Overflow | What happens when widget content does not fit the widget box. |
| Widget Overflow X | Horizontal overflow behaviour for the whole widget. |
| Widget Overflow Y | Vertical overflow behaviour for the whole widget. |
| Widget Pointer Events | Whether clicks and taps land on this widget (or layer) or pass through it to whatever sits behind. |
| Widget Border | Border around the whole widget. |
| Widget Border Radius | How rounded the widget corners are. |
| Widget Box Shadow | Drop shadow behind the whole widget. |
| Widget Gap | The vertical space between the rows of the widget. |
| Widget Background Color | Fill colour behind every row of the widget. |
| Widget Background Image | A picture painted behind every row of the widget. |
| Widget Text Color | Default text colour inherited by content inside the widget. |
| Widget Typography | Font and text settings inherited by content inside the widget: family, size, weight, style, line height, letter spacing, alignment, decoration, and transform. |
| Widget Font Family | Font family inherited from the widget. |
| Widget Font Size | Font size inherited from the widget. |
| Widget Font Weight | Font weight inherited from the widget. |
| Widget Font Style | Font style (for example italic) inherited from the widget. |
| Widget Line Height | Line height inherited from the widget. |
| Widget Letter Spacing | Letter spacing inherited from the widget. |
| Widget Text Align | Text alignment inherited from the widget. |
| Widget Text Decoration | Text decoration inherited from the widget. |
| Widget Text Transform | Text transform inherited from the widget. |
| Widget Opacity | Transparency of the entire widget and its contents. |
| Widget CSS Classes | Attach your own CSS class names to the widget's outermost element so your site's stylesheet can style the embed. |
| Hide Widget | Hide the entire widget for one or more device sizes. |
Reset and Clear
The same pills that sit at the top of each Modify drawer section. They only touch the section they belong to. Read Reset and Clear attributes before you ask for these — Reset is not undo, and Clear is not a softer Reset.
| You say | What happens |
|---|---|
| Reset this column's styles / put the column back to defaults | The column's box (padding, width, colour, …) returns to the look a fresh drop would have. The component's content is left alone. |
| Clear this column's styles / strip the column bare | Every column style is removed. Content stays. The column has no padding, width, or background of its own. |
| Reset this component / put the text back to defaults | The component's own settings return to their declared defaults — placeholder copy comes back, a chosen image is cleared. Column styles stay. |
| Reset this row / clear the row's styles | The row's styles are removed. The columns inside stay. |
| Clear the padding on that image | One setting is removed so it falls back to whatever the browser or a parent would have done. Works for a column setting or a row setting. |
Ask AI cannot Reset or Clear the widget's outer box as a single action. Change those settings one at a time, or use Clear in Widget Settings yourself.
How to get a good result
- Name the thing and the change. “Give the second row 24px of padding” is better than “make it roomier.”
- Point at what is already on the canvas. “The heading”, “the image in the first row”, “the button I just added” all resolve. If two things could match, Ask AI will ask which one.
- Say the device when it matters. “32 on desktop, 16 on phones” writes two values of one setting. Without that, the change applies everywhere.
- One intent per request is plenty. Several operations in one sentence are fine when they are one job — “add a button to the right of the heading and label it Shop”. Mixing unrelated jobs in one sentence is how results drift.
- Use Undo, then the drawer, without ceremony. Ask AI is not a commitment. If a value is almost right, finish it in the Modify drawer the way you always have.
Where to go next
- Ask AI — how to open the panel, what it will not do, and when the button is hidden.
- The Composer — the palette, the canvas, and the Modify drawer, for the same operations done by hand.
- RuleCMS Components — what each component is, and every setting it offers.
- Attribute Reference — every column, row, and widget setting in plain language.
- Setting a different value per device and Choosing a unit — the two ideas that turn up in almost every style request.