Creative Images

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

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

Configuration for Creative Images

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

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 widgets panel.

After placing the widget 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 customise & display.

Image Size

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

Alignment

Alignment of image into left, centre or right direction.

URL

Select the target destination on click of an image.

Max Width

A maximum horizontal expansion or normally 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 customising the appearance of all the Creative Images component. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. 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/Text/Drop shadow effect and color to an image.

Image Caption

Typography

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

Normal Color

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

Special Options

Scroll Reveal Image

Image will be covered with curtain kind of color overlay and will be revealed on scroll.

Color

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

Animation Direction

Direction of curtain opening with animation on scroll.

Scrolling Image

Image will have scrolling animation in it’s base container with fix 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

Original image will be masked or covered with another image and will get shape of 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

Image will be scrolled at different rate and direction on normal web page scroll, a visual illusion.

Move Scroll X

Image will be scrolled from left to right on normal web page scroll.

Move Scroll Y

Image will be scrolled from up to down on normal web page scroll.

3. Advanced

Advanced Tab Options are common across all the widgets. 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?