Layouts App

The Layouts App allows you to drag and drop components and work with Zesty content in a codeless environment.

Installing the Layouts App

Zesty’s Layouts app is available for download in Zesty’s Marketplace > Apps > Layouts

You can also access it from the Manager UI under the Apps tab.
By clicking the Browse Apps you will be redirected to the Marketplace which displays the available apps you can download.

From the Marketplace, select Layouts


Start the installation by selecting an Instance to which the Layouts app will be installed to.


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 under Apps.


Layouts UI Overview

The Layouts interface is consist 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
    • Global Settings - Ctrl+, / Command+,
  • 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
    • Page Preview - Ctrl+5 / Command+5
    • Toggle Sidebar - Ctrl+B / Command+B
  • Components

    • Add Tools (component / design / columns 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

  • Content Field
    Search for content field references to drag and drap into the visual layout canvas

Tip: Ctrl+B to toggle the view.

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. Homepage, Blog)


  • 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 add/create your own custom component, design, and columns in the Add Tools menu.


  • There are available shortcuts to make your creation of layout seamless.

Start Here

We will listen to your needs and walk you through how Zesty can help your team.

Connect with Content Experts

Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

Start by Entering your Email

By submitting your email you agree to our terms and conditions


zesty customer logo zesty customer logo zesty customer logo