The image element gives you precise control over single images on your pages and blog posts. Unlike images placed inside content blocks, the standalone image element offers advanced features including custom sizing, cropping, animations, corner styling, and automatic WebP conversion for better performance.
Key Advantages
Superior control over dimensions, cropping, and positioning. Automatic optimisation — images are converted to WebP format for faster loading. Individual animation capabilities with on-scroll triggers. Corner styling without needing external photo editing software.
Resizing Modes
Default Mode
Maintains the original image proportions while fitting the maximum width of its container column. The image scales naturally without distortion.
Shrinking with Dynamic Height
Creates responsive images that adjust proportionally to screen width. On desktop, the image displays at the set height spanning full width. On mobile, you can set a separate height using the 'Different on mobile' toggle.
Cropping with Fixed Height
The image remains unscaled but crops based on the centre point positioning. The frame stays at the designated height while maintaining full container width across all screen sizes.
Always check both desktop and mobile views to ensure the image displays correctly. Use the responsive preview in the editor to verify each device size.
Adding an Image Element
- 1Navigate to the target page in the <a href="/support/kb/the-page-editor">page editor</a>
- 2Click '+Add Element' in the page header bar
- 3Drag the Image element to your desired location
- 4Select or upload an image — choose from your library, upload from your computer, or browse free stock images
- 5Configure the settings for optimal appearance on desktop and mobile
- 6Click 'Apply' to save
Image Properties
Height — adjustable via slider or manual value. Hover effects — subtle zoom on hover. Rounded corners — apply uniform or individual corner radii. Animations — on-scroll triggers that play once. Mobile options — separate height and repositioning settings. Alt text — essential for accessibility and SEO. Links — make images clickable with internal or external URLs. Padding — adjustable for desktop and mobile independently.
Corner Styling Examples
Limecube lets you set individual corner radii for creative effects: mixed corners (different radii per corner), fully rounded (800px all corners), top arch (rounded top, square bottom), diagonal curves (alternate corners rounded), perfect circle (800px radius on a square image), and partial rounding (three rounded corners with one square).
Extra Image
The Extra Image feature lets you add a secondary image or shape overlay to your image element. Use the 'Select type' dropdown to choose between Image or Shape. When set to Image, you can browse and select an additional image to display on top of or alongside the primary image.
Extra Image settings include: Image width (percentage of the container), Mobile image width (separate width for mobile), Alignment (positioning within the container), Horizontal offset (shifts the image horizontally from its aligned position, in %), Vertical offset (shifts the image vertically from its aligned position, in %), Rotation (rotates the image by a specified number of degrees), Scroll effect (applies a scroll-based animation such as parallax), Placement (controls layering relative to other images), Hide on mobile (toggles mobile visibility), and Rounded corners (with the option to adjust each corner individually, including separate mobile corner settings).
Shape Options
When the Extra Image type is set to Shape, you can overlay a predefined shape on your image element. Shape settings include: Select shape (choose from predefined shapes such as circle or square), Shape colour (the fill colour for the shape), Shape width (percentage of the container), Mobile shape width (separate width for mobile), Alignment, Horizontal offset, Vertical offset, Rotation, Scroll effect, Placement (layering control), and Hide on mobile. Mobile-specific adjustments are also available.
Cropping & Repositioning Your Image
The cropping and repositioning tool lets you change the focus of your image so that only part of the image is displayed, and reposition the image within its frame.
Steps to Crop and Reposition
- 1Click on the image element to select it
- 2Choose the 'Cropping with Fixed Height' resize mode from the image settings
- 3Adjust the height slider or enter a manual value to set the visible frame height
- 4Drag the image within the frame to reposition the focal point
- 5Use the 'Different on mobile' toggle to set a separate height and position for mobile devices
- 6Click 'Apply' to save your changes
Advanced Options
For advanced layouts, you can set width as a percentage (with separate mobile width), configure alignment and offset values, apply rotation, enable parallax scroll effects, control layering placement, and toggle mobile visibility.
Replacing or Editing Images
Hover over an existing image to reveal options: Edit image (built-in editor), Upload (from your computer), Your images (existing library), or Free stock images (royalty-free options).
Once an image element is deleted and the page saved, the action cannot be reversed. Make sure you no longer need the element before removing it.
Was this helpful?
Related Articles
Image Galleries
Showcase images with banner sliders, grid galleries, before/after sliders, and more.
3 min read
Grid Gallery
Display images in symmetrical grid or masonry layouts with popup viewing, tagging, filtering, and drag-and-drop reordering.
5 min read
Banners and Sliders
Create eye-catching hero banners and image sliders with parallax effects, call-to-action buttons, and responsive sizing.
7 min read
Still need help?
Submit a Support Ticket