Layouts App
This documentation is an overview of Zesty’s new Layouts app which covers the installation, usage, and creation of custom components.
You may also access it from the UI by clicking the +Marketplace tab.
- Start the installation by selecting an Instance (in Search bar dropdown) that you will be working on with the Layouts app.\
- Click “Install Layouts in [Instance Name]” and wait for it to be installed in your selected Instance.\
- Once installed, the Layouts app will be shown at the left navigation pane of your Instance. See below image for reference.
The Layouts interface is mainly of file toolbars, canvas/layout preview, content selector, layout design tools, and components tool.
- File - hotkeys
- Change Model - Ctrl+M / Command+M
- Save - Ctrl+S / Command+S
- Publish - Ctrl+P / Command+P
- Edit - hotkeys
- Undo - Ctrl+Z / Command+Z
- Redo - Ctrl+Y / Command+Y
- View - hotkeys
- Visual Layout - Ctrl+1 / Command+1
- ZHTML Output - Ctrl+2 / Command+2
- JSON Output - Ctrl+3 / Command+3
- Layout Preview - Ctrl+4 / Command+4
- Page Preview - Ctrl+5 / Command+5
- Toggle Sidebar - Ctrl+B / Command+B
- Help
- Hotkeys
- How it works
- About
- Components
- Add Component (component / design type)
- Edit / Delete a component
- Manage Model
To manage a model you'll get redirected to the schema route of your instance in order to manager your model.
- Content Model Selector
Helpful for quick search and selection of your model. - Layout Design Tools
These helps to group your content or put additional design. - Component Design Tools
Lists of your created components - Layout Canvas
- 1.Default view - user may collapse each sidebar for a wider canvas.
- 2.Collapsed view - canvas when each sidebar is collapsed.
Tip:
Ctrl+B to toggle the view.Using the Layouts app, you can easily create/design web pages with the pre-built Layout Design Tools\
- Start by selecting a Content Model in the dropdown selection (eg. Articles) to work with Layouts.
- Select a layout design available in the Layout Design Tools which you can drag and drop into your canvas/page view.
- You can use all the items in sidebar to drag in your canvas to layout your page
- You can create your custom component, drag design tools.
- There are available shortcuts to make your creation of layout seamless.
Last modified 2mo ago