Learn the Zesty.io Coding Process

The Zesty.io process to build a website is Config - Content - Code.

A Brief Overview

A brief overview of our process has us beginning at the Config tab where we add Pages, Page Groups, and/or Data Sets; and then we move on to the Content tab where we add content to our Pages, Page Groups, and/or Data Sets; and lastly we move on to the Editor tab where we Code our HTML view, add styles to our Style Sheets, and add JavaScript as necessary.

The Process


First we start at the Config tab and add our Pages, Page Groups, and Data Sets. Learn more about content schemas here. A list of all the config Field Types can be referenced here.

config process for creating pages, pagesets, datasets, and their respective fields


Next we move to the Content tab and add our content.

content process for adding content to the fields you just created


Next we move to the Editor tab to code.

Note that the Loader is the file that loads your views. It is the first file that is loaded in each view, and it loads the view via the Parsley call: {{ current-view }}. For any view to load this Parsley call needs to be in the Loader file.

adding content to the loader file

In order to get the contents of the fields into our view, we need to add Parsley calls to our view file. In order to have nicely formatted text show up in the view as well and an image instead of the image's CDN address, we'll add some HTML tags around our Parsley call. Please note that since the WYSIWYG comes with its own <p> tags, we do not add <p> tags around our Parsley call for the WYSIWYG.

coding with HTML and Parsley to create your view

If we do not add any HTML tags, our page will look like this:

view without HTML tags

Lastly, here is a before-and-after of our view. Before coding in the view, the page is completely blank. After coding in the view we can see the contents of our fields.

the view before and after adding code to the editor