Page Designer
Last updated
Was this helpful?
Last updated
Was this helpful?
The AI-powered MechCloud Page Designer introduces a seamless way to craft web pages using plain English instructions. This innovative feature allows users to add native HTML tags and custom components (MechCloud UI components, demo components and third party components) effortlessly.
To launch the page designer, go to the Site Builder -> Site Nodes UI and click on Launch Designer in the context menu for a site node. You can also launch the page designer by simply appending mcPageMode=design query string to a page url.
You can activate AI tool on the page designer by clicking on the icon.
Use the edit mode toggle button to switch between edit and read-only modes on the page designer. In the edit mode, visible properties of an element (e.g. button label) can be edited from the page designer canvas (middle column) itself while read-only mode can be used to test things (e.g. click event on a button), which will not work in the edit mode, without rendering the complete page in the read-only mode.
Page designer has been designed in such a away that in the read-only mode everything on a frame and the page rendered inside it will behave in the same way as rendering the full page in the normal / non design mode. This way you can test things like page navigation, click events and most of the things using read-only mode on the page designer itself instead of rendering the page in normal / non design mode for same purpose.
Once you have edited a page and you want to edit a different page, make sure you click on save button before navigating to a different page.
When you add a component using a prompt, it will be automatically selected as the parent for the next component which will be created through the prompt. Make sure you unselect currently selected component in the components hierarchy section (first column on the page designer) to add a component under the page directly. In order to add a new component under a target component, select the target component in the components hierarchy section before executing a prompt.
Order of siblings tags / components can be adjusted using drag and drop in the outline view of the page designer (first column).
Use context menu on a tag / component in the outline view to duplicate / delete a tag / component.
If you want to add multiple tags / components of same type, then use duplicate functionality to clone as existing tag/component of same type instead of using a prompt every time to add a new component of same type. This will help you to create a page faster and at the same time will help reduce AI API provider bill.
