Images are media elements. Images, and all other elements, are contained within columns. The image component is located in the Right Pane - it looks like this:
Adding an Image
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 images you can add.
⚠️ Caution: the more images you add the heavier your page gets - causing your page to load slowly.
To add an image to a page variant or page template it must first be uploaded to your Workspace's files. Once an image 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.
Selecting an Image
To select an image in Landing Lion the Selection Tool must be set to "Auto" or "Element".
Editing an Image
Edit a selected image in the Right Pane of the Page Editor:
- Full Width On Mobile - toggle this to dictate whether your image 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 will look like on a mobile device.
- Width - adjust the width of your image. 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 viewing this page.
- 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.
- 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 - 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 - 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 - newly added image & caption components are 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
Duplicate a selected image by clicking this duplicate icon in the Top Right Bar:
🦁🔑⚠️ Lion Key Alert: use the keyboard shortcut to duplicate an image (or any component). Use ⌘D for Mac and Ctrl-D for PC.
Removing an Image
Remove a selected image by pressing backspace or clicking this trash icon in the Top Right Bar: