Adding an individual image to a page of your site is easy with the Image component. To get started, drag the component to a page of your site then click on the component to open the options panel to the side of the editor.
Next, click on the image upload option and choose an image to upload. With that complete, there are a number of options available to control how the image displays and functions.
Link
By default, when a visitor clicks on the image it loads a fullscreen popup of the image. This also disables links for the image. If you toggle the Show Fullscreen option off, it will disable the popup and allow you to link the image. To set up a link, click on the Add Link button.
Caption & Accessibility
You can enter Alt Text and a Caption for the image within this option group. The caption will be displayed below the image, whereas the ALT text isn’t visible except in the source code of the page. Adding both will help make your site more accessible.
Size & Position
There are a few different options to control the size and position of the image:
- Size - Changing this option increases or decreases the size of the image within the content area you’ve added it. You can also manually adjust the size of the image by clicking and dragging the small blue square on the bottom right corner of the image. Note that this will override the ability to use the Size option.
- Width - With this option you can specify a specific width in pixels for the image. The height will adjust automatically so the image isn’t stretched. Note that this will override the Size option.
- Align - This option aligns the image to the left, right, or center within the component. You may need to reduce the size of the image in order to see this change.
- Aspect Ratio - This option adjusts how the image might be cropped. For example, you could upload a landscape image then choose the Square (1:1) option so the image is square-shaped.
Design
The options within this group control the following:
- Shape - By default this option inherits your overall site setting, however you can adjust it so there’s more or less rounding of the image. You can set this separately for different screen sizes by clicking the desktop/mobile icon.
- Border - With this option you can adjust the width of the image border from none to extra large.
Filters
Filters are a fun way to apply different effects to the image, such as sepia tone or blur. Simply click on a filter to apply it. To remove a filter, click on it again.
Spacing
This option group includes options for margin (the space around the image) and padding (the space between border and the image itself). Note that with padding this will reduce the size of the image. Both options can be set uniformly or on a per-side basis. They can both also be set separately for different screen sizes by clicking the desktop/mobile icon.
Hover
Finally, the component also allows you to set some of the options above separately when hovering over the component with a mouse:
- Border width, color, and style
- Filters (including disabling)
As an example, you could apply the blur filter to an image and then remove it for hover so you have the following effect: