# Styles

The **Styles** option allows you to adjust and customize the appearance of elements on your website, including text, images, buttons, forms, and various types of widgets. Through **Styles**, you can change properties such as colors, fonts, borders, spacing, and other effects to ensure they align with the overall design of your landing page.

<figure><img src="/files/rIjgJA9Z8yvQ28WGC564" alt=""><figcaption></figcaption></figure>

Here is a detailed guide on how to use the **Styles** option:

* **Background:** The Background Color option allows you to set the background color for the selected element on the page.

<figure><img src="/files/jljxAII8wAxeZB2YnFUL" alt=""><figcaption></figcaption></figure>

* **Overflow**: When the content inside a section or box exceeds its size, you can adjust how the section or box handles the overflow content by using Overflow.
  * **Default**: In some browsers or certain situations, `visible` is considered the default value. This means that if you do not specify an overflow content, the browser will treat it as `visible`.
  * **Hidden**: Content that exceeds the size of the element will be cut off and not displayed outside the element's boundaries.
  * **Visible**: Content that exceeds the size of the element will be fully displayed, even if it overflows outside the boundaries of that element. This is the default value in many cases.

<figure><img src="/files/3oK4eC89LiOT6xbOcHAS" alt=""><figcaption></figcaption></figure>

* **Box Shadow**: The Box Shadow option allows you to create shadow effects for elements, making them stand out and appear more three-dimensional. You can customize the type of shadow, its position, color, opacity, and size.&#x20;

  <figure><img src="/files/yVKCJ4a5ErpHmWHaeiB8" alt=""><figcaption></figcaption></figure>

  * **Type**:
    * **Box**: This is the standard shadow type, creating a shadow around the entire element.
    * **Realistic**: This shadow type creates a more realistic shadow effect, with varying opacity and thickness.
  * **Position**:
    * **Outside**: The shadow is positioned outside the element, creating the illusion that the element is lifted off the background.
    * **Inside**: The shadow is positioned inside the element, giving the impression that the element is recessed or sunk in.
  * **Color**: You can choose the color of the shadow using a color picker. The color of the shadow can significantly affect the perception of depth.
    * **X**: Determines the degree of the shadow's offset to the left or right of the element.
    * **Y**: Determines the degree of the shadow's offset above or below the element.
    * **Blur**: Adjusts the blur of the shadow. A larger value will make the shadow softer and more diffused.
    * **Spread**: Adjusts the size of the shadow. A positive value will make the shadow spread wider, while a negative value will make the shadow narrower.


---

# 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.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles.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.