Image Content Blocks & Galleries

This guide provides an overview of the various image block options available to enhance your website's content. By strategically using these blocks, you can create visually engaging pages that stand out and provide a better user experience.

(note this is sped up 30% but if you'd like the original that's here on Loom)

Common Image Block Types

Image Gallery: Display a collection of images in a grid or scrollable format. Choose horizontal scrolling for a series of related visuals, or grid layout for a clean organised appearance. Best for event photos, product displays, or themed collections.

Instagram Integration: Display Instagram feeds directly on your site using a widget. Input your Instagram handle and widget ID, then paste the widget code into the block.

Image and Text Carousel: Combine images with text in a horizontal carousel. Supports autoplay, full-width display, dark/light themes. Best for logos, awards, press coverage, or promotions.

Image Section: Display one or more images with optional titles and intros. Adding multiple images creates a slider.

Advanced Image Layouts

Masonry Gallery: A visually modern gallery where images are tightly packed in varied sizes. Add images in different aspect ratios and adjust settings for pagination and layout.

Image Marquee Scroller: A scrolling banner of images with links. Enable "Pause on Hover" for better usability. Best for eye-catching interactive banners.

Themed Background Image Blocks

Background Image Section: Use images as backgrounds with overlay text and links. Enable "Full Height" for a more immersive effect.

Fixed Background Section: Add a background that stays static while content scrolls. Adjust tints and themes for readability.

Split Image Section: Combine text and images in panels for an engaging side-by-side layout. Adjust alignment and theming for each panel.

Tips for Using Image Blocks Effectively

• Match the block type to your images and messaging.
• Choose tints and themes to maintain text clarity over images.
• Check layouts on mobile and desktop for consistent user experience.
• Test new layouts on a staging page before going live.

Created by Neil Lewin, Modified on Mon, 9 Mar at 9:38 PM by Neil Lewin