There’s no alternative to great visuals. If you’re planning to make a site that reels users in, an appealing look works a lot. That’s where Qubely has got you covered. Today we’re introducing the shiny new Image block in Qubely. The latest block is enriched with wonderful features to create amazing visuals. With the Image block, you get a couple of layouts, responsive controls, rich personalization options and more. We will talk about all that in detail in a bit.
Before that, let’s have a quick look at the changelog for Qubely v1.0.7.
- New: Qubely Image block
- Update: Testimonial block – Rating settings UI improved
- Fix: Qubely options page issue
Qubely Image Block – All the Potentials
You must be wondering why use Qubely Image block when you have the default Gutenberg Image block. The answer is very clear. The Qubely Image block is far more advanced than the default Gutenberg Image block. There are lots of options in this Qubely block that Gutenberg’s Image block does not offer. Qubely’s Image block lets you beautify images and display them in the most stunning look possible.
What’s Inside the Qubely Image Block?
Images will never be drab if you use Qubely Image Block. There are tonnes of options that you get inside 2 different premade image layouts – Simple and Blurb.
If you want minimalistic photos on your site, then the Simple layout is the way to go. However, if adding eye-catching animation and overlay is your aim then the Blurb layout is for you.
There are many creative possibilities that you get with Qubely Image Block. Let’s have a glimpse at these below, followed by more details.
- Define image opacity, alignment, and border-radius.
- Enable box-shadow with colour customization options, blur, and spread.
- A rich collection of hover animations and style options.
- Insert frames with predesigned frame border styles with border colour, width and margin customization options.
- Extensive typography tweaking options.
- Enable overlay with gradient settings and overlay blend mode.
- Advanced options like additional CSS class and Z-index.
How to Use Qubely Image Block?
To use Qubely Image block, just write “Image” in the block search system, or visit Qubely block collection in the Gutenberg editor.
Select the Image block and then choose your preferred layout. Click on Insert Image field to insert the image you want to place.
Once you insert the image, you can begin to customize your visuals. For starters, there are two layouts in the Qubely Image Block. So let’s explore these layouts!
Simple Layout
The simple layout lets you place a static image in the given field. This is perfect if you want to place simple images across your site or blog.
Once you insert the image, you can choose how to personalize that for your site. Use the following options.
- Choose left, center, or middle alignment for the image.
- Select responsive controls for tabs, phones, and desktops.
- Place alt text for the image.
- Define image opacity.
- Choose image radius in a global format. Or you can specify a radius for each corner of the image.
- Enable/Disable Box Shadow. Customize X, Y, Blur and Spread for the box-shadow.
- Write a caption under the image by enabling the caption option. You can make advanced typography changes for the caption as well.
- You can also enable animation for the image. There are tonnes of options like fade, bounce, slide, zoom, etc.
- Access to advanced options like additional CSS class, Z-index and block raw CSS.
Blurb Layout
The blurb layout is ideal if you really want to incorporate more advanced options in your image.
There are a lot more options you get in the Blurb layout than the Simple one. Let’s have a look at all the options inside Blurb.
- Choose your preferred alignment.
- Enter an “alt” text.
- Define the opacity level.
- Give a global or corner-specific radius.
- Enable box-shadow and define the colour of the box-shadow. Select X, Y, Blur, and Spread.
- Choose if you want animation on hover over the content along with animation styles.
- Select the padding with the respective horizontal/vertical alignment.
- Title and subtitle with visibility on hover and typography settings.
- Overlay options with an option to choose gradient type, angle, hover overlay background and overlay blend mode options.
- Select a frame for your image. There are four predesigned frame border styles. You can also style the frame with colour options, width, and margin. Enable the visible on hover option for the frame as well if you wish. The option to send the frame back is in there too.
- Select animation from 7 available animation styles.
- Advanced options like additional CSS class, Z-index and block raw CSS.
There’s More!
There are a couple of tweaks inside the Qubely plugin as well. The rating settings inside the Qubely Testimonial Block has been updated. Now you’ll get an even improved UI when using the testimonial block. Moreover, the Qubely options page issues have been fixed too in today’s update.
Wrapping Up
In today’s post, you just got a glimpse of all the amazing possibilities you can achieve with Qubely Image block. By creatively using the options you get within this Qubely block, you can have next-level visuals on your site. With every block, we bring about innovative features that you would love to explore. So let us know what blocks do you want in the comments below. Your feedback might be featured in one of our future updates!
