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.
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.
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.
Select an image you want to customise & display.
Select image size from slandered size drop down provided by the plus.
Alignment of image into left, centre or right direction.
Select the target destination on click of an image.
A maximum horizontal expansion or normally width can be set from here. Height will be set accordingly.
Enable Caption ⭐
Want to have some text dedicated to image ?
Text Content ⭐
A dedicated caption or some credit text for an image.
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
Draw a border around an image and give width and color to it.
Set the radius curve of the image’s corner.
Give Box/Text/Drop shadow effect and color to an image.
Image Caption ⭐
Assign size, weight, spacing and much more to fonts.
A color picker to assign suitable color to the caption text.
Scroll Reveal Image ⭐
Image will be covered with curtain kind of color overlay and will be revealed on scroll.
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.
Masking image to mask or cover the original image.
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.