The Only Solution Out There
I know may of you look for ways to add a caption text to your Divi images, especially for blog posts. But there simply is no way to do it without copying the entire module PHP code to your child theme and hacking it up – until now! We love innovative solutions, and have come up with a way to modify the existing Divi Image module and add the required code to add the caption text from WordPress into the image module. This easy tutorial will walk through the steps from adding the caption, enabling a setting, and adjusting the design. Enjoy!
▶️ Please watch the video above to get all the exciting details! 👆
1. Add The Caption Text To The Image In The WordPress Media Library
The first step is to add the caption text to the actual image. This is a WordPress related feature, and can be added to the image details in the WordPress Media Library. Just go to your Dashboard and click on Media>Library in the left side menu, then find the image and click on it. The Attachment details screen will open. On the right side will be the Caption input field where you can write your image caption text.
2. Install The Free Divi Image Helper Plugin
We are pleased to offer a FREE plugin that adds the caption text as a feature to the existing Divi Image module. Just download the Divi Image Helper plugin, install it on your website, activate the plugin, and the new settings will automatically appear in every Divi Image module on your site!
3. Enable The Caption Text For A Divi Image Module
As I mentioned, when you activate the plugin, new settings are automatically added in all of your existing Divi Image modules. So the last step is to either add a new Image module or go to an existing image, and open the module settings. You will notice new settings have been added in various places by the plugin, one of those being the new Elements toggle, which contains a setting called Enable Image Caption. Simply enable this setting, and the text you entered in the image in step #1 will appear below the image when you exit the Visual Builder and view it on the frontend.
4. Adjust the Caption Text Design
We also added all the text and font design settings you could need to customize and style the caption text! Just head over to the Design tab, scroll down to the Image Caption Text toggle, and adjust the text according to your own preferences. (Since Divi cannot render custom settings, these design styles will take effect when you exit the builder.)
no sorry, i was talking about switching the caption and description. having the description first and then the caption. instead of caption, then description.
You can try it with The CSS order properties, but it would probably not be ideal.
.pac_dih__image_details {
display: flex;
}
.pac_dih__caption {
order: 2;
}
.pac_dih__description {
order: 1;
}
Hello! This super great and so glad it’s free! I used the code to minimize the spacing between the caption and description and it works great..
But I wonder, is it possible to have the description first, and then caption? and have it be on one line? Like not stacked on top of each other but as a “continuation”? I added the website below:
https://clone.flowermag.com/martha-stewarts-summer-getaway-skylands/
Hi Anna,
I have never seen an image caption above an image, only below. We don’t have any other settings built in for what you described.
Hi, thanks.
It would be great if it were possible to add the caption text on the image itself, and with a background or the text to stand out when its placed on the image.
Hi Tonny, yes you can do this, just use our settings in the Overlay toggle.