Page Elements

Page Elements are the building blocks used to create the visual structure and content of Pages, Forms, and Page Slices in the ioLoop Page Editor.

They provide the components needed to build an application's user interface, including layout containers, text, images, buttons, links, navigation menus, tables, cards, and input controls.

Page Elements can be combined and nested to create interfaces ranging from simple informational pages to complex, interactive application screens.

For example, a dashboard might use containers and columns to organize its layout, headings to identify sections, cards to display summary information, a table to present records, and buttons to initiate user actions.

Understanding Page Elements

Page Elements are organized in a hierarchical structure within the Page Editor. Some elements serve as containers for other elements, while others display content or provide controls that users interact with.

This structure establishes relationships between elements:

• Parent elements provide structure and can control the layout, spacing, alignment, and appearance of the elements they contain.
• Child elements reside inside parent elements and provide content, controls, or additional nested structures.
• Sibling elements share the same parent and are arranged according to that parent's layout properties.

For example, a container might contain a row with two columns. One column could display an image, while the other contains a heading, descriptive text, and a button.

Changes to a parent element can affect its children. Adjusting a row's alignment or spacing may change the arrangement of its columns, while changing a heading's typography generally affects only that heading.

Understanding this hierarchy is important when selecting, arranging, and configuring elements, particularly in pages with deeply nested layouts.

Types of Page Elements

The Page Element Library provides different types of elements based on their intended purpose.

Category	Purpose
Layout Elements	Organize content using containers, rows, columns, and other structural elements.
Text and Content	Display headings, paragraphs, labels, and other written content.
Media Elements	Display images, icons, and supported media resources.
Buttons and Actions	Provide controls for navigation, user actions, and application interactions.
Menus and Navigation	Create navigation structures for moving between pages or destinations.
Tables and Cards	Present information in structured tables, cards, and related layouts.
Input Controls	Collect user input through fields, selections, and other input controls.
Widgets	Provide specialized, configurable functionality such as Data Tables, AI Agent interfaces, payments, and media experiences.

Widgets are specialized Page Elements, but their setup and behavior are covered separately under Widgets.

For the available element types and how to add them, see Element Library.

Selecting and Configuring Elements

Each Page Element exposes properties and editing actions appropriate to its type.

When you select an element on the page canvas, the Page Editor displays a contextual toolbar for working with that element.

Depending on the element, the toolbar may provide access to settings, text alignment, HTML import, clipboard operations, and other supported actions.

See Selected Element Toolbar for details.

Element Settings

Element Settings control the properties of the selected element. The available options depend on the element type and its capabilities.

For example:

• A text element may provide content, typography, color, and alignment settings.
• A layout element may provide dimensions, spacing, positioning, and arrangement settings.
• An image element may provide image source, sizing, and display settings.
• A button or link may provide label, appearance, navigation, and interaction-related settings.
• An input control may provide input-specific properties and configuration options.

Element Settings apply to individual elements, while Page Settings control page-level properties such as URLs, access, fonts, and included code assets.

For detailed element configuration, see Element Settings.

Page Elements and Application Behavior

Page Elements define the visible interface, but an application's functionality may also depend on other Frontend and Backend capabilities.

Page Flow provides browser-side application behavior. It can respond to user interactions, read or update supported Page Elements, control their state, and coordinate data operations.

For example, a button on a dashboard can trigger Page Flow to retrieve updated information and refresh the displayed content.

Media provides reusable images and other frontend-accessible resources that can be referenced by supported Page Elements.

Code assets provide reusable CSS and JavaScript functionality for styling and extending frontend behavior.

Data Design uses Page Elements to construct reusable visual layouts that can be populated with dynamic data. For example, a product card design can be rendered repeatedly using records retrieved by Page Flow, rather than manually creating a separate group of elements for every product.

Forms combine Page Elements and input controls with form-specific configuration and Page Flow to collect, validate, and process user input.

These capabilities work together, but their responsibilities remain distinct. Page Elements define the interface, while configuration and application logic determine how that interface behaves and interacts with data.

For further information, see Page Flow, Data Design, and Forms.

In This Section

• Element Library — Explore the available Page Elements and learn how to add them to a page.
• Layout Elements — Build page structures using containers, rows, columns, and other layout elements.
• Text and Content — Add and configure headings, paragraphs, labels, and other text content.
• Media Elements — Display images and other supported media.
• Buttons and Actions — Create buttons and controls for navigation and user actions.
• Menus and Navigation — Create and configure navigation-oriented interface elements.
• Tables and Cards — Organize and present information using tables, cards, and related visual structures.
• Selected Element Toolbar — Understand the contextual editing actions available for selected elements.
• Element Settings — Configure element content, appearance, layout, and supported properties.

Where to Go Next

Start with Element Library to explore the elements available in the Page Editor and understand how to add them.

See Selected Element Toolbar and Element Settings to learn how to work with and configure existing elements.

For the broader workflow of adding, arranging, modifying, importing, and removing page content, see Editing Page Content.