Image - Basic

The Image - Basic block is a versatile tool designed to enhance the visual presentation of images within various sections of a theme. It offers customizable settings for image alignment, style, size, and overlay, allowing users to tailor the appearance of images to fit their site's aesthetic. With options for both desktop and mobile views, the block ensures a consistent and responsive design across devices.

Key features include alignment settings for precise image positioning, style options such as rounded corners or circular images, and adjustable aspect ratios to maintain the intended look. Users can also add interactive elements like clickable links and border colors, as well as overlay settings to enhance image focus.

The Image - Basic block is available in sections such as Footer navigation, Product information, and Featured product. Practical usage examples include displaying product images with consistent styling, highlighting featured products with attention-grabbing overlays, and adding decorative images with links to enhance navigation. These features enable users to create visually appealing and responsive image displays that elevate the overall site design.

Overview #

The Image - Basic block is designed to provide a flexible and customizable image display within various sections of a theme. This block allows users to adjust image alignment, style, size, and additional overlay and visibility settings to enhance the visual presentation of images on their site.

Key components and functionality #

Alignment settings

Alignment settings allow you to control the horizontal alignment of images on both desktop and mobile devices, ensuring a consistent visual experience across different platforms.

• Alignment - Desktop: Adjusts the image alignment for desktop views.
• Alignment - Mobile: Adjusts the image alignment for mobile views.

Image settings

Image settings enable you to select and style the image displayed in the block, providing options to customize the appearance and dimensions of the image.

• Image: Choose the image to display.
• Image style: Select the style of the image. Options include:
  • Default
  • Rounded corners
  • Circle
• Max image width: Set the maximum width of the image. The range is from 0 to 1600 pixels, with a default of 0, which stretches the image to the full available width.

Aspect ratio

Aspect ratio settings allow you to control the proportions of the image for both desktop and mobile views, ensuring the image maintains its intended look across devices.

• Aspect ratio: Choose from options like default, landscape, portrait, square, ultrawide, and widescreen. The default is default.
• Aspect ratio - Mobile: Similar options as desktop, with a default of default.

Border and link settings

These settings allow you to add a border color and link to the image, enhancing interactivity and visual appeal.

• Border color: Set the color of the image border.
• Link: Add a URL to make the image clickable.
• Open link in a new tab: Choose whether the link opens in a new tab. The default is false.

Overlay settings

Overlay settings provide options to add a color overlay to the image, enhancing its appearance and focus.

• Overlay color: Choose a solid color for the overlay.
• Overlay gradient: Select a gradient overlay.
• Overlay opacity: Adjust the opacity of the overlay from 0% to 100%, with a default of 48%.

Visibility settings

Visibility settings control the display of the image block on different devices, allowing for tailored user experiences.

• Visibility: Options include:
  • Do not hide
  • Hide on desktop
  • Hide on mobile
  • The default is do not hide.

Available in sections #

• Footer navigation
• Product information
• Featured product

Usage examples #

1. Product information section: Use the Image - Basic block to display product images with a consistent style and alignment across devices.
2. Featured product section: Highlight a featured product with a circular image style and a gradient overlay to draw attention.
3. Footer navigation section: Add a decorative image with a link to another page, using the border and link settings to enhance navigation.

By utilizing these settings, users can create visually appealing and responsive image displays that enhance the overall aesthetic of their site.