After working on a DIVI Wordpress website for a client recently, it became apparent that placing an image caption within DIVI's image module wasn't something that could be done out-of-the-box. Although DIVI has many cool features, some common things you'd expect to come as standard in the DIVI theme simply aren't there. Image captions are a case in point; If you're using the normal Wordpress WYSIWYG editor, it's pretty straightforward but with DIVI... not so much.
So, here's how you do it, and on this occasion, we don't need any CSS (as is common with DIVI customisation) to get the job done.
The image & caption will go in a DIVI text module
It's important to mention that to do this, we don't need to use DIVI's image module as we can't use this to insert the caption. Instead, we achieve our goal using text modules only. But, before we do this, we first need to get the raw code for the image and the caption. Don't worry, it's easy, and no coding skills are needed.
Firstly, we switch to our standard text editor. On your site, this is likely to either be the much-maligned "Gutenberg" block editor or you may still be using the previous default (TinyMCE) style editor that came bundled with a default Wordpress install.
If you still use the classic editor, choose the "Return To Standard Editor" as in the picture below:
If you use Gutenberg, you'll be either already there if the DIVI page builder isn't active but if it is, simply "Return To Default Editor as in the image below:
Insert the image in your default editor as normal - The image below is for the Gutenberg editor although you'll see a slightly different layout for other editors.
The image below is for the Standard Editor
Now we're out of DIVI we simply add our image from our media library and make sure we type our caption in the caption box provided - See image below:
Different processes for the Standard Editor and Gutenberg
The process of grabbing the code differs slightly for both so we'll do them one at a time
1. Standard Editor
Once you've clicked on the "Insert into page" button (bottom right of picture above), you'll see your image with its caption in the editor. To grab the code we'll need, simply click on the text button as in the image below:
It will look like the picture below - copy that text because this is what we'll be using when we switch back to our DIVI text module:
Copy all the caption code just like you see in the above image and now just skip down this page and carry on following the instructions after the brief Gutenberg section just below.
If you're using the Gutenberg editor to generate the caption code we'll be using in DIVI, the process is similar except you'll need to click on the 3 dots and then select "edit as HTML" - see image below
Copy the caption code that comes in the box - it will be similar to the image below:
Inserting our image and caption code into a DIVI module
Now it's just a simple case of switching back to our DIVI builder and putting the code in the right place in our DIVI text module. If you now switch back to the DIVI builder after using Gutenberg, the image and caption will automatically appear in a text module and you're good to go. If you're using the standard editor, simply place your code in the code section of your text block and you're done!
The finished page with the image and my caption underneath (see below). The caption text was made bigger by simply wrapping the caption in a <H2> tag when I typed it into the caption field in the media manager earlier on
For other DIVI tips and tricks see:
How to make Hyperlink Color and Hover Color Change in DIVI.