Element Settings

Element Settings control the properties of a selected Page Element in the ioLoop Page Editor.

Use Element Settings to configure what an element displays, how it looks, how it is arranged, and how it participates in supported interactions. For example, you can change an Image's source, configure a Button's appearance, adjust a Row's spacing, or set the destination of a Link.

Element Settings are usually opened from the Selected Element Toolbar after selecting an element on the Page Editor canvas.

The available settings depend on the selected element type. A Heading, Image, Button, Table Row, Menubar Item, and Widget do not all expose the same controls.

This page explains the settings interface and the principles shared across element types. For the specific options available on an individual element, see the relevant Page Elements or Widgets documentation.

Opening Element Settings

To configure an element:

1. Open the Page, Form, or Page Slice in the Page Editor.
2. Select the element on the canvas.
3. Confirm that the intended element is selected, particularly when working with nested content.
4. Use Settings on the Selected Element Toolbar to open Element Settings.
5. Configure the relevant Options, Design, or Advanced properties.
6. Save the changes using the editor's available controls and preview the result.

For example, a Card may contain a Heading, Text, and Button:

Card
  Card Header
    Heading
  Card Body
    Text
  Card Footer
    Button

Selecting the Card lets you configure properties of the card itself. To change the Heading's text properties or the Button's action, select that child element instead.

For help with selection and toolbar actions, see Selected Element Toolbar.

Settings Areas

The Element Settings dialog is organized into three main areas:

Area	Purpose
Options	Element-specific content, behavior, and configuration.
Design	Visual styling, dimensions, spacing, and responsive presentation.
Advanced	Technical identifiers, attributes, classes, styles, and other lower-level element information.

A useful way to choose the right area is:

• Options: What does the element display or do?
• Design: How should the element appear and fit in the layout?
• Advanced: Does the element need a technical property not covered by the ordinary controls?

Most configuration can be completed in Options and Design. Use Advanced when there is a specific technical requirement.

Options

Options contains settings associated with the selected element's purpose and behavior.

For example:

Element Type	Example Options
Heading	Heading level and alignment.
Text	Text behavior and alignment.
Image	Image Location, Image Description, Auto Sizing, and Lazy Loading.
Video	Video Selection/URL, thumbnail, and playback options.
Link	HRef, Target, Link Action, and Action Target.
Button	Button Content, Button Look, Button Size, and action settings.
Table	Borders, Compact Spacing, and Striped Rows.
Table Heading Cell	Column Span, Row Span, and Scope.
Table Column Cell	Column Span and Row Span.
Menubar	Horizontal Align and Scrollable Content.
Widget	Widget-specific configuration.

These are examples rather than a complete list. Options vary according to the selected element and the editing context.

Choosing the Relevant Options

Start with the operation you want the element to perform:

• To change which image appears, configure the Image element rather than its containing Column.
• To change where a user navigates, configure HRef or the supported action settings on the appropriate Link or menu element.
• To change row shading in a basic Table, select the Table and use its table-specific options.
• To change an individual table cell's span, select the Table Heading Cell or Table Column Cell.
• To change the configuration of a Widget, select the Widget and use its supported options.

A visual style setting does not necessarily define an interaction. For example, making a Button prominent does not configure the operation it performs. Set the intended behavior in the element's supported action configuration and, where needed, coordinate it with Page Flow.

For more information, see Buttons and Actions and Page Flow.

Element Name

The Options area includes a Name field.

Use a clear name when an element needs to be recognizable during future editing, team collaboration, or implementation work involving Page Flow.

Examples of useful names include:

• Hero Image
• Add Customer Button
• Orders Table
• Profile Card
• Status Badge

Names based on an element's function are generally easier to maintain than temporary descriptions such as Blue Thing or Test 1.

Naming Elements for Maintainability

Consider how someone else would identify the element several weeks later.

For example, a Page may contain several Buttons:

Customer Form
  Save Customer Button
  Cancel Editing Button
  Delete Customer Button

Purpose-based names help distinguish controls when reviewing the layout or associated application behavior.

An element's Name is an editing identifier or label; do not assume it is interchangeable with an HTML element ID, a CSS class, or the Page URL. Use the appropriate technical property when code or styling requires one.

If you rename or replace an element involved in Page Flow or another configuration, review those references and test the affected behavior.

Design

Design controls the visual presentation of the selected element.

The available properties depend on the element and its supported styling capabilities. Common design categories include:

Category	Purpose
Font	Typography-related properties.
Color	Text, background, and other color-related properties.
Sizing	Width, height, and other dimensions.
Spacing	Margin, padding, and related spacing.
Border Radius	Rounded corners.
Border Width	Border thickness.
Border Color	Border color.
Border Style	Border treatment.
Position	Positioning-related properties.
Visibility	Display and visibility-related behavior.
Scrolling	Overflow and scrolling behavior.
Custom CSS Properties	Specialized CSS styling where supported.

Not every category is available or meaningful for every element.

Font and Color

Use Font and Color controls for ordinary typography and visual styling.

Examples include:

• Adjusting a Heading's typography to distinguish it from body text.
• Changing the text color of supporting information.
• Applying a background treatment to a Card or Content Area.
• Styling a Badge to communicate a status consistently.

Before setting individual typography properties throughout a Page, consider whether the Page or Project's existing font configuration already provides the intended result.

For shared branding and page-level font selection, see Page Settings.

Sizing and Spacing

Sizing controls dimensions such as width and height where supported. Spacing controls the space within and around an element.

These properties serve different purposes:

Property	What It Affects
Width / Height	The element's dimensions or sizing behavior.
Padding	Space inside an element, between its boundary and its content.
Margin	Space outside the element, relative to surrounding content.
Row Gutters	Separation between Columns in a Row, configured on the Row itself.

For example, to provide more room around text inside a Card Body, consider padding. To separate one section from another, consider the relevant margin or layout spacing. To change the distance between Columns, use the Row's gutter configuration where appropriate.

An element's actual size is also influenced by its parent layout. Setting a child element's width cannot necessarily make it extend beyond the space provided by its containing Column or Content Area.

Use Layout Elements when the underlying Row, Column, or container structure needs to change.

Borders and Corners

Border Radius, Border Width, Border Color, and Border Style can be used where supported to adjust an element's outline or corner treatment.

For example, you may want cards in the same group to have consistent borders, or a supporting panel to have a distinct border treatment.

Use these controls consistently across related elements rather than independently styling each copy of a repeated component.

Position, Visibility, and Scrolling

These categories affect how an element occupies space and participates in the layout:

• Position applies positioning-related styling where supported.
• Visibility controls applicable display or visibility treatment.
• Scrolling controls overflow or scrolling behavior for supported elements.

For example, a Content Area with more content than its available space may need an appropriate overflow setting. A wide table may require layout or overflow adjustments for narrow viewports.

Be careful when changing these properties. An element's appearance depends on the surrounding structure, and positioning or overflow settings can affect access to nested content.

Visibility is not access control. Hiding an element on the page does not prevent someone from accessing protected data or operations through another route. Configure Page access, Database permissions, and trusted Backend authorization as appropriate.

Responsive Design Settings

Supported Design properties can be configured for different screen sizes.

Scope	Purpose
All	Provides a general setting unless a more specific screen-size value applies.
Desktop	Applies to supported larger-screen layouts.
Tablet	Applies to supported medium-screen layouts.
Mobile	Applies to supported smaller-screen layouts.

Use the All scope for a shared presentation where possible, then configure device-specific values only when an element needs to differ across screen sizes.

For example:

Property	All	Mobile Adjustment
Heading alignment	Center	Align left if needed for readability.
Card spacing	Standard spacing	Reduce spacing when space is limited.
Image sizing	Fits the desktop layout	Adjust width to suit the narrow layout.
Table presentation	Normal content width	Review overflow and available width.

These examples illustrate design choices, not automatic settings applied by ioLoop.

Configuring a Responsive Element

1. Select the element and open Element Settings.
2. Open the relevant property under Design.
3. Set the general value under All, where supported.
4. Configure Desktop, Tablet, or Mobile overrides when a different treatment is needed.
5. Save and preview the Page at the relevant screen sizes.
6. Check the surrounding parent layout, not only the selected element.

For example, reducing the width of a child Card may not resolve a cramped mobile layout if the Row and Columns containing it are still arranged for desktop.

The exact viewport ranges and available responsive controls depend on the editor's supported configuration. Avoid assuming that every styling property has an independent setting at every screen size.

Custom CSS Classes

Element Settings can include Custom CSS Classes for applying class-based styling or identifying elements through supported custom code.

Use custom classes when:

• The same style should be reused across multiple elements.
• A CSS asset defines a style not available through the ordinary Design controls.
• A specific Page needs a shared, consistent visual treatment.
• Supported Page Flow or custom browser-side code needs a meaningful selector.

For ordinary changes to a single element, prefer the built-in Design controls.

Example: Reusable Card Styling

Suppose several Cards should share the same visual treatment.

Assign the custom class name summary-card to the relevant elements where the class setting is available. Then define the corresponding CSS in an appropriate page-level style definition or CSS asset:

.summary-card {
  border: 1px solid #d7dee7;
  border-radius: 8px;
  padding: 16px;
}

The class connects the element to the CSS rule. The rule must also be included through a supported styling configuration for the Page or Project.

For a small page-specific rule, use Custom Style definitions in Page Settings where appropriate. For reusable CSS across Pages, use a managed CSS asset under Frontend → Code and include it at the appropriate scope.

Custom CSS can interact with existing element styles. If a rule does not produce the expected result, check whether the CSS is included and whether another applicable rule takes precedence.

Classes vs. Element Names

These properties are related but are not interchangeable:

Property	Primary Purpose
Name	Identifies an element in the editor and related configuration.
Custom CSS Classes	Associates the element with reusable CSS selectors or supported custom code.
Element ID	Identifies a specific element in a technical context when exposed and supported.

Use descriptive, consistent names. Do not rely on generated or implementation-specific identifiers remaining unchanged unless the relevant integration explicitly supports them.

Advanced

Advanced contains lower-level information and controls for the selected element.

Depending on the element and editing context, it may include:

• Element ID.
• Element property identifiers.
• Existing classes.
• Editable attributes.
• Editable styles.
• Custom CSS properties.

Advanced is intended for cases where ordinary Options and Design controls are not sufficient.

Element IDs and Property Identifiers

Technical identifiers can help describe how an element is represented or referenced.

These values are not necessarily the same as the element's display Name. Some may be intended for inspection rather than routine modification.

Before changing an identifier:

1. Check whether it is editable in the current context.
2. Determine whether Page Flow, custom code, styles, or another configuration depends on it.
3. Make the change only when it serves a specific purpose.
4. Preview and test the affected behavior afterward.

Changing an identifier used by another part of the application may break an existing reference.

Attributes and Editable Styles

Where supported, Advanced can expose element attributes and lower-level styling.

Use these controls for specialized requirements that cannot be addressed through ordinary Options or Design settings. For instance, a supported integration may require an additional element attribute, or a presentation requirement may need a CSS property that is not available through the standard controls.

Review any existing values before editing them. Unsupported or conflicting attributes and styles may produce unexpected results, especially on elements with built-in interactive behavior.

Avoid using Advanced to bypass the intended element structure or to replace functionality that already has a dedicated setting.

Custom CSS Properties

Custom CSS Properties allow specialized styling where supported. They are different from Custom CSS Classes:

• A CSS class identifies elements to which matching CSS rules can apply.
• A CSS property specifies a particular styling value or behavior.

Choose the ordinary Design control when it provides the result you need. Use a reusable class and CSS definition when several elements share the style, and use a custom property only when a specific technical need justifies it.

Dynamic Content and Interactions

Some Page Elements can display values supplied by Project data, Data Design, or Page Flow instead of relying only on manually entered content.

For example:

• A Text element within a repeated product design can represent a product name.
• Inline Text can display a price or status.
• A Link can use a data-supplied destination when the selected rendering pattern supports it.
• A Badge can display a status associated with a record.

Adding an element or configuring its appearance does not automatically connect it to Project data.

A typical data-backed presentation involves:

1. Designing the visual elements that will display the information.
2. Configuring the appropriate Data Design placeholders or other supported bindings.
3. Using Page Flow or another supported mechanism to obtain and supply data.
4. Previewing the result with representative values and states.

Similarly, configuring a Button's appearance does not itself define a save operation, and configuring a Link's visual style does not determine which application logic runs when it is selected.

Use element-specific action settings for supported built-in interactions and Page Flow for browser-side application logic where required.

For repeated data layouts, see Data Design. For trusted operations and sensitive authorization, use the appropriate Backend capabilities rather than relying on browser-side presentation settings.

Parent and Child Element Settings

Pages, Forms, and Page Slices contain nested element structures. The selected element determines which settings you are changing.

For example:

Container
  Row
    Column
      Card
        Card Body
          Heading
          Text
          Button

• Select Row to configure the arrangement of its Columns.
• Select Column to configure the space it occupies within the Row.
• Select Card to configure the outer card presentation.
• Select Heading to configure that heading's properties.
• Select Button to configure its content, appearance, or supported action.

A parent element can influence the appearance and available space of its children. For example, changing a Row's layout can alter where its child Cards appear, even though the Cards' own Design settings have not changed.

If changing a child element does not produce the expected result, inspect the parent layout and any applicable CSS before adding more element-specific overrides.

Shared Content

A Page Slice may be reused by multiple Structured Pages. Changes to the elements within a shared Page Slice can therefore affect every Structured Page that uses it once the changes are published.

When editing shared headers, navigation, or other reusable content, check the other Pages that depend on the same slice.

For more information, see Editing Structured Pages.

Common Configuration Examples

Configure a Button

Suppose a Page contains an Add Customer Button.

1. Select the Button and open Element Settings.
2. In Options, configure its content, look, size, and supported action settings.
3. In Design, adjust spacing or presentation if needed.
4. If the action must validate or save data, configure the appropriate Page Flow behavior.
5. Save and preview both the appearance and the interaction.

If the Button is replaced later, review any Page Flow that references the original element.

Style a Group of Cards

Suppose a dashboard has several Cards displaying summary values.

1. Configure the Cards and their child content.
2. Use Design to establish consistent spacing, borders, and colors.
3. Use a shared Custom CSS Class if a reusable style is needed beyond the standard controls.
4. Configure the containing Row and Columns for responsive layout.
5. Preview the cards at desktop, tablet, and mobile widths.

Use Tables and Cards for Card structures and Layout Elements for the surrounding layout.

Configure a Responsive Image

Suppose an Image is displayed beside descriptive text on desktop but needs to fit a narrower mobile layout.

1. Select the Image and configure its source and description in Options.
2. Review sizing and spacing under Design.
3. Add a Mobile-specific sizing adjustment if supported and needed.
4. Inspect the parent Row and Column configuration to ensure the complete section adapts appropriately.
5. Preview the Image and surrounding content at multiple widths.

For image-specific controls, see Media Elements.

Element Settings vs. Page Settings

Element Settings apply to a selected Page Element. Page Settings apply to the Page, Form, or Structured Page as a whole.

Requirement	Use
Change a Heading's presentation	Element Settings
Configure an Image source or description	Element Settings
Configure a Button or Link	Element Settings
Change a Row's layout or spacing	Element Settings
Apply a CSS class to an element	Element Settings
Set a Page URL or publishing status	Page Settings
Configure Page access restrictions	Page Settings
Set SEO and social metadata	Page Settings
Select page-level heading and body fonts	Page Settings
Include page-level JavaScript or CSS assets	Page Settings
Define page-specific CSS	Page Settings

For styles shared across many Pages, Project-level configuration or reusable CSS assets may be more appropriate than independently styling every element.

Page access is separate from element visibility. Protect sensitive data and operations with the correct Page, Database, and Backend authorization configuration.

Saving, Previewing, and Publishing

Use Preview to check changes in the Project's development environment before publishing them.

A practical workflow is:

1. Configure and save the relevant element settings.
2. Preview the Page and verify the visual result.
3. Test any affected links, Buttons, Forms, Widgets, or Page Flow interactions.
4. Review desktop, tablet, and mobile layouts when presentation has changed.
5. Review other Pages when the modified elements belong to a shared Page Slice.
6. Publish the Project when the changes are ready to be released.
7. Verify the published application through the normal launch workflow.

Saving an element's settings in the Project Editor should not be confused with publishing an updated application. Preview and publishing are separate parts of the Project lifecycle.

Choosing the Right Settings Area

Need	Use
Change element-specific content or behavior	Options
Give an element a meaningful editor name	Name in Options
Adjust color, typography, size, or spacing	Design
Configure supported screen-size overrides	Responsive Design settings
Apply reusable CSS-based styling	Custom CSS Classes and the relevant CSS definitions
Inspect or change supported technical attributes	Advanced
Work with identifiers used by code or other references	Advanced, with dependency checks
Display values from Project data	Data Design, Page Flow, or supported dynamic configuration
Change the Page's URL, access, or metadata	Page Settings
Change the surrounding layout structure	Select and configure the relevant Layout Element

Element-Specific Settings

For detailed options on particular elements, see:

Element Area	Details
Layout Elements	Containers, Rows, Columns, Content Areas, Flexible Areas, and Collapsible Areas.
Text and Content	Headings, Text, Inline Text, Labels, Alerts, Badges, and HTML Blocks.
Media Elements	Images, Videos, and YouTube Videos.
Buttons and Actions	Links, Link Buttons, Buttons, and Button Groups.
Menus and Navigation	Menubars, menu items, popup menus, and Login Info.
Tables and Cards	Tables, table rows, cells, cards, and card groups.
Widgets	Data Table, AI Agent, payment, media, and other specialized Widgets.

Good Practices

• Select the intended element. Check whether you are editing the element itself or a parent layout element.
• Start with Options. Configure content and behavior before refining presentation.
• Prefer built-in Design controls. Use custom CSS when it offers a clear benefit.
• Use descriptive names. Name important controls and content areas according to their purpose.
• Make responsive overrides intentionally. Start with shared values and adjust specific screen sizes only as needed.
• Keep repeated styles consistent. Use shared classes or appropriate reusable layout patterns when several elements need the same treatment.
• Use Advanced selectively. Inspect existing identifiers, attributes, and styles before modifying them.
• Review dependencies. Check Page Flow and other references when changing or replacing important elements.
• Keep visual settings separate from access control. Hiding a control does not secure data or functionality.
• Preview the complete context. Check the selected element, its parent layout, its interactions, and any shared Pages that use it.

Common Mistakes

Avoid these patterns:

• Editing the wrong level. Changing a Column when the intended change belongs to the Button inside it, or vice versa.
• Using styling to fix structure. Adding width, position, or spacing overrides when the underlying layout should be changed.
• Overconfiguring responsive styles. Creating separate values for every screen size without a demonstrated need.
• Confusing Name, class, and ID. Treating an editor label as an interchangeable CSS selector or technical identifier.
• Using custom CSS unnecessarily. Reimplementing styling already available through Design.
• Changing technical identifiers casually. Breaking Page Flow, CSS, or other references that depend on existing values.
• Expecting dynamic content automatically. Adding a visual placeholder without configuring its data source or rendering workflow.
• Assuming visibility enforces security. Hiding a protected action instead of enforcing the required permissions.
• Ignoring parent styles. Adding child-level adjustments without checking the surrounding Row, Column, or Container.
• Forgetting shared content. Changing a Page Slice without reviewing other Structured Pages that use it.
• Skipping Preview. Saving visual changes without testing responsive layouts and interactive behavior.

Element Settings are most effective when each change matches the element's role: Options for what it does, Design for how it appears, and Advanced for carefully controlled technical details.

Related Topics

• Selected Element Toolbar
• Element Library
• Editing Page Content
• Editing Structured Pages
• Page Settings
• Layout Elements
• Text and Content
• Media Elements
• Buttons and Actions
• Menus and Navigation
• Tables and Cards
• Data Design
• Page Flow