You can add images to your page using the "Image" block.
In this article:
- About the "Image" block
- Add an image to your page
- Style and edit the "Image" block
- Duplicate an image
- Delete an image
About the "Image" block
The "Image" block is located in the right pane of the page editor.
Like other blocks, you can add, edit, duplicate, and remove an "Image" block to any page layout.
While you can add as many of these blocks as you like to your page, it's important to note that they can take up a lot of memory. This can result in your page loading slowly for site visitors.
Image files we support are jpg, png, and gif. The maximum size of these files is 5 mb.
Add an image to your page
1. From the page editor, drag the "Image" block to your page layout.
2. A modal window will open where you can select the image you wish to use. To do so:
- Click the image
- Click the "Use Image" button
Note that you can upload an image file to the file manager by clicking the "Upload" option.
3. The page editor will display the selected image in the block. Click the block in your page layout to open its style and edit options. You can use these options to add Alt Text, add a click action, and more.
4. When finished styling the "Image" block, click the checkmark button.
Style and edit the "Image" block
When you click the "Image" block on the page editor, the right pane will display editing options:
Image width can be set by either px or %.
- Replace, Edit, and Alt Text
Change, edit, and add alt text for this image. Alt text is used when the image cannot be displayed on the device that's viewing this page.
- Image On Click
Make something happen when this image is clicked. By default, it is set to "None" - nothing happens when it is clicked. To make something happen, choose from one of the options in the "On Click" dropdown: Open Link, Jump to Section, Download File, Print Image, Call Phone, Send Email.
You can add the following to a background: color, gradient, image, and video. Add as many backgrounds to your image as you like. Backgrounds stack in the order in which you add them. You can change their order by dragging them.
- Inner spacing
Increase or decrease the amount of inner spacing by typing the number or dragging the input field left or right.
Borders can be set using pixels. You can choose which sides have borders. To do so, click the side of the border icon in the right bar you wish to apply a border to. You can pick one of three types of borders: solid, dashed, or dotted. Initially, it's set to solid. Note that you can also add color to borders. To do so, click the color tile then click the color you wish to apply to the border.
Corners are set by either px or %. You can apply a new radius to one, some, or all corners of your image. To do so, click the corner of the corner icon in the right bar you wish to adjust the radius for.
- Drop Shadow
Access drop shadows on the selected image. Here you can choose where the drop shadow should appear and set the Offset, Blur, and Spread fields. You can add as many drop shadows as you want by clicking the plus (+) sign in the right bar in the "Drop Shadow" section.
By default, an image & caption is opaque (opacity 100%). Drag the grey "O" left or right to change opacity.
Duplicate an "Image" block
You can duplicate any block on your page. To do so click the block you wish to duplicate on your page then click the duplicate icon in the top right bar.
Delete an "Image" block
You can delete any block from a page. To do so, click the block you wish to remove then click the trash icon in the top right bar.