# Customise a Unit

## Position a Unit

Select a unit to position it.

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

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Paddings</td><td><ul><li>Specify equal paddings for top / bottom and left / right sides in pixels.</li></ul><p>Padding is the space inside an unit, between its content and its border.</p><p></p><p>! Use the <strong>Show box model</strong> hotkey to highlight the unit properties.</p></td></tr><tr><td>2</td><td>Reset / set default</td><td><ul><li>Click <strong>Set default</strong> icon to reset the paddings settings.</li></ul></td></tr><tr><td>3</td><td>Detailed paddings settings</td><td><ul><li>Click the <strong>Individual paddings</strong> icon and specify values ​​for each padding in pixels.</li></ul></td></tr><tr><td>4</td><td>Margins</td><td><ul><li>Specify margins in pixels.</li></ul><p>Margin is the space outside the border, separating the unit from other units on the page.</p><p></p><p>Сonfigured in the same way as paddings.</p><p></p><p>! Use the <strong>Show box model</strong> hotkey to highlight the unit properties.</p></td></tr><tr><td>5</td><td>Rotation</td><td><ul><li>Specify rotation value of the unit in degrees (0-360°).</li></ul><p>! Set rotation last to avoid conflict with other settings.</p></td></tr><tr><td>6</td><td>Opacity</td><td><ul><li>Specify transparency value in percentages from 0% (invisible) to 100% (fully visible).</li></ul></td></tr></tbody></table>

### Positioning a Unit in a Cells Layout

Select a unit in the Cells layout to position it.

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

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Change unit size</td><td><ul><li>Place your cursor over the border of the unit and stretch it.</li></ul></td></tr></tbody></table>

### Positioning a Unit in a Container Layout

Select a unit wrapped in the Container layout to position it.

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

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Alignment</td><td><ul><li>Select the unit alignment relative to a parent unit.</li></ul></td></tr><tr><td>2</td><td>Change unit size</td><td><ul><li>Specify unit dimensions at the <strong>Width / Height</strong> fields in pixels or as a percentage of the parent unit size.</li></ul></td></tr><tr><td>3</td><td>Reset / set default</td><td><ul><li>Click the <strong>Auto</strong> icon to set the unit size automatically.</li></ul></td></tr><tr><td>4</td><td>Size limitations</td><td><ul><li>Click the <strong>…</strong> icon to add unit limitations:</li></ul><ol><li><strong>Min. Width</strong>: specify the minimum width to which the container can shrink;</li><li><strong>Max. Width</strong>: specify the maximum width to which the container can expand;</li><li><strong>Min. Height</strong>: specify the minimum height to which the container can shrink;</li><li><strong>Max. Height</strong>: specify the maximum height to which the container can expand.</li></ol></td></tr></tbody></table>

### Positioning a Unit in an Absolute Layout

Select a unit wrapped in the Absolute layout to position it.

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

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td><br>1</td><td>Change unit size</td><td><ul><li>Place your cursor over the border of the unit and stretch it.</li><li>Specify unit dimensions at the <strong>Width / Height</strong> fields in pixels or as a percentage of the parent unit size.</li></ul></td></tr><tr><td>2</td><td>Reset / set default</td><td><ul><li>Click the <strong>Auto</strong> icon to set the unit size automatically.</li></ul></td></tr><tr><td>3<br></td><td>Size limitations</td><td><ul><li>Click the <strong>…</strong> icon to add unit limitations:</li></ul><ol><li><strong>Min. Width</strong>: specify the minimum width to which the container can shrink;</li><li><strong>Max. Width</strong>: specify the maximum width to which the container can expand;</li><li><strong>Min. Height</strong>: specify the minimum height to which the container can shrink;</li><li><strong>Max. Height</strong>: specify the maximum height to which the container can expand.</li></ol></td></tr></tbody></table>

## Style a Unit

Select an element to set its style.

### Customize Unit Appearance

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

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Add background</td><td><ul><li>Click the <strong>Add background</strong> icon to add up to 10 background layers, including:</li></ul><ol><li>Solid colors;</li><li>Gradients;</li><li>Multiple layers.</li></ol></td></tr><tr><td>2</td><td>Select background color</td><td><ul><li>Click the field to select the background color and its intensity by using a hex color code or selecting a shade from the palette or <strong>Branding color</strong> list.</li></ul></td></tr><tr><td>3</td><td>Hide / show hidden background color</td><td><ul><li>Click the <strong>hide</strong> icon to hide / show the background.</li></ul></td></tr><tr><td>4</td><td>Remove background</td><td><ul><li>Click the <strong>remove</strong> icon to delete the background.</li></ul></td></tr><tr><td><br>5</td><td>Switch background to text color</td><td><ul><li>Select the checkbox to apply the background as a text fill (gradient text effect).</li></ul><p>! Enables on text elements.</p></td></tr><tr><td>6</td><td>Corner radius</td><td><ul><li>Specify the same corner radius for all corners in pixels or as a percentage of the parent unit size.</li></ul></td></tr><tr><td>7</td><td>Reset borner radius</td><td><ul><li>Click the <strong>Set default</strong> icon to reset corner radius value.</li></ul></td></tr><tr><td>8</td><td>Add radius for individual corners</td><td><ul><li>Click the <strong>Individual corner radius</strong> icon and specify values ​​for each corner in degrees.</li></ul></td></tr><tr><td>9</td><td>Overflow</td><td><ul><li>Select an overflow option from the drop-down menu:</li></ul><ol><li><strong>Visible</strong>: Extends content beyond the container's boundaries;</li><li><strong>Hidden</strong>: Clipped content at the boundaries;</li><li><strong>Scroll</strong>: Adds scrollbars regardless of the content;</li><li><strong>Auto</strong>: Shows scrollbars only when needed.</li></ol></td></tr></tbody></table>

### Customize Unit Border

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

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Add stroke (border)</td><td><ul><li>Click the <strong>Add stroke</strong> icon to add a unit border:</li></ul><ol><li>Solid colors;</li><li>Gradients;</li><li>Images;</li><li>Multiple layers.<br></li></ol><p>Сonfigured in the same way as background.</p></td></tr><tr><td>2</td><td>Thickness</td><td><ul><li>Specify equal border width for all sides in pixels.</li></ul></td></tr><tr><td>3</td><td>Reset thickness</td><td><ul><li>Click the <strong>Set default</strong> icon to reset the thickness value.</li></ul></td></tr><tr><td>4<br></td><td>Add Thickness for individual borders</td><td><ul><li>Click the icon to display the fields for the individual sides and enter the borders thickness for each.</li></ul></td></tr><tr><td>5<br></td><td>Style</td><td><ul><li>Choose a border line style from the drop-down menu:</li></ul><ol><li><strong>Solid</strong>: Converts the border into a continuous line;</li><li><strong>Dashed</strong>: Converts the border into a series of dashes;</li><li><strong>Dotted</strong>: Converts the border into a series of dots;</li><li><strong>Double</strong>: Converts the border into two parallel lines.</li></ol></td></tr></tbody></table>

### Customize Unit Effects

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

<table><thead><tr><th width="61">№</th><th width="210">Action</th><th>Description</th></tr></thead><tbody><tr><td><br>1</td><td>Shadow</td><td><ul><li>Click <strong>+</strong> to add shadow to a to unit:</li></ul><ol><li><strong>Shadow type</strong>: Select <strong>Soft</strong>, <strong>Regular</strong>, <strong>Retro</strong> for personalization;<br>Select <strong>None</strong> to reset the shadow settings;</li><li><strong>Shadow color</strong>: Select the shadow color and its intensity by using a hex color code or selecting a shade from the palette or <strong>Branding color</strong> list;</li><li><strong>Shadow size</strong>: Adjust the filter values ​​using the slider.</li></ol></td></tr><tr><td>2</td><td>Filter</td><td><ul><li>Click <strong>+</strong> to add one or multiple visual filters to unit content:</li></ul><ol><li><strong>Blur</strong>: Softens the content, making edges less sharp;</li><li><strong>Brightness</strong>: Makes the content lighter or darker;.</li><li><strong>Contrast</strong>: Adjusts the difference between light and dark areas;</li><li><strong>Saturate</strong>: Changes the intensity of colors;</li><li><strong>Invert</strong>: Flips colors to their opposite (like a photo negative);</li><li><strong>Hue Rotate</strong>: Shifts colors around the color wheel;</li><li><strong>Sepia</strong>: Applies a warm, brownish, vintage tone.<br><br>Adjust the filter values ​​using the slider.</li></ol></td></tr><tr><td>3</td><td>Backdrop filter</td><td><ul><li>Click <strong>+</strong> to add one or multiple visual filters to the area behind the unit.</li></ul><p>Сonfigured in the same way as filters.<br></p><p>! Useful for glass-morphing effects.</p></td></tr></tbody></table>


---

# 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://help.parta.io/no-code-editor/edit-units/customise-a-unit.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.