> For the complete documentation index, see [llms.txt](https://help.parta.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.parta.io/no-code-editor/edit-units/customise-a-unit.md).

# Customise a Unit

## Position a Unit

Select a unit to position it.

<figure><img src="/files/eTahmntKW8qH5PpFRtnF" 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>! 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>Сonfigured in the same way as paddings.</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><tr><td>7</td><td>Position</td><td><div data-gb-custom-block data-tag="hint" data-style="success" class="hint hint-success"><p><strong>Learn more about Custom Element Positioning</strong> <a href="https://www.youtube.com/watch?v=_bYOfrQtTzQ"><strong>here</strong></a><strong>.</strong></p></div><ul><li>Choose a position option from the drop-down menu:</li></ul><ol><li><strong>Auto</strong>: Placed automatically by the parent layout. Default behaviour; the unit flows within its parent;</li><li><strong>Fixed</strong>: Positioned relative to the screen. The unit does not scroll with the page and stays visible on all blocks of the course. Available options:<br><br>- <strong>Fix to — Horizontal:</strong> Select the horizontal edge of the viewport: <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong>.<br>Enter the distance from the selected edge in px or %. <em>Hidden when Center is selected.</em><br>- <strong>Fix to — Vertical</strong>: Select the vertical edge of the viewport: <strong>Top</strong>, <strong>Center</strong>, or <strong>Bottom</strong>.<br>Enter the distance from the selected edge in px or %. <em>Hidden when Center is selected.</em><br>- <strong>Z-index:</strong> Set the stacking order. A unit with a higher value appears on top of units with lower values.<br><em>Not set by default (inherited). Resets to inherited when cleared.</em><br><br><strong>Available for root units only</strong>;</li><li><strong>Sticky to Parent:</strong> Stays pinned while the parent container scrolls. When the parent container leaves the viewport, the unit leaves with it. Available options:<br><br>- <strong>Stick to</strong>: Select the edge of the parent container to stick to: <strong>Top</strong>, <strong>Bottom</strong>, <strong>Left</strong>, or <strong>Right</strong>.<br>Enter the distance from the selected edge (in <strong>px</strong> or <strong>%</strong>) at which the unit starts sticking.<br><em>For root units, the parent is the viewport.</em><br>- <strong>Z-index</strong>: Configured in the same way as for <strong>Fixed</strong> position option.<br><br><strong>Available for root units, containers, and elements</strong>;</li><li><strong>Absolute</strong>: Ignores auto layout and is positioned inside its container using explicit coordinates. Existing Absolute behaviour is preserved.</li></ol><div data-gb-custom-block data-tag="hint" data-style="success" class="hint hint-success"><p>All position, offset, and Z-index settings are applied <strong>separately</strong> for Desktop, Tablet, and Mobile device modes.</p></div></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>