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 blocks allow you to add images in different formats, layouts, and styles to your website. These options are highly customisable, making it easy to showcase photos, logos, or themed visuals across your site.
Image Gallery
- Purpose: Display a collection of images in a grid or scrollable format.
- Setup:
- Add the Image Gallery block.
- Upload multiple images.
- Choose between horizontal scrolling or grid layout in the settings.
- Customisation:
- Use grid layout for a clean, organised appearance.
- Horizontal scrolling is ideal for showcasing a series of related visuals.
- Best For: Event photos, product displays, or themed image collections.
Instagram Integration
- Purpose: Display Instagram feeds directly on your site using a widget.
- Setup:
- Input your Instagram handle and widget ID (e.g., from Light Widget).
- Copy and paste the widget code into the block.
- Best For: Keeping your site dynamic by showcasing fresh content from Instagram.
Image and Text Carousel
- Purpose: Combine images with text in a horizontal carousel format.
- Setup:
- Add images and corresponding text.
- Enable settings like autoplay or full-width display.
- Customisation:
- Use dark or light themes for contrast.
- Ideal for logos, awards, or featured content.
- Best For: Highlighting brand achievements, press coverage, or promotions.
Image Section
- Purpose: Display one or more images with optional titles and intros.
- Setup:
- Add a single image or multiple images to create a slider.
- Include text content for context.
- Best For: Simpler layouts requiring one or a few images.
Advanced Image Layouts
Masonry Gallery
- Purpose: Create a visually modern gallery where images are tightly packed in varied sizes.
- Setup:
- Add images in different aspect ratios.
- Adjust settings for pagination and layout.
- Best For: Displaying diverse image collections in a stylish, contemporary format.
Image Marquee Scroller
- Purpose: Add a scrolling banner of images.
- Setup:
- Add images with links.
- Enable settings like "Pause on Hover" for better usability.
- Best For: Creating eye-catching, interactive banners.
Themed Background Image Blocks
Background Image Section
- Purpose: Use images as backgrounds with overlay text and links.
- Setup:
- Add an image and optional text.
- Enable "Full Height" for a more immersive effect.
- Best For: Thematic sections or feature panels.
Fixed Background Section
- Purpose: Add a background that stays static while content scrolls.
- Setup:
- Add an image or video as the background.
- Adjust tints and themes for readability.
- Best For: Creating depth and a layered effect.
Split Image Section
- Purpose: Combine text and images in panels for an engaging layout.
- Setup:
- Add panels with images and text.
- Adjust settings for alignment and theming.
- Best For: Highlighting specific features or services in a side-by-side format.
Tips for Using Image Blocks Effectively
- Match Layout to Content: Use the block type that best complements your images and messaging.
- Ensure Readability: Choose tints and themes to maintain text clarity over images.
- Test Responsiveness: Check layouts on mobile and desktop for consistent user experience.
- Experiment Safely: Test new layouts on a staging page to ensure they fit your site’s style.
Final Thoughts
From image galleries to immersive background sections, the variety of image blocks available allows you to build visually stunning pages that captivate your audience. Explore the different settings, try out combinations, and don’t hesitate to reach out if you need assistance.
Thanks for reading, and happy designing!
