Page Element Settings

The page element settings screen is invoked via the Options button in the Element Toolbar.

The element settings screen allows you to change settings and the design of a page element.

For all elements, the element settings screen consists of three tabs:

Options, Design and Advanced

Element Settings tabs
Element settings tabs


Options Tab

The options tab generally consists of settings specific to the selected element.

However, there are two common settings that appear for all elements:

Name and Custom CSS Classes.

Options tab - common settings
Options tab - common settings

Name

The Name setting allows you to provide a friendlier name to an element. By default the page editor assigns a sequential name for the element.

Custom CSS Classes

The Custom CSS Classes setting allows you to add one or more CSS classes to the page element. The classes can be from:

  • The standard Bootstrap based CSS classes that Zingy supports.

  • Custom CSS files or styles that you can define in the Page Settings or App Settings.

For quickly adjusting margin and padding settings using CSS classes, see here.

Element specific settings

The example below shows the element settings specific to the Text element.

The common settings Name and Custom CSS Classes are present along with settings specific to the Text element.

Text element specific settings in Options tab
Text element specific settings in Options tab

Please refer to the element specific information sections for more information.


Design Tab

Design Tab
Design Tab

The design tab allows you to customize how the element gets rendered on your page.

These settings are organized into various categories like Font, Spacing, Border Radius, etc.

The responsive design implementation allows you to control the look & feel for various screen sizes. For more information see here.


Advanced Tab

The advanced tab provides HTML specific information about the selected element. This information can be used in scenarios like using custom javascript code in Page Flow.

The Element ID shown in this tab is the HTML ID for the element.

Advanced Tab

Last updated