Divi Hacks Plugin

Examples & Documentation

Module Shapes

These classes will add shapes behind the module, column, or row that you put this class in.

Element Shape classes

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

chevron-right
chevron-left
chevron-up
chevron-down
point-up
point-down
point-left
point-right
speech-bubble-left
speech-bubble-right
speech-bubble-right-top
speech-bubble-right-bottom
speech-bubble-left-top
speech-bubble-left-bottom

slant-up-right
slant-up-left
slant-down-right
slant-down-left
slant-right-top
slant-right-bottom
slant-left-top
slant-left-bottom
vertical-hexagon
horizonal-hexagon
star
warp-square
diamond

Usage

Add any of the classes to Module or Row Settings > Advanced tab > CSS ID & Classes > CSS Class or any of the Column CSS Class boxes.

These hacks use the :before element to add shapes behind your element, inheriting the background color you set in that row, column or module.

Design

Background Color (or Gradient)
Module or Row Settings > Content Tab > Background

Notes

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

Examples

wide-bottom-trapezoid

wide-top-trapezoid

wide-right-trapezoid

wide-left-trapezoid

chevron-right

chevron-left

chevron-up

chevron-down

vertical-skew-left

vertical-skew-right

horizontal-skew-left

horizontal-skew-right

horizontal-hexagon

vertical-hexagon

slant-up-right

slant-up-left

slant-down-right

slant-down-left

slant-right-bottom

slant-right-top

slant-left-top

slant-left-bottom

polygon-top-left

polygon-top-right

polygon-bottom-left

polygon-top-right

point-left

point-right

point-up

point-down

speech-bubble-left

speech-bubble-right

speech-bubble-left-top

speech-bubble-left-bottom

speech-bubble-right-top

speech-bubble-right-bottom

star

warp-square

diamond

Add a drop shadow!

Box shadows don’t work on shapes, instead add this custom CSS to the module. Modify the properties to match your designs.

filter:drop-shadow(0px 5px 6px rgba(0,0,0,0.2));
-webkit-filter:drop-shadow(0px 5px 6px rgba(0,0,0,0.2));