Divi Blog How To Show Captions Beneath Featured Image

How To Insert An Image Caption in a DIVI Module (Without CSS)

divi caption image text module header

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:

using standard text editor

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:

gutenberg default

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

image caption field divi 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:

image caption field divi 2

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:

divi image caption get code standard

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:

divi image caption standard code

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.

2. Gutenberg

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

divi image caption gutenberg code

Copy the caption code that comes in the box - it will be similar to the image below:

divi image caption figure code

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!

divi image caption module text

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

divi caption image module final