Inline editing means you change the text directly where you see it on the canvas. You don't have to start with source HTML.
What you will learn
- Activate text editing on the canvas.
- Apply basic formatting.
- Distinguish content editing from the appearance of the entire module.
- Safely complete changes and verify saving.
Editing text right where it sits
For supported Custom HTML content and slideshow text, you can click directly on a text element and begin editing it right within the preview. Custom HTML can offer an expanded toolbar featuring block type, color, alignment, lists, and indentation.
For Slideshow text, only limited inline formatting is saved—such as bold or italic text and links; do not use block type, color, alignment, lists, or indentation here.
Inline editing is ideal for headings, short descriptions, or button text. Modify the overall module background, shadow, and spacing in the appearance inspector. System snippet content is handled by a limited visual mode described in the following article.
Step-by-step procedure
- Select a supported Custom HTML module or slideshow and activate content editing.
- Click directly on the heading or paragraph. Select only the text you want to change.
- Rewrite the placeholder words. Keep headings short and phrase button copy as a clear action.
- Use only necessary formatting from the available toolbar. Excessive colors and styles degrade readability.
- Click outside the edited text or exit the mode. The editor cleans the content and applies it to the configuration.
- Verify the auto-save status, then check the mobile preview where long headings might wrap.
Why some formatting might change
Content is sanitized during editing and saving. Disallowed tags, event attributes, and unsafe URLs are not preserved. If you need precise control, use the Edit code dialog and stick to standard HTML and CSS.
Write content first, design second
The length of actual copy affects the layout. Replace sample text before fine-tuning height, spacing, and font size.
Writing text for real visitors
A heading should quickly explain what the section offers. Break paragraphs into short sentences and label buttons with specific actions—for instance, "Browse services" instead of vague "More". Don't convey meaning through color alone; visitors must also recognize importance through copy and structure.
After editing, navigate the block using your keyboard on the target website to test actual links. In editor preview mode, links are inactive or restricted for security reasons. For text next to a photo, make sure it makes sense even if the image fails to load. This is especially important because design images are replaced with placeholders during export.
For multilingual websites, test longer language variations as well. The editor shows a preview design, but does not create or translate actual Joomla articles. You will manage those separately on the target website.