Zingy Docs
Visit our websiteTry a DemoPricingContact
  • Introduction
  • 🎛️Dashboard
    • Overview
    • Apps
    • Account Profile
    • Billing - View Invoices
    • Billing - Payment Methods
    • Billing - Subscription
  • 💻App Editor
    • App Components
    • App Editor Tour
    • App Settings
    • App Users
    • App User Groups
    • Publishing your App
    • Pages and Forms
      • Create a Page
      • Create a Structured Page
      • What is a Structured Page ?
      • Create a Form
      • Page Editor
      • Working with Forms
    • Page Editor
      • Page Editor Tour
      • Adding Page Content
      • Adding Content to Structured Pages
      • Working with Page Elements
      • Page Element Settings
      • Responsive Design
      • Padding and Margin
      • Editing Text
      • Using AI Wiz in the Page Editor
      • Built-in elements
        • Link
        • Image
        • Spacer
        • Flexible Area
        • Layout Container
        • Layout Row
        • Layout Column
        • 1 Column
        • 2 Columns
        • 3 Columns
        • Add Column
        • Table
        • Table Row
        • Table Column Cell
        • Table Heading Cell
        • Table (3 cols)
        • Table (4 cols)
        • Input
        • Checkbox
        • Toggle Switch
        • Dropdown
        • Multi-line
        • Label
        • Button
        • Button Group
        • Input Group
        • Button Toolbar
        • Menubar Holder
        • Menubar Collapsible
        • Menubar
        • Menubar Item
        • Menubar Item Link
        • Menubar Style1
        • Menubar Style2
        • Menu Item
        • Popup Menu
        • Popup Menu Item
        • Menubar Popup Menu
        • Popup Menu Style1
        • Popup Menu Style2
        • Popup Menu Separator
        • Card
        • Card Group
        • Card Style1
        • Card Style2
        • Card Style3
        • Alert
        • Badged Text
        • Collapsible Area
        • Data Table
        • Stripe Payment
        • Form
        • Menubar Login Info
        • Data Design
      • Working with Forms
      • Using Forms
      • Page Preview
    • Page Settings
    • Page Flow
      • Block Anatomy
      • Toolbox Blocks
        • Set Content
        • Get Content
        • Badged Text
        • Alert Text
        • Status Animation
        • Set Style
        • Set CSS
        • Set Input Value
        • Get Input Value
        • Set Toggle Switch State
        • Get Toggle Switch State
        • Set Input Feedback
        • Enable/Disable Element
        • Set Element Attribute
        • Get Element Attribute
        • Get Element by Name
        • Element
        • URL Parameter Value
        • Navigate Page
        • Timer
        • Timer Repeat
        • Show Popup Form
        • Show Information Popup
        • Show Confirmation Popup
        • Popup Form Data
        • Collapsible Area Action
        • Mouse/Keyboard Action
        • Event Action
        • Action/Event Info
        • Show Menu
        • Menu Text
        • Menu Index
        • Write Log Message
        • Log Category
        • Data Table Action Menu Customize
        • Data Table Attach Form
        • Data Table Add Action
        • Data Table Load Next Page
        • Data Table Load Prev Page
        • Data Table Refresh
        • Data Table Custom Query
        • Data Table : Table Name
        • Data Table : Data
        • Content from Data Design
        • Set Content in Data Design
        • Get Content in Data Design
        • Get Element Attribute in Data Design
        • Set Element Attribute in Data Design
        • Set Style in Data Design
        • Set CSS in Data Design
        • Set Input Value in Data Design
        • Get Input Value in Data Design
        • Get Toggle Switch State in Data Design
        • Set Toggle Switch State in Data Design
        • Set Input Feedback in Data Design
        • Enable/Disable Element in Data Design
        • Initialize Toggle Switch in Data Design
        • Event Action in Data Design
        • Collapsible Area Action in Data Design
        • Data Record Count
        • Data Record at Index
        • Data Record Loop
        • Data Record Info
        • Data Record Loop Index
        • Data Record ID
        • Data Table Name
        • Data Query Name
        • Data Read
        • Data Read Next
        • Data Read Previous
        • Data Lookup
        • Data Lookup with ID
        • Data Status
        • Data Add Record
        • Data Update Record with ID
        • Data Delete Record with ID
        • Data Input Popup
        • Lock/Unlock Form
        • Save Form with Data
        • Reset Form
        • Set Form Event Status
        • Set Form Event Status Message
        • Form Submit Complete
        • Set Field Input Value
        • Get Field Input Value
        • Form Data
        • Form in Edit Mode
        • Form Events
        • Execute Connection Command
        • Execute API Call
        • Connection Data
        • Connection Error
        • API Call Connection
        • Connection
        • Connection Command
        • Cloud Flow Invoke Hook
        • Cloud Flow : URL of Web Hook
        • HTTP Post
        • HTTP Get
        • HTTP Data
        • HTTP Error
        • Date
        • Custom Code
        • Date from Text
        • Get Object Property
      • Coding in Page Flow
      • Zingy API For Page Flow
      • References
        • Value Types
        • Popup Customization
        • Prerequisite for Dynamic Content block examples
        • Prerequisite for Data examples
    • Dynamic Content
    • Data
      • Database Tables
      • Database Queries
      • Data Tool
    • Cloud Flow
      • Cloud Flow Editor
      • Block Anatomy
      • Toolbox Blocks
        • Data Update Records
        • Data Delete Records
      • Coding in Cloud Flow
      • SDK/Library Integration
    • Media
    • Connections
      • Services
        • Stripe
        • Sendgrid
        • Twilio
        • API Call
        • API Key
Powered by GitBook
On this page
  • 1) Adding content from the Page Element Library
  • 2) Importing HTML code
  • 3) Using AI Wiz
  • See also
  1. App Editor
  2. Page Editor

Adding Page Content

PreviousPage Editor TourNextAdding Content to Structured Pages

Last updated 1 year ago

The information in this section refers to definitions and concepts introduced in the 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.

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.

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.


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.

See also

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

Zingy supports Bootstrap based CSS classes. For more information see:

3) Using AI Wiz

For more information please see: .

💻
🪄
Built-in elements in Page Element Library
https://getbootstrap.com/docs/4.6/getting-started/introduction/
Using AI Wiz in the Page Editor
Working with Page Elements
Editing Text
Page Editor Tour
Video: Add content using drag and drop from library
Video: Click to add content
Video: Import HTML into main body
Video: Import HTML inside another element.
v
Page Editor - Page Content area