Your website’s images tell a story before visitors read a single word. A sharp product photo can turn browsers into buyers. A well-styled hero image can make someone trust your brand instantly. But here’s the problem: WordPress’s default Image block gives you the basics and nothing more.
Want to add shadows that make your images stand out? Can’t do it. Need to overlay text on images for call-to-action sections? Not an option. Looking to adjust how images display on mobile versus desktop? The default block won’t help.
The Advanced Image block from bBlocks solves this. You get professional image styling right inside the WordPress editor. Control borders, shadows, overlays, and responsive behavior without writing a single line of code.
In this guide, you’ll learn how to use the Advanced Image block to design a stunning visual experience for your WordPress website.
Let’s dive in.
Why Use the Advanced Image Block
The core WordPress Image block handles the basics. You can upload a photo, add alt text, maybe add a caption, and you’re done.
But what if you want rounded corners? Custom shadows? An overlay effect that makes your text pop? Suddenly, you’re stuck.
The Advanced Image block fills that gap. It gives you styling controls that usually require custom CSS or a page builder plugin. You get borders, hover effects, responsive adjustments, and more through a clean interface that feels natural if you’ve used Gutenberg before.
This matters for anyone who cares about their site’s appearance. A food blogger can add subtle shadows to recipe photos. A photographer can create stunning portfolio grids with custom spacing.
A business owner can build eye-catching call-to-action sections without hiring a developer. The block adapts to your needs instead of forcing you to work around its limitations.
Read also How to Use Row Block to Design Responsive Layouts in WordPress.
How to Use Advanced Image Block in WordPress
In this section, we will provide a step-by-step guide on how to use the Advanced Image block in your WordPress project.
Installing and Activating the bBlocks Plugin
Before you can use the Advanced Image block, you need the bBlocks plugin installed.
Here’s how to get it running.
Head to your WordPress dashboard and find Plugins in the left sidebar. Click Add New at the top of the page. You’ll see a search box in the upper right corner. Type “bBlocks” and hit enter.
The plugin should appear in the results. Click the Install Now button next to it. WordPress will automatically download and install the plugin.
Once that finishes, the button changes to Activate. Click it. Done. The Advanced Image block and other bBlocks features are now available in your editor.
You can also check the following video tutorial.
Adding the Advanced Image Block to a Post or Page
Open any post or page in the Gutenberg editor. If you’re starting fresh, create a new post from Pages > Add New in your dashboard.
Look for the plus icon (+) in the top left corner of the editor, or click the plus icon that appears when you hover between existing blocks. This opens the block inserter panel.
Type “Advanced Image” in the search box. The block will appear in the results. Click it once, and WordPress drops it into your content. You’ll see a placeholder waiting for your image.
Simple as that. No complicated setup, no hidden menus.
Uploading or Selecting an Image
Now comes the fun part: adding your image. You have two options here. You can choose a custom image or add your post’s featured image.
You can upload the image from your media library or use the image source link.
In the block sidebar under General settings, you will find options to set your image source, style, and size.
To add an image caption, you need to activate the Caption setting from the General tab.
Styling Options
Under the block sidebar Style tab, you will find the image styling settings, such as image, caption, and animation.
Go to Style>Image area to add the Width of your image, enable the Auto Height option, and the Alignment. You can also enable Auto Fit, like cover, contain, and fill, and add a Hover Effect to the image.
Note: Each setting gives you the option to add a different style for desktop, tablet, and mobile for a better responsive design.
This block offers a full suite of styling options to make your image captions look professional and polished.
You can easily customize the typography and colors, adjust the width, and control both horizontal and vertical alignment. Additionally, you can fine-tune the margins to create the perfect amount of spacing between your image and its description.
Adding the right animation effects to an image significantly enhances the user experience. The Advanced Image block is designed with this in mind, offering a variety of animation types alongside necessary control. You can easily customize the interaction trigger, duration, and delay to create the perfect visual flow.
Advanced Styling Options
Take full creative control over your visuals with our Advanced Styling suite. These tools go beyond basic placement, allowing you to fine-tune every aesthetic and functional detail of your image.
Key Styling Categories
- Dimension: Define the exact scale, aspect ratio, and padding of your image containers.
- Background: Apply colors, gradients, or secondary textures behind your visuals for added depth.
- Border & Shadow: Create separation and “pop” with customizable strokes, rounded corners, and realistic drop shadows.
- Animation: Bring your page to life with entrance effects, hover states, and precise timing controls.
- Visibility: Toggle element display based on user roles or specific page conditions.
- Responsive Control: Ensure a flawless layout by adjusting styles specifically for mobile, tablet, and desktop views.
- Custom CSS: For the ultimate flexibility, inject your own code snippets to achieve unique, one-of-a-kind designs.
The Dimension settings offer full control over the image’s sizing and spacing. You can set precise width and minimum & maximum height constraints while maintaining the Padding and Margin to ensure perfect alignment and breathing room within your layout.
Customize your image background by adding a unique color or a background image with an overlay. You can also apply a border, set a custom shadow for depth, and adjust the border radius to create a more appealing look.
You can add scroll-based animations to your image directly through the Advanced > Animation settings. Also, choose from various effects and adjust the duration and delay to create a smooth, eye-catching experience for your users.
Control how and where your image appears with the Visibility and Responsive settings. You can manage the Z-Index to layer elements correctly and set the Overflow to handle content that exceeds its container.
Use the Responsive Control toggles to hide the image on specific devices like desktops, tablets, or mobiles for a cleaner mobile experience.
Finally, use the Custom CSS field to add your own unique code for styling that goes beyond the standard options.
Once you finish customizing your image, click the Publish button to save your changes and take your page live.
Now, visit your website to see the final preview of your section in action.
That’s it.
Best Practices for Performance
Beautiful images mean nothing if your page takes 30 seconds to load. People will leave before they see your carefully styled Advanced Image blocks.
Compress your images before uploading. Tools like TinyPNG or ShortPixel reduce file sizes by 50-80% without visible quality loss. A 2MB photo might look identical to a 400KB version, but that 400KB file loads five times faster.
WordPress generates multiple image sizes automatically, but the Advanced Image block gives you fine-grained control. Use it wisely. Don’t force a 2000-pixel-wide image into a 400-pixel container. Upload appropriately sized files from the start.
Many WordPress themes and plugins support lazy loading now. This delays loading images until users scroll near them. If you have a long post with 20 images, lazy loading means visitors only download the images they actually see. Check your theme settings or consider a performance plugin if this isn’t enabled by default.
One more thing: modern image formats like WebP offer better compression than old JPEGs. Some hosting providers convert images automatically. If yours doesn’t, plugins like Imagify or EWWW Image Optimizer can handle the conversion.
Check also How to Use Advanced Post Block to Design Beautiful Post Layouts.
Wrapping Up
The Advanced Image block gives you control over how your images look and perform. Now you can create the polished, high-converting visuals that keep visitors on your site and drive them to take action.
Better-styled images mean visitors stay longer on your pages. Professional overlays make your calls-to-action impossible to miss. Optimized mobile images load faster, reducing bounce rates. Hover effects guide attention exactly where you want it.
Start with one post. Add the block, upload an image, and apply your first styling option. You’ll see the impact immediately. Then layer in overlays for your hero sections. Add responsive controls so mobile visitors get the best experience. Test hover effects on your most important images.
Each improvement makes your site more effective. Images that once sat quietly in your content now actively support your goals, whether that’s selling products, building your email list, or establishing your expertise.
Install bBlocks, open the editor, and transform your first image. The difference shows up in how visitors interact with your site.
Leave a Reply