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
  • Element Toolbar
  • Page Tree View
  1. App Editor
  2. Page Editor

Working with Page Elements

PreviousAdding Content to Structured PagesNextPage Element Settings

Last updated 1 year ago

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

Element Toolbar

In the page content area, the currently selected element is shown with a border along with the Element Toolbar:

The available buttons in the element toolbar are described below:

The Select Parent button in the element toolbar allows you to select the parent of the current element. i.e. the selection now moves to the parent element.

In the example below, the currently selected element is a Layout Column (named Column26). The selection is then moved to its parent (a Layout Row named Row8).

The Move Element button in the element toolbar allows you to drag and drop the element to another part of the page. Please note that logical rules apply: e.g. a Layout Column can only be moved into a Layout Row.

In the example below, the currently selected element (an image), is moved from the left column to the right column.

The Clone button in the element toolbar creates an identical copy of the selected element (including contained elements) and adds it immediately after the selected element. This can also be achieved by using standard clipboard copy/paste commands.

In the example below, the Layout Column on the left (named Column17) containing the text "Some text in Column1" is cloned and added immediately after the selected column. The existing column on the right now becomes the third column of the parent Layout Row.

The page editor automatically assigns a new ID to cloned elements.

The Delete button in the element toolbar deletes the selected element (including contained elements).

In the example below, the Layout Column (named Column30) is deleted. The parent Layout Row now contains two columns.

Clicking on the option will bring up a menu with alignment choices.

The action taken by the Options button in the element toolbar depends on the selected element. In most cases it will open the settings screen for the selected element.

In some cases, a menu is presented with options specific to the element along with the option to open the settings screen.


Page Tree View

The page tree view is located in the page element sidebar.

It makes it easier to understand the general anatomy/organization of the page. It also makes it easy to select elements occupying a very small area on the screen.

Element Selection

Selecting an element in the page content area will highlight the element in the page tree view and vice-versa.

To view an element in the page tree view, select it in the page content area. The page tree view will automatically expand the hierarchy of elements leading to the selected node.

The example video shows various elements being selected in the page content area with the corresponding element being highlighted in the page tree view.

You can also click on an element in the page tree view and select it in the page content area. See the example video below.

Moving elements

You can also move elements to another part of the page using the page tree view.

In the example video a button is moved to another part of the page. The second part of the video also shows a layout column being moved after another layout column within the same layout row.

Select parent of the current element

Move the selected element to another part of the page

Elements can also be .

Clone the selected element

Delete the selected element

Text Alignment

The Text Alignment button in the element toolbar is available for elements that contain e.g. the Text, Inline Text, Link, Heading, etc.

Options

See for more information.

💻
editable text
Page Element Settings
moved using the page tree view
Adding Page Content
Video: Move selection to parent element
Video: Move element
Video: Clone element
Video: Text alignment options
Video: Show element in Page Tree View
Video: Click element in Page Tree View to select in Page Content Area
Video: Move elements using Page Tree View
Selected Page Element
Page Tree View
Page Structure View