How to add configure and customize the Divi Overlay Image Module.
Adding a overlay on an image is really simple with the overlay image module. The module allows you to add a text on top of an image which becomes visible when you hover on the image. There are 3 styles for the hover text Fade, Slide and Zoom.
Below is a detailed rundown of what you will find inside each tab of the module’s settings and an explanation of what each one does.
The Overlay Image Module Content Settings
The overlay image module’s content tab is organized into the following groups of settings.
Text
This is where you can set the content settings for the Overlay Image module. There are several options in the toggle to change the content in the module.
Content
This is where you can set the text for that you want to display on top of the image.
Image
You can set the image for the module here.
Button Text (Pro)
You can set the text for the button here. The button will only appear if it has text and a link set on it.
Use Icon (Pro)
You can set if you want to show an icon in the overlay. The icon appears above the text.
Icon (Pro)
You can select the icon you want to show on the overlay here.
Link
This setting groups contains the options for links in the module.
Button Link URL (Pro)
You can set the link for the button here. The button will only appear when it has both the button link and button text are set and are not empty.
The Overlay Image Module Design Settings
The overlay image module’s content tab is organized into the following groups of settings.
Icon
This is where you can set the styles for the icon in the Overlay Image Module.
Icon Color (Pro)
You can set the color for the Icon here.
Circle Icon (Pro)
You can choose if you want the icon to display inside a circle.
Circle Color (Pro)
You can select the color for the circle here.
Show Circle Border (Pro)
You can choose if you want to add a border to the circle.
Circle Border Color (Pro)
You can select the color for the circle border here.
Icon Alignment (Pro)
You can select the alignment for the icon inside the overlay here.
Use Icon Font Size (Pro)
You can select if you want to add a custom font size for the icon.
Icon Font Size (Pro)
You can set the font size for the icon here.
Overlay
This is where you can set the styles for the Overlay in the Overlay Image Module.
Overlay Color
You can set the Overlay Color in here.
Overlay Effect
You can select the effect for the overlay. There are three options Fade, Slide and Zoom.
Transition Duration
You can set the duration for the hover transition here.
If you have a question please open a support ticket on the plugins support page on WordPress.org. If you have a Pro license then please use the contact form inside the plugin.
If you are not already a Pro member then Sign Up Today for a Single Site License for just $6.00.