Once you have a row and a Joomla position prepared, you can insert the first functional block into it. The editor checks the drag-and-drop action to prevent the module from ending up in an invalid or hidden area.
What you will learn
- Prepare a valid target for drag-and-drop.
- Insert a module from the catalog into a Joomla position.
- Understand why certain areas will not accept a module.
- Verify a new instance and its auto-save.
A position must exist first
A module cannot be placed anywhere on the page. The target is always an active and visible Joomla position within an allowed row. A position is a container that determines placement and width; the module then provides the function and content.
If you do not see the target, return to Grid mode. Check that the row is enabled, that the position exists, and that it is not hidden for the current screen size. The main componentbox is reserved for component content, and modules cannot be inserted into it.
Step-by-step drag-and-drop
- Open Modules mode on the left and search for the desired type.
- Click and hold the module item and begin dragging it over the canvas.
- Watch for highlighted allowed positions. An unhighlighted area is not a valid target.
- Release the module over the desired position. The editor will create a separate instance with its own identifier.
- Select the new instance by clicking on it, and open its right inspector using its small settings icon. Set the title, layout, and other supported options.
- Wait for auto-save to complete and inspect the result in tablet and mobile view as well.
What a new instance means
Each insertion creates its own copy of settings. Thus, two menus or two slideshows can have different titles, layouts, and content. The internal identifier helps the editor, export, and synchronization recognize which specific instance is which, even if they have similar names.
Inserting a module into the design does not automatically create a live Joomla module on the current website. The editor primarily works with the template configuration. Missing live records can later be created via an explicit synchronization action or an installation package.
After inserting, name the instance so you can recognize it from similar blocks later. Two items titled "Menu" may be technically separate, but they are easy to confuse in Layers. Also check page assignment—whether set to all pages or homepage only. Just seeing the module in the home sample preview does not indicate where it will be published after installation. The preview uses saved configuration and representative content, not real menu items or a live user session.
If you drop a module outside a highlighted target, do not immediately attempt another drag. First verify whether the instance was actually created in an adjacent position. The canvas and Layers represent the same design, making the tree view the most reliable check.
Only after that repeat the action if necessary.
When drag-and-drop fails
The most common cause is a disabled or hidden position, a componentbox, or reaching a limit. The server allows a maximum of 10 modules per position and 200 modules across the entire configuration.