Image Element

Image

You can incorporate an image into your page.

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.

Spacing Option:

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.

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.

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.

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.

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.
  
  
• 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"
  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%.
  ****
  
  
  
• 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!)

Image Actions

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

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

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

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;

Image Shadow

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

Image Effect

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

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.

Custom Class

Press enter or space to add a class.

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.