# Additional Settings

Page Designer provides several **additional styling and appearance options** that can be applied to most elements.\
Although the examples below refer to **text elements**, the same settings are available for many other components such as images, containers, and layout elements.

***

### Background

The **Background** setting allows you to add a **background color** or **background image** to an element.

* Apply solid colors to highlight content
* Use images to create visual emphasis
* Commonly used for text blocks, cards, and containers

#### Example: Background Color

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fo6tdua95Z1yJjkNCXxHK%2Fadd-bc.png?alt=media&#x26;token=91fcefb8-3144-46fe-8d95-d9cab8e77533" alt=""><figcaption></figcaption></figure>

#### Example: Background Image

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F7bdF7Q00NVcWa6PbtQzk%2FAdd-bi.png?alt=media&#x26;token=f490da7d-76bb-4c60-9146-b3f3931af460" alt=""><figcaption></figcaption></figure>

***

### Border

The **Border** option allows you to define:

* Border width
* Border style (solid, dashed, etc.)
* Border color
* Border radius (rounded corners)

This is useful for visually separating elements and improving layout clarity.

#### Example: Border & Radius

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FylhjuprW6UO7Lx83F3sb%2Fadd-radius.png?alt=media&#x26;token=3da38285-2f63-4c52-8154-faadeeb2284a" alt=""><figcaption></figcaption></figure>

***

### Appearance

#### Opacity

The **Opacity** setting controls the transparency of an element.

* Default value: **100**
* Adjustable range: **0–100**
* Lower values make the element more transparent

This setting is useful for overlay effects or background content.

#### Example: Opacity at 50%

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FFHyPvHEcY0C5aYeSZkZt%2FASopacity50.png?alt=media&#x26;token=36b3cbb7-d8e7-46e2-8aba-ce74bf0790d8" alt=""><figcaption></figcaption></figure>

***

### Padding and Margin

**Padding** and **Margin** control the spacing around elements.

* **Padding**: Space *inside* the border (between content and border)
* **Margin**: Space *outside* the border (between elements)

You can configure padding and margin individually for:

* Top
* Right
* Bottom
* Left

This gives full control over spacing and alignment on the page.

#### Example: Padding & Margin Configuration

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FQParsjW7ZundceXi7yI8%2FASmar-pad.png?alt=media&#x26;token=2046c458-d3b2-4773-af50-b57cac2088da" alt=""><figcaption></figcaption></figure>

***

### Box Shadow

The **Box Shadow** feature adds depth and visual separation by applying shadows around elements.

You can configure:

* Shadow type: **Outset** or **Inset**
* Shadow position
* Blur and spread
* Shadow color

#### Example: Box Shadow (Outset)

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FfA5MbvQW9eguaAcrDgJz%2FboxSDout.png?alt=media&#x26;token=b9e906fd-307d-4cb8-9e04-2f1c983822f7" alt=""><figcaption></figcaption></figure>

#### Example: Box Shadow (Inset)

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FCoAxeK8pruHX6QUyGmtN%2FboxSDin.png?alt=media&#x26;token=fe916d7e-f4d9-4f87-810d-4c1408cbf4dd" alt=""><figcaption></figcaption></figure>

***

### Summary

The **Additional Settings** in Page Designer allow you to:

* Add background colors or images
* Define borders and rounded corners
* Control opacity and transparency
* Adjust spacing using padding and margin
* Enhance visual depth with box shadows

These settings help create **clean, responsive, and visually structured layouts** across your pages.


---

# 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.onewebstack.com/designer-reference/page-designer/page-designer-tools/generic-tools/additional-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.