Image & caption components are media elements. Image & caption components, like all other elements, are contained within columns. The image & caption component is located in the Right Pane - it looks like this:
Adding an Image & Caption
Like all components in Landing Lion, you can add an image to any page variant or page template by dragging it from the Right Pane and dropping it on the Canvas. There is no limit to the number of image & caption components you can add.
⚠️ Caution: the more images you add the heavier your page gets - causing your page to load slowly.
To add an image & caption to a page variant or page template the image must first be uploaded to your Workspace's files. Once an image & caption is dropped on the Canvas a modal will enter containing your files - prompting you to select an image you have uploaded.
Relying on a 3rd party to host your images can put your SEO at risk - putting your page in a situation where it must depend on someone else. If that 3rd party goes down, your page will not look pleasant. To prevent this, we host all your images - for free.
By default, the caption uses the paragraph font size set in your Page's Theme.
Selecting an Image & Caption
To select an image & caption in Landing Lion the Selection Tool must be set to "Auto" or "Element".
Editing an Image & Caption
Edit a selected image & caption in the Right Pane of the Page Editor:
- Full Width On Mobile - toggle this to dictate whether your image & caption should occupy the entire width of its column or maintain the size set under "Width" - when its viewed on a mobile device. Switch your Viewing Mode to see what your image & caption will look like on a mobile device.
- Width - adjust the width of your image & caption. Width is either relative (a percentage), absolute (to the px), or auto. By default, it's set to be px. Click the "px" in the input field if you want to change it to "%" or "auto".
- 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.
- 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 - add as many backgrounds as you want. Backgrounds stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Border - borders can be set by either px or %. You can choose which sides have borders and set a radius. You can pick one of the three types of borders: solid, dashed, dotted. Initially, it is set to solid.
- Drop Shadow - access drop shadows on the selected image & caption. You can add as many drop shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Inner Shadow - access inner shadows on the selected image & caption. You can add as many inner shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Opacity - by default, an image & caption is opaque (opacity 100%). Drag the grey o left or right to change opacity.
Here we have set the on click event to "Open Link":
After you choose something to happen "On Click", custom configurations become available. Every on click event available has the option to be tracked as a conversion and linked to a Conversion Event. These conversions and conversion events are added to your Reports.
Duplicating an Image & Caption
Duplicate a selected image & caption by clicking this duplicate icon in the Top Right Bar:
🦁🔑⚠️ Lion Key Alert: use the keyboard shortcut to duplicate an image & caption (or any component). Use ⌘D for Mac and Ctrl-D for PC.
Removing an Image & Caption
Remove a selected image & caption by pressing backspace or clicking this trash icon in the Top Right Bar: