Image is one of the modules offered by Divi Builder. Just like the name suggests, you can use this module to add an image element to the design you are working on (be it a page or theme builder template). New to Divi Builder? No worries. This article will cover everything you need to know about the Image module. From how to add it to how to style it up.
Image itself is an important element of a design. Web design is no exception. A design without an image will be tasteless. The Image module of Divi Builder makes it easier for you to add an image. You can either add a static image or dynamic image (such as featured image, site logo, and author profile picture).
The Image module is designed to add a single image. If you want to add an image gallery, you can use the Gallery module.
How to Add an Image in Divi Builder
The Image module can be added to a row within a regular section (you can read our previous article to learn more about section and row in Divi Builder). To add the Image module, simply click the grey plus icon on a column within a row and select Module.
On the appearing panel, click the image picker on the Image block under the Content tab to select the image you want to use.
To add a dynamic image, hover your mouse over the image picker and click the trash can icon. Click the database icon and select the dynamic image type you want to use.
Adding the Link to the Image
You can add a link to your image. Same as the image itself, you can also add either a static link or a dynamic link. To add the link, you can open the Link block under the Content tab. You can also click the database icon to add a dynamic link.
Styling Up the Image
Once the image is added, you can start to style it up. Just like other Divi Builder modules, you can make the styling process on the Design tab on the module settings panel. There are 8 setting blocks you can open to style up the image:
- Alignment
You can open this block to set the alignment of the image.
- Sizing
You can open this block to set the size of the image (height and width). By default, Divi Builder uses the percent unit for the height and width, but you can use the pixel unit if you want to. To use the pixel unit, you can type the unit (px) as well as the value, manually.
There is also a Force Fullwidth option you can enable. Enabling this option will make the image fill the entire column associated with the Image module.
- Spacing
You can open this block to set the padding and the spacing of the Image module. You can read our previous article to learn more about padding and margin in web design.
- Border
You can open this block to set the border of the image. From the border style, border size, to border color. You can use a different color and size for each border (top, bottom, left, and right). Simply click the tabs on the Border Styles option to set the color and size of each border.
You can also set the border radius. Border radius refers to the tilt level of each corner of the image (top, bottom, left, and right). The higher the values of the border radius, the rounder your image will be. You can set the border radius on the Rounded Corners option.
- Box Shadow
You can open this block to apply a box shadow to your image. There are 7 box shadow types you can choose from. After selecting one, you can set the horizontal position, vertical position, blur strength, spread strength, and shadow color.
- Filters
You can open this block to apply CSS filters to the image. There are 6 CSS filter types you can apply:
- Hue
- Saturation
- Brightness
- Contrast
- Invert
- Sepia
You can also set the opacity level of your image from this block, as well as the blend mode.
- Transform
You can open this block to set CSS transform to your image. There are 5 CSS transform types you can set:
- Transform Scale
- Transform Translate
- Transform Rotate
- Transform Skew
- Transform Origin
Simply select the CSS transform you want to apply by clicking its tab and use your mouse to set the transform values.
- Animation
You can open this block to apply an entrance animation to the Image module. There are 7 animation styles you can choose from. After selecting one, you can set the animation direction, animation duration, animation delay, and so on.
Advanced Settings
Once you are done making the styling on the Design tab, you can switch to the Advanced tab to make some advanced settings such as adding custom CSS, set custom position, and so on. There are 7 blocks you can open here:
- CSS ID & Classes
You can open this block to add CSS ID or CSS class. You can add CSS ID or CSS class if you want to add custom CSS via the Code module.
- Custom CSS
You can open this block to add custom CSS directly instead of via the Code module. You can add simply add the CSS code to the available fields.
- Attributes
You can open this block to add the image attributes (alt text and title). You can either use static attributes or dynamic attributes. To add dynamic attributes, you can simply click the database icon on each field (Image Alternative and Image Title Text).
- Visibility
You can open this block to disable the Image module on a certain device type. You can simply tick the device type to disable the module.
- Transitions
You can open this block to set the transition of the Image module.
- Position
When you add a new module in Divi Builder, the position is set to static (Default). If you want it, you can use a custom position for the Image module. You can set a custom position from the Position block under the Advanced tab. The position options you can set are:
Relative: If you select this option, the Image module will follow the normal flow of the page. This option offers top, bottom, and right properties. Also, you can set the Z index.
Absolute: If you select this option, there will be no actual space created on the page for the Image module. You can think of it as a floating module on top of other elements that take up actual space.
Fixed: If you select this option, the Image module will break the normal flow of the page and it has no actual space on the page.
- Scroll Effects
You can open this block to apply a scroll effect to the Image module. You can, for instance, apply the sticky effect. You can also a scroll effect from this block.
The bottom line
The Image module of Divi Builder is intended to add an image to your design. You can use it to add either a static image or a dynamic image. As we have just covered above, there are plenty of styling options you can apply to your image, including the ability to apply a sticky effect, motion effect, and CSS filters.
One thing to note. Make sure to click the green checklist icon on the bottom-right corner of the settings panel every time you make new changes to the Image module (and other Divi Builder modules).
