Adding Page Content

The information in this section refers to definitions and concepts introduced in the Page Editor Tour section.

You can use the information in this section for adding content to both Pages and Forms.

The page's content is displayed in the Page Content area of the Page Editor.

The following sections describe the various ways you can add content to a page.

1) Adding content from the Page Element Library

Content from the page element library can be added in following ways:

a) Drag and drop element from the library

Select the element from the sidebar and drag it into the page content area.

In the example below, we add the 2 column layout element into the page and then add an image and a heading into the two columns.

Depending on the element, you can drag it into another element or to any part of the page.

e.g. Layout columns can only be added to Layout rows. For details on various other built-in elements, please see Built-in elements in Page Element Library .

b) Select element on your page and click to add

You can also add content to the page by pre-selecting an element in the page content area and then clicking on the desired element in the library.

In the example below we select the column on the right and then click on the 'Image' element to add it.

2) Importing HTML code

The Page Editor allows importing HTML code into the main body or into an existing element on the page. Please note that only certain elements allow importing HTML code inside them.

The example below shows how to import html code into the main body of your page. If your page already has existing content, the new content will be appended to the end of the page.

The example below imports an image via HTML code into a layout column. If the selected element already has content, the new content will be appended to the end.

When you enter your HTML code, do not include javascript code via the script tag, CSS files via the link tag or style definitions via the style tag.

Disallowed tags will be removed from the HTML code.

Disallowed tags include unsafe ones like scriptorlink, and tags that form the page skeleton like html, head, body or ones that usually appear within the head tag like title, meta, style, etc.

Zingy supports Bootstrap based CSS classes. For more information see: https://getbootstrap.com/docs/4.6/getting-started/introduction/

You can add custom scripts, css files and define custom styles for your page via the Page Settings screen. If you want these to be applied to all pages of your app, you can do this via the App Settings screen.

3) Using 🪄AI Wiz

If you are looking for some ideas and inspiration, AI Wiz can help you generate layouts and content by simply typing what you want in plain English.

For more information please see: Using AI Wiz in the Page Editor.

Zingy Docs