# Image

## General Settings

### Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F2XRiCOGzwAJfVaG7fZkZ%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-7f730858ff2ea8c4f34f0320400880e4c8b3c1f7_Image%20-%20title%20(1).png?alt=media&#x26;token=21e850b4-71b9-489e-8a6c-6e9fcc8d230b" alt=""><figcaption></figcaption></figure>

### Spacing Option:

There are different spacing options available for adjusting your video content.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FoDYOtaTP2eg4YPlJ5R9v%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-9841f4128ef5d03e7a479a04fc133a2828577c84_Image%20-%20Spacing%20Options.png?alt=media&#x26;token=cdfdd4ac-48b5-4171-93ff-2b8928d6e2d6" alt=""><figcaption></figcaption></figure>

* **Padding Left, Right, Top, and Bottom**\
  This Four (4) different toggle bar moves the content to either the left, right, top, or bottom depending on the toggle bar you click on.
* **Margin Top and Bottom**\
  You can adjust the top or bottom margin of your content by toggling its bars.

### Background Color

If you want to change the background color of your Image, you can do that by clicking on the content you want to adjust its background.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F7HrjnRH7NhRDIZjR5FQz%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-cb5f1ce479cf09cdcba5fc6edc73ae84f64b8d82_Image%20-%20BG%20Color%20(1).png?alt=media&#x26;token=281cc355-3f69-45d5-8cc9-d6de8d6407b7" alt=""><figcaption></figcaption></figure>

### Opacity

You can decide the extent to which you want your text/content to fade in each element box. the opacity varies from None, Light, Half, to Heavy fade.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Foz6fOEh8SGbWEGk3P9UQ%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-ec6eb01ed85c088b2c148b44bd8a117e862baf35_Image%20-%20Opacity%20(1).png?alt=media&#x26;token=53556a1f-0605-4777-9953-5d7468f56ff2" alt=""><figcaption></figcaption></figure>

### Align

You can move your text in different positions as you deem fit, you can position it to the Left, Center, Right, or as Justified.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FcCrhOksuiCa8CsttprLz%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-d69e20b713125091206293e6475bab77167aeabc_Image%20-%20Text%20Align.png?alt=media&#x26;token=cf6de323-16a1-4bff-a648-85c138ca79f1" alt=""><figcaption></figcaption></figure>

### Image Option

* **Image**\
  When you click on the image icon on the right side of the space provided, it directs you to the storage page where you can upload the image you want to use. Once you've uploaded the image, click on the image, and then click on the "copy to clipboard" icon on the right upper corner of the page, beside the "delete" icon to copy the image URL.\
  Click on the "Back" button to return to the Editors' page, then paste the URL in the space provided your image will appear on the editor's space.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FeTBNv3YsZNkleFPyFoLJ%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-55cf0a2142205cd1640ba28d0eb083ad0c813765_Image%20-%20Image.png?alt=media&#x26;token=af5e6505-3924-4444-b25a-12aebb381286" alt=""><figcaption></figcaption></figure>

#### Optimize Image Load

To optimize image load, simply toggle it off. It comes with a warning, if you are sure you want to turn it off click "Ok"

{% hint style="warning" %}
Warning: If you turn off image lazy loading, it might affect your page speed. Optimizing images for your website can reduce your total page load side by up to 80%.
{% endhint %}

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F7l2zHX9mvcC1293jsgux%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-cff821c31e6c6970e4e6936c131c920ce47a3e9e_Image%20-%20Image%20Optiomise.png?alt=media&#x26;token=8e5df84c-5071-4564-acf6-ff470c7ed6c7" alt=""><figcaption></figcaption></figure>

* **Width and Height (PX)**\
  You can decide the width and Height here by inputting your desired size in the space provided.

![](https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FYQp6L0kXme8AQ3zRC18P%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-f79b8a3c87fe08ef77aae4a37ce7e4636f60344a_Image%20-%20Image%20width.png?alt=media\&token=07bd5e6a-dc25-4931-ac79-3b765e153b28)![](https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FVYkPcxK5k0jZwNS6T6qm%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-2a02a2d52fbb586f91cfa76274cf99c84c1d559d_Image%20-%20Image%20height.png?alt=media\&token=5dd424c2-4fe7-4df0-8c34-8c23803aa8d1)

* **Alt Text (For SEO!)**

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F5MDtv8b7MKuqdxv05y56%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-0d8aaa49b5675f52272bf162297d21f989e08d25_Image%20-%20Alt%20Txt.png?alt=media&#x26;token=2b296064-4f91-44de-bb6c-e15a19152334" alt=""><figcaption></figcaption></figure>

### Image Actions

You can select either the "Open the popup" or the "go to website URL"

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FwrMrGLGTRzZZSRxzevnz%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-e6c464b5fce1507b1e200cedd2df4f5b8b7392a7_Image%20-%20Image%20Actions.png?alt=media&#x26;token=739eb6fd-2ccd-431f-975e-942c7850d5c8" alt=""><figcaption></figcaption></figure>

* **Website**\
  When you select "Go to website URL" in the "Image Action" icon, it will require you to select which website page you will be settings.
* **Open In New Tab**\
  If you want the website to direct visitors to a new tab when they perform an action, simply toggle it on.

### Theme

You can select a theme from the theme options available here.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FBrlUs7AE1gWY5tflspnC%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-5b0e96f595ccaecd9b4b98ab80454522b2aeb874_Image%20-%20theme.png?alt=media&#x26;token=331290e8-a709-4056-9c87-0c6c2a3e1b98" alt=""><figcaption></figcaption></figure>

## Advanced Settings

### Image Radius

Adjusting the radius of your border curves the edges of the border, the higher the number you select, the curvier it becomes

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FmYPxQru3kyoIG9k9VCA4%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-456a4cdf695b155d02bd09234e83a73dee159ec9_Image%20-%20image%20radius.png?alt=media&#x26;token=439a9447-73a4-428f-a4d5-9ffc2b6af4e5" alt=""><figcaption></figcaption></figure>

### Image Border

You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up;

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FqYNvxJiaD6TTDFoPnyml%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-84e741838e1c925416a39cb0b2cb3664e50f04c9_Image%20-%20Image%20Border.png?alt=media&#x26;token=540ef9f1-b1c0-4e63-b34d-97200f53697a" alt=""><figcaption></figcaption></figure>

### Button Shadow

If you want your button to have a shadow, simply select how strong or light you want the shadow to be.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Fkio89MVW9TfzmpJBvbsm%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-682257fd8255eeb91fda35d3fe116f34cfc7c670_Image%20-%20Image%20Border%20radius.png?alt=media&#x26;token=42361a56-f63c-4127-9a26-f9fe205d920b" alt=""><figcaption></figcaption></figure>

### Button Effect

You can add an effect to your button by simply selecting your choice from the options.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F6PR80gm9IBiIlc6ISTmo%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-5cedc7a1640a8fef06e82c77314fc233a0190b57_Image%20-%20Image%20Color.png?alt=media&#x26;token=7d9f2263-0506-442d-a74f-2faa34eea22c" alt=""><figcaption></figcaption></figure>

### Visibility

You can make this page visible on both desktop and mobile, and you can also select just one of the two by simply clicking on the one you want to activate.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2For0ssljY6SIiRW20R3lJ%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-c7c32d6bba7f5034dfc52db95363da0471c242b7_Image%20-%20Visibilty.png?alt=media&#x26;token=2b597faa-b3a2-4fb9-ad3a-53a666f4b1d0" alt=""><figcaption></figcaption></figure>

### Custom Class

Press enter or space to add a class.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FSfH43FY1qt5r2rY8ibmO%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-61300d86563a299f54aa7e5776bc270c7840079d_Image%20-%20Custom%20Class.png?alt=media&#x26;token=d18be0a8-2138-4d7d-abda-69fe3489562f" alt=""><figcaption></figcaption></figure>

### CSS Selector

You can copy a CSS Selector by clicking on the "copy" icon on the right side of the reference number you want to copy.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FPomQQbLcLKp49xPI8mNE%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-d8260ce934dca1f42fa40ea12ac3d6c488cbb7a8_Image%20-%20CSS%20Selector.png?alt=media&#x26;token=cf2cece4-726c-44c4-9bd6-8bd1b826ea9a" alt=""><figcaption></figcaption></figure>
