# Customise a Unit

## Position a Unit

Select a unit to position it.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FMhFrCbFbvUPaYCVnEtty%2FCustomize_a_Unit.01.png?alt=media&#x26;token=705b41b2-a0d4-476d-ae8c-ab8a7312c360" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fdnav5SieQdtoIeCFCbRz%2FCustomize_a_Unit.02.png?alt=media&#x26;token=5eed8e29-1f63-40d1-b0ed-54ee0482fce3" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F60WBKGTYFb0GRUaYEvhv%2FCustomize_a_Unit.03.png?alt=media&#x26;token=cf51eec2-0810-43a3-b010-fab0eccbf8fd" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FgQU7Jkigb1MCdtU5zZpw%2FCustomize_a_Unit.04.png?alt=media&#x26;token=efbbd80d-4eef-41d1-80a7-afaef6d7b97b" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FelQRxau4t0znUJrCljGZ%2FCustomize_a_Unit.05.png?alt=media&#x26;token=773218d7-ffca-40a6-a696-f52b0734a387" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FC7pvNBR5oquoG51ZkzUR%2FCustomize_a_Unit.06.png?alt=media&#x26;token=6d8a9e07-ee4b-4001-93cb-51fc1cc9f920" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FPRFhbSG1wmUx49IAY6JS%2FCustomize_a_Unit.07.png?alt=media&#x26;token=f67603d0-6614-40f1-b998-435691863140" 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>