Divi Hacks Plugin

Examples & Documentation

Image Shapes

These classes will turn the image module into a shape.

Element Shape classes

image-wide-bottom-trapezoid
image-wide-top-trapezoid
image-wide-right-trapezoid
image-wide-left-trapezoid
image-polygon-top-left
image-polygon-top-right
image-polygon-bottom-left
image-polygon-bottom-right
image-vertical-skew-right
image-vertical-skew-left
image-horizontal-skew-right
image-horizontal-skew-left

image-chevron-right
image-chevron-left
image-chevron-up
image-chevron-down
image-vertical-hexagon
image-horizonal-hexagon
image-warp-square
image-diamond
image-star

image-slant-up-right
image-slant-up-left
image-slant-down-right
image-slant-down-left
image-slant-right-top
image-slant-right-bottom
image-slant-left-top
image-slant-left-bottom
image-point-up
image-point-down
image-point-right
image-point-left

Usage

Add any of the classes to Image Settings > Advanced tab > CSS ID & Classes > CSS Class.

These hacks use the css clip-path property to ‘crop’ out the edges to give the image a new shape.

Use with

Image Module

Design

Scroll down to the star shape to see how to add a drop shadow to the images.

Notes

These hacks will NOT work on Internet Explorer or Microsoft Edge because they don’t support the clip-path css property. Instead, it will just show the image without the shape clipping.

Examples

image-point-up

image-point-right

image-point-down

image-point-left

image-wide-bottom-trapezoid

image-wide-top-trapezoid

image-wide-right-trapezoid

image-wide-left-trapezoid

image-polygon-top-left

image-polygon-top-right

image-polygon-bottom-left

image-polygon-bottom-right

image-vertical-skew-left

image-vertical-skew-right

image-horizontal-skew-right

image-horizontal-skew-left

image-chevron-right

image-chevron-left

image-chevron-up

image-chevron-down

image-slant-up-right

image-slant-up-left

image-slant-down-right

image-slant-down-left

image-slant-right-top

image-slant-left-bottom

image-slant-right-bottom

image-slant-left-top

image-vertical-hexagon

image-horizontal-hexagon

image-warp-square

image-diamond

image-star (best with square images)

Add a shadow using the CSS filter property!

-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.5));
filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.5));