Page Element Settings
Last updated
Last updated
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
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.
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.
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.
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.
Please refer to the element specific information sections for more information.
Most page elements provide quick access to styling and design controls in the Options tab. You only need use the design tab if you are looking for something beyond what is offered.
Additionally the Custom CSS Classes setting in the options tab also allows for style and design customization, using either standard Bootstrap based CSS classes that Zingy supports, or your own (if you provide your own CSS files or CSS style definitions).
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.
The settings in this tab require knowledge of HTML and CSS and hence we do not normally recommend modifying any settings here.
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.
