Image Box Widget

Table of Contents

Share This Post

🎯 Purpose

The Image Box widget allows you to display an image, a title, and a description together in a clean, structured layout. It’s ideal for presenting services, team members, features, benefits, or any content block that requires visual and textual elements combined.


⚙️ Main Features

  • Content Setup
    You can upload or select an image, add a heading, write a short description, and include an optional clickable link. There’s also the ability to control whether the link opens in a new tab and whether it’s marked as nofollow.

  • Image Positioning
    Choose where the image appears in relation to the text—above, left, or right. This gives you layout flexibility depending on the surrounding content or design goals.

  • Image Size Control
    Choose from preset sizes (thumbnail, medium, full, etc.) or define a custom size to maintain image consistency across widgets.


🎨 Styling Options

  • Image Styling
    Adjust the size, alignment, spacing, border radius, and apply hover animations such as grow, shrink, bounce, or fade. You can also apply CSS filters like blur, brightness, or grayscale for visual effects.

  • Title and Description Styling
    Customize typography (font family, size, weight, transform, spacing), color, alignment, and shadows. You can also control spacing between the title and description and apply different styles for normal and hover states.


📱 Responsive Control

Each part of the widget—image, title, and description—can be styled separately for desktop, tablet, and mobile views. This ensures your content looks great on any device.


🧰 Advanced Options

  • Add motion effects (like scroll animations), custom margins and padding, background overlays, or custom CSS.

  • Use custom positioning and z-index settings to layer the widget in creative ways within more complex layouts.


✅ Best Practices

  • Use consistent image sizes and alignment across similar widgets to maintain a cohesive design.

  • Optimize images for fast loading without sacrificing quality.

  • Match hover effects and typography with your brand or site theme.

  • Ensure titles use semantic HTML tags (like H2 or H3) for accessibility and SEO.

  • Always preview and test the widget on different devices.


The Image Box widget is a powerful and easy-to-use tool that helps you visually present content in a compact, stylish way—blending imagery with text to create engaging user experiences.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Designing for Global Audiences: Internationalization & Localization

Guiding Principles of IA: Structuring Websites for Clarity & Growth

Next-Gen Information Architecture: Psychology, Ethics & Omnichannel

Persona-Driven UX: Turning Research Into User-Centered Design

The Psychology of Trust: Unlocking Credibility in Web Design

List of Categories

Contact Us

Big-agency quality without the big-agency cost — welcome to Flagship Websites

Start Your Website Design Journey with Free AI Wireframes & Mockups!

Your information is 100% confidential. After you submit, our design team will contact you within 24 hours.