You can add images with captions to your landing page using the "Image & Caption" block.
About the "Image & Caption" block
The "Image & Caption" block is located in the right pane of the page editor.
You can use this block to add text that snuggles up with its image. Text can appear to either the right or left of an image. By default, the caption uses the paragraph font size set in your Page's Theme.
Image files we support are jpg, png, and gif. The maximum size of these files is 5 MB.
Like other blocks, you can add, edit, duplicate, and remove an "Image & Caption" 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.
Add an image and caption to your page
1. From the page editor, drag the "Image & Caption" 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.
- Double-click the text that appears to the right of the image to select it
- Type the caption you wish to display next to the image
Note that you can use the modal toolbar that appears to apply styling to the caption.
4. Click the checkmark button in the top right bar to save your work.
Style and edit the"Image & Caption" block
When you click the "Image & Caption" block on the page editor, the right pane will display editing options:
Width
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.
Caption Position
Change the position of the caption to the left or right of the image.
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.
Background
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.
Border
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
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.
Inner Shadow
Access inner shadows on the selected image. Here you can choose where the inner shadow should appear and set the Offset, Blur, and Spread fields. You can add as many inner shadows as you want by clicking the plus (+) sign in the right bar in the "Inner Shadow" section.
Opacity
By default, an image & caption is opaque (opacity 100%). Drag the grey "O" left or right to change the opacity.
Duplicate a "Image & Caption" 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 a "Image & Caption" 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.