Image Styling

The Image is a simple visual element used for attracting attention, conveying messages, and supporting the overall look and feel of the web page.

It can be added in a few ways:

• by choosing from your library (of previous uploads);
• by pulling it from Salesforce;
• by uploading it from your device; or
• by specifying a URL.

The Image element has an Overlay option that allows a user to add a color or image to act as a filter or effect on top of the image.

This Image element can be broken down into two parts, which can be styled individually, for example, Image Border and Shadow or Overlay Fill.

This element can be edited on both the Project Style Level and Element Style Level. 

#	Option	Function	Available in Project or Element
1	Image	This Image option enables you to set general properties that affect the image as a whole. For instance, the image size, its opacity, border, or position.
2	Overlay	The Overlay option allows you to create a filter or effect above the image by setting a partially transparent color or image on top of it.

1. Image

This option enables you to set general properties that affect the image as a whole.

#	Option	Function	Available in Project or Element
1	Fill	The Fill setting allows you to set the opacity level of the image. This setting also provides a “Fit Image” option that fills the given container dimensions while keeping the image aspect ratio intact. If the image is larger than the container, it will be clipped to fit it.
2	Position	The Position option enables you to change the image location on the x and y-axis of the strip (left/right/top/bottom). This option also allows you to make an Image element float over its parent container or over the entire page. Float over Parent allows you to set the location of an image within the box containing it, for instance, the container or strip. Float over Page allows you to set the location of an image inside the entire page and have it stay in the same location even when the user scrolls over it.
3	Size	This option allows you to change the width and height of the Image element.
4	Margin	This option allows you to set the outer space between the label and adjacent element parts.
5	Alignment	Use Alignment to set the Image element to a vertical or horizontal position in relation to its container (left/center/right/top/middle/bottom). It also allows you to set the position of a few elements in relation to each other.
6	Border	This setting refers to the outer contour of the image’s container. It allows you to make the border visible or invisible, and change the width, color, corner radius, and more. You can also change the style of the border to lines, dashes, or dots. Use the Border option to create separate border styles per container side (left/right/top/bottom).
7	Shadow	Shadow gives you the ability to add an Inner or Outer shadow effect to the Image container. You can set the X and Y offsets of the shadow as well as its blur and spread radius.
8	User CSS	Cascading Style Sheets (CSS) allows you to apply styles to an Image via CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article.

2. Overlay

The Overlay option allows you to create a filter or effect above the image by setting a partially transparent color or image on top of it. 

It also allows you to make the image look interactive by using three overlay states: Default, Hover and Clicked, enabling you to give end users an indication of when they are hovering or clicking on the image.

Default refers to the basic state of an image when it is not hovered upon or clicked but simply visible, while Hover is the state of the image once the user hovers over it with the mouse. Clicked refers to the state of the image when the user clicks on it. You can create an effect for the image by setting different values in these three states.

#	Option	Function	Available in Project or Element
1	Fill	This allows you to select a color or image and set its opacity level.
2	Border	This setting refers to the contour of the overlay layer. It allows you to make the border visible or invisible, and change the width, color, corner radius, and more. The border can be styled as a whole or separated into the top, bottom, left, and right border lines with this option.