What you can do
Dragging is the faster way. You can see the spot on the composer canvas, so you drop the card there and you are done. Reach for the wizard when a click is what happens instead: a trackpad, a crowded canvas where the gap is hard to hit, or the keyboard.
You already have Maya's homepage hero open. Text is in Row 1. Image still needs a home. Two ways to give it one without dragging:
- Put Image in a row of its own. Click the Image card. The wizard asks for a new row, then above or below, then which row. Below Row 1 puts the photo under the heading. Above Row 1 puts it at the top of the canvas.
- Put Image beside the Text. The same click, then “drop into an existing row.” Pick Row 1, then right of its only column. Image lands next to the heading, in the spot a drag to the right of Text would have used.
Drop on canvas does the same insert a drag does. Undo in the top bar takes it back. Nothing is placed until that button, which stays dimmed until a spot is chosen.
When you can already see the spot, close the dialog and drag. The tip at the top of the dialog says the same thing: don't pick the spot step by step if a drag will do.
How the wizard thinks
A press that stays put is a click, and the dialog opens. A press that moves is still a drag: the drop zones appear, and the dialog does not. You do not have to choose a mode. The gesture chooses.
From the keyboard, tab to a card on the Components tab and press Enter or Space. When the dialog closes, focus returns to that card.
Collections use the same wizard. On the Collections tab, a collection you can place shows an arrows icon. Drag that icon to drop it. Click the row and the wizard opens; the row highlights while the pointer is over it. Edit and Remove stay their own buttons, so those clicks do not place the collection. The heading then reads Drop this collection on the canvas, and the tip says to drag the move handle if you would rather not answer the questions. An empty collection cannot be placed. Add at least one row to it first, the same rule as dragging it.
The wizard describes the canvas you are looking at. On an overlay layer, the rows in the dialog are that layer's rows, not the base widget underneath. A badge still belongs on a layer. The wizard will not invent one. It only chooses a row and a column on the canvas in front of you.
Place it with the wizard
Click a card. The dialog is headed Drop this component on the canvas, with Choose a spot to drop it on. under it. The Placing chip shows the name and icon of what you clicked, so you can check it is the Image and not the Button. The information icon beside the heading opens this page in a new tab. The composer stays where you left it.
The canvas is empty
There is nothing to ask. The dialog says this is the first component, and dropping it creates a new row and a new column for it. For a collection it says the same thing about the collection. Drop on canvas is ready immediately. That is the whole path.
- Click Text on the Components tab.
- Read the note. There is no list of rows, because there are no rows.
- Click Drop on canvas. Text is Row 1, Column 1.
Give it a row of its own
Text is already on the canvas. You clicked Image and you want the photo under the heading. This path is three questions, then the button. The dialog counts them as Step 1, then Step 2 of 3, then Step 3 of 3. The “of 3” appears once you choose a new row. The other path, into an existing row, is four.
- Where should it go? Choose Create a new row. The line under it says it gets a row of its own, above or below another row.
- Should the new row go above or below a row? Choose Below a row. The line says the new row goes underneath the row you pick next. Above a row puts it on top of the row you pick next.
- Which row should the new row go below? Every row is listed with what is in it, so Row 1 shows “Text”. With only one row, Row 1 is already selected. It is tagged Bottom of the canvas because it is the last row. On the Above path, Row 1 is tagged Top of the canvas.
- Drop spot reads “In a new row at the bottom of the canvas, below Row 1.” Click Drop on canvas.
The tag only appears on the edge. With three rows, Below Row 3 is Bottom of the canvas, and Above Row 1 is Top of the canvas. Below Row 1 has no tag. It is the gap between Row 1 and Row 2, and Drop spot says “In a new row below Row 1.” Above Row 2 is that same gap, worded as “In a new row above Row 2.” Pick whichever row you are looking at. Both land between them.
A row lists up to three component names, then “+2 more” when there are five. A row with nothing in it says Empty row.
Put it in a row that already exists
Same Image, but beside the Text instead of under it. Four questions. After the first answer the dialog says Step 2 of 4.
- Where should it go? Choose Drop into an existing row. The line under it says this places it beside a component that is already on the canvas.
- Which row should it go into? Choose Row 1. Each row shows its components and a count, such as 1 column or 2 columns. Hovering a row highlights it on the canvas map before you choose it.
- Left or right of a column in Row 1? Choose Right of a column. The line says it goes just after the column you pick next. Left of a column goes just before that column.
- Which column should it go to the right of? Each column shows the component in it. Column 1 is already selected when the row has only one column, and it is tagged End of the row. On the Left path, Column 1 is tagged Start of the row.
- Drop spot reads “In Row 1, to the right of Column 1.” Click Drop on canvas. Image is the second column of Row 1.
The same edge rule as rows. Left of Column 1 is the start of the row. Right of the last column is the end. In a row of Text then Button, right of Column 1 and left of Column 2 are the same gap, between them. Drop spot says either “to the right of Column 1” or “to the left of Column 2.”
When you reach for it
The two paths above cover every spot a drag onto a row or a column can reach. These are the other parts of the dialog, named as you meet them.
| What you see | When you reach for it |
|---|---|
| Canvas map | The small copy of the canvas on the right. Each row is labelled, and each column shows its component. A glowing placeholder marks where the new one will land. Hover a row or a column in the list, or tab to it, and the map shows that spot before you choose. The placeholder is dimmer while you are only hovering. It stays put once you select. |
| Drop spot | The sentence under the options. Before a spot is chosen it says “Not chosen yet. Keep going and the map will show where it lands.” After you choose, it is the position in words. On an empty canvas, before you drop, it says “In a new row of its own, as the first component on the canvas.” |
| Your choices so far | The chips above the options, once you have answered something. A new row under the last row reads New row, Below, Row 1. Beside a column it reads Existing row, Row 1, Right of, Column 1. |
| A choice already selected | On the last question, a single option comes selected, with a check. One row, or one column in the row you picked, so you are not asked to click the only answer. Drop on canvas is already available. With several rows or columns, nothing is selected until you click one. |
| Back | Returns to the previous question and clears the spot you had selected. It appears after the first answer. The first question has no Back. Cancel is how you leave from there. |
| Close without placing | Cancel, the × in the top-right corner, the Esc key, and a click outside the dialog. The canvas is unchanged. Focus returns to the card or the collection row you opened the dialog from. |
| Undo | After Drop on canvas, Undo in the top bar removes it, the same as undoing a drag. Redo puts it back. Reload clears that history. |
What to read next
- The Composer — the rest of the canvas: the palette, Modify, and device toggles. Dragging lives there as the everyday path.
- RuleCMS Components — what Text, Image, and the other cards are, once they are on the canvas.
- Collections — build the block first. Then drop it from the Collections tab, by dragging the move handle or by clicking the row.
- Overlay Layers — a badge on the photo. That is a layer, not a new row. The wizard places into whichever layer you are editing.
How this fits
Click to place does not style anything. After the drop, click the component and the Modify drawer is where the copy, the photo, and the spacing live. Publishing is still a later step on Publishing. The wizard only answers “where does this go?”, and it answers with the same spots a drag already could.