Creative Images

Creative Images

Imagine a webpage without a single image. It’ll look like old 90’s initial web designs. Nowadays images have more reach than content. So click post-worthy portrait and paste it into your nice and creative blog.

Creative Image is a component to place an image and make customization as per requirements. We have provided some animation, masking and scroll reveal options too so that they can be used for visual attention.

Pro tip
Use JPEG instead of PNG to save some space, if you don’t care about detailing.

How to use the Creative Images Block of The Plus Addons For Gutenberg

This block is used to display Images, Masking, Animation, etc. Let’s understand how to use this block in the tutorial below.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Creative Images into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Creative Images after “/” sign, eg.“/Creative Images”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Upload Image

Select an image you want to customize & display.

Image Size

Select image size from slandered size drop down provided by the plus.

Alignment

Alignment of the image into left, center or right direction.

URL

Select the target destination on click of an image.

Max Width

A maximum horizontal expansion or normal width can be set from here. Height will be set accordingly.

Caption

Enable Caption

Want to have some text dedicated to image?

Text Content

A dedicated caption or some credit text for an image.

2. Style

The Style tab is used for customizing the appearance of all the Creative Images components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Background

Border

Draw a border around an image and give width and color to it.

Border Radius

Set the radius curve of the image’s corner.

Box Shadow

Give Box shadow effect and color to an image.

Drop Shadow

Give Drop shadow effect and color to an image.

Image Caption

Typography

Assign a size, weight, spacing and much more to fonts.

Normal Color

A color picker to assign a suitable color to the caption text.

Special Options

Creative Images (Special Options)

Scroll Reveal Image

The image will be covered with a curtain kind of color overlay and will be revealed on scroll.

Color

A color picker to assign a suitable color to the overlay curtain.

Animation Direction

The direction of the curtain opening with animation on scroll.

Scrolling Image

The image will have a scrolling animation in its base container with a fixed height on hover.

Min Height

Height selection of image’s base container for scrolling image animation.

Transition Duration

Timing to be taken to scroll image down from top to bottom.

Mask Image Shape

The original image will be masked or covered with another image and will get the shape of the masking image.

Mask Image

Masking image to mask or cover the original image.

Box Shadow

Give Box shadow effect and color to an image.

Scroll Parallax

The image will be scrolled at different rates and directions on a normal web page scroll, a visual illusion.

Move Scroll X

The image will be scrolled from left to right on a normal web page scroll.

Move Scroll Y

The image will be scrolled from up to down on a normal web page scroll.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.