# Image Feature

## 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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-7a3aae5ee7540cd3af94c34375d55234290ff49c%2FImage%20Feature%20-%20Title.png?alt=media)

### Text Shadow

If you want your text/content to have a shadow, simply select how thick or light you want the shadow to be.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-1a649cef1b48d0c0c31b75a0ca8a8cec00981618%2FImage%20Feature%20-%20Text%20Shadow.png?alt=media)

### Letter Spacing

You can decide how wide apart you want your letter to be by clicking on this option.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-9e0f27aae5b5f1a93ff49f0fb51c3c867e312685%2FImage%20Feature%20-%20Letter%20Spacing.png?alt=media)

### Background Color

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

If you didn't find your color, you can also add custom colors if you have the color code of the exact color you are going for, just type it in the space provided and click "add color".

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-1fe6ee5d898a971dfb546e8087ffbab662df8c50%2FImage%20Feature%20-%20BG%20Color.png?alt=media)

### 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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-da3da12186fe066da8e2d51c77e71c8034656867%2FImage%20Feature%20-%20Text%20Align.png?alt=media)

### Typography Type

Here you can edit the font of the button text/content.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-cd5eefb4924f6a64d97eca6256a422f70f02d023%2FImage%20Feature%20-%20Typogaphy%20type.png?alt=media)

### 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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-71a0abdf72a996b7d3b52b18a7bbe41d554f5aa0%2FImage%20Feature%20-%20Image%20Options.png?alt=media)

* **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="info" %}
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 %}

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

### Icon

You can add an icon to your page by simply selecting from the available icon. If you have the desired icon in mind, you can type it into the search bar to narrow down the options.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-c21c861b3650253fc1224302e73e172cb6a285ef%2FImage%20Feature%20-%20Icon.png?alt=media)

### Color Options

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-61c47389f44dd7f034eb3189fc4781252c8c9839%2FImage%20Feature%20-%20Color%20option.png?alt=media)

### Headline Color

You can only adjust the headline color of the image feature here, For example, the "Feature Headline" text

#### Text Color

When you add text to your image feature, you can only adjust the color here.

#### Link Text Color

When you add a link to your image feature, you can only adjust the color here.

### Spacing Options

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

* **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.

### Image Feature Options

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-f49282a7fdfda7746e6fb92d9f4eea329c25e538%2FImage%20Feature%20-%20Image%20feature%20options.png?alt=media)

### Column Sizes

This will help you increase the size of the text and image.

#### Column Order

You can decide to arrange your image feature as "text before image" or "image before the text".

### Actions

#### Image Action

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-0cf453cfc994eb7d50c201ecbc69f340ecb44e5f%2FImage%20Feature%20-%20Action.png?alt=media)

* **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.

## Font Size Options

**Desktop and Mobile Headline Font Size**

You can adjust the mobile and desktop headline font sizes of your minute timer simply by adjusting the size bars.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-56713c7b17a5d1201907a7631c59eb5432fa30fa%2FImage%20Feature%20-%20Desktop%20Headline%20font%20size.png?alt=media)

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-932030bdb0d0f58ea413069323e1549f267e626e%2FImage%20Feature%20-%20Mobile%20Headline%20font%20size.png?alt=media)

**Desktop and Mobile Text Font Size**

You can adjust the mobile and desktop text font sizes of your minute timer simply by adjusting the size bars.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-523333c37914168a915e5a4c9a32ef404667e0d5%2FImage%20Feature%20-%20Desktop%20text%20font%20size.png?alt=media)

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-8df3665b090c4c335222f24dabfa2ed63233b79d%2FImage%20Feature%20-%20Mobile%20text%20font%20size.png?alt=media)

### Theme

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-d6f7b88a6de02b5cb4de2f34a281ddd8777b65e2%2FImage%20Feature%20-%20Theme.png?alt=media)

## Advanced Settings

### Height Line

You increase the height of the Element box by adjusting the size bar.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-32d0786abd6f0304da48cf5b4f8990269cfa4249%2FImage%20Feature%20-%20Line%20Height.png?alt=media)

### Feature 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;

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-a29e48779e29d3d312647808cbd35e89161cffe2%2FImage%20Feature%20-%20Feature%20image%20border.png?alt=media)

### Image Radius

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-d09e81979d5ca23127a9fd3426a559f1d782f922%2FImage%20Feature%20-%20Image%20Radius.png?alt=media)

### Image Shadow

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-cc8629dbcce9f676ac74e1bcb74c59bf1be1ffbd%2FImage%20Feature%20-%20Image%20Shadow.png?alt=media)

### Image Effects

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-567a1a2bdd5735338c12cda3fe8be77d2cff1fd2%2FImage%20Feature%20-%20Image%20Effeccts.png?alt=media)

### Visibility

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-05b06047ac0782a7c26b9c8a7dee857c759981d5%2FImage%20Feature%20-%20Visibilty.png?alt=media)

### Custom Class

Input your custom class here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-679eba98c123f6d408c447d40d0418979cca1ee5%2FImage%20Feature%20-%20Custom%20Class.png?alt=media)

### CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-b9fff09a989a3ff24e9495204d00e8eab9467d1a%2FImage%20Feature%20-%20CSS%20Selector.png?alt=media)
