# Page Element Settings

The page element settings screen is invoked via the [Options button](/app-editor/page-editor/working-with-page-elements.md#options) in the [Element Toolbar](/app-editor/page-editor/working-with-page-elements.md#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`**

<div align="left"><figure><img src="/files/RAlKIwoT9ARKdAUUe8oa" alt="Element Settings tabs" width="563"><figcaption><p>Element settings tabs</p></figcaption></figure></div>

***

### 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:&#x20;

**`Name`** and **`Custom CSS Classes`**.

<div align="left"><figure><img src="/files/PcscArCqXDmDVpZ8hVZq" alt="Options tab - common settings" width="563"><figcaption><p>Options tab - common settings</p></figcaption></figure></div>

#### 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](https://getbootstrap.com/docs/4.6/getting-started/introduction/) based CSS classes that Zingy supports.
* Custom CSS files or styles that you can define in the Page Settings or App Settings.

{% hint style="info" %}
For quickly adjusting margin and padding settings using CSS classes, see [here](/app-editor/page-editor/padding-and-margin.md#adjustments-using-css).
{% endhint %}

#### 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.

<div align="left"><figure><img src="/files/drJfsiSzgrBfjYHDfoBg" alt="Text element specific settings in Options tab" width="563"><figcaption><p>Text element specific settings in Options tab</p></figcaption></figure></div>

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

***

### Design Tab

{% hint style="warning" %}
Most page elements provide quick access to styling and design controls in the [Options tab](#options-tab). You only need use the design tab if you are looking for something beyond what is offered.

Additionally the [Custom CSS Classes](#custom-css-classes) setting in the options tab also allows for style and design customization, using either standard [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) based CSS classes that Zingy supports, or your own (if you provide your own CSS files or CSS style definitions).
{% endhint %}

<div align="left"><figure><img src="/files/l7tlk3wY3QOsBIkuFTeW" alt="Design Tab" width="563"><figcaption><p>Design Tab</p></figcaption></figure></div>

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

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](/app-editor/page-editor/responsive-design.md#page-element-settings-design-tab).

***

### Advanced Tab

{% hint style="danger" %}
The settings in this tab require knowledge of HTML and CSS and hence we do not normally recommend modifying any settings here.
{% endhint %}

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](/app-editor/page-flow.md).

The Element ID shown in this tab is the [HTML ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) for the element.

<div align="left"><figure><img src="/files/5DBxlvcQza0orqgtPkMT" alt="" width="563"><figcaption><p>Advanced Tab</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-editor/page-element-settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.