Layouts App

This documentation is an overview of Zesty’s new Layouts app which covers the installation, usage, and creation of custom components.

Installing the Layouts App

Zesty’s Layouts app is available for download in Zesty’s Marketplace > Apps > Layouts
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.
Note: Make sure that you are the Owner of the Instance or has “Admin” permission to be able to install the Layouts app to the specific Instance.
  • 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.

Layouts UI Overview

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
    • Manage Model
  • Content Model Selector
  • Layout Design Tools
  • Component Design Tools
  • Layout Canvas
  1. 1.
    Default view - user may collapse each sidebar for a wider canvas.
  1. 1.
    Collapsed view - canvas when each sidebar is collapsed.

Building Pages using Layouts

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.