
Image Box 1.2.3
Divi-Modules – Image Box lets you Scale, Crop, Rotate and Flip your images, directly within the Divi-Builder. Images can include Titles and Captions which can be loaded dynamically from the image itself or entered manually. Make your images look right on any device.
- Requires Divi, Extra, or other Divi Builder theme.
The Divi-Modules – Image Box demos below are all live examples. Keep in mind, all the examples you see below are made with just a single image!
NEW!
Image Box Text
Image Box modules can include images, titles and captions. Image text can be loaded dynamically from the image itself or entered manually. Text can be positioned above, below, left, or right of the image.

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Position: Bottom

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Position: Right

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Position: Left

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Position: Top
Image Box Size
Image boxes can be sized by preset ratio or custom height. Use pixel units to make fixed height images, or percentages for images that scale proportionally.

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: 3:1

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: 4:3

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: 1:1
Image Size
Images can be set to automatically fill or fit the image box or sized manually.

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: Fill image box

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: Fit image box

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: 200%
Position, Rotate & Flip
Images can be positioned, rotated and flipped within the image box.

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: 200%
Position X: 55%
Position Y: 50%
Rotation: 40°
Flip: None

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: 130%
Position X: 40%
Position Y: 50%
Rotation: 0°
Flip: Horizontal

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Size: 155%
Position X: 50%
Position Y: 55%
Rotation: -10°
Flip: Vertical
Image Repeat
Images can be set to repeat horizontally, vertically or both.
Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Repeat: Fill image box
Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Repeat: Horizontally only
Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
Repeat: Vertically only
Hover Effects
Backgrounds and blend modes can further enhance your images. Most settings are hover enabled so you can create your own roll-over effects. Mouse over the examples below to see some hover effects in action.
Image Box Styling
Separate border, background, and box shadow settings for the main module, image and text give you unlimited design possibilities.

Image Title
Lorem ipsum dolor sit amet, per minim consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.

Image Title
Lorem ipsum dolor sit amet, per minim delicata consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.

Image Title
Lorem ipsum dolor sit amet, per minim consectetuer. Regione assentior per ad. Quo id nonumy intellegat, eam invidunt partiendo vituperatoribus id.
To find out more, please see the Videos and Documentation.