Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Show The Divi Image Module Caption Text Below The Image

Nelson Miller Profile Orange
In this tutorial I will show you how to add caption text to the existing Divi Image module and style it with our FREE new plugin!

▶️ Please watch the video above to get all the exciting details! 👆

adding caption text to an image in the WordPress media library
Divi Image Helper Free Plugin by Pee Aye Creative 4
how to show the image caption in Divi
image caption text design settings in the Divi Image Helper plugin

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

62 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Anna Joy Thorner <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    no sorry, i was talking about switching the caption and description. having the description first and then the caption. instead of caption, then description.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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;
      }

      Reply
  2. Tonny Kluften <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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.

    Reply

Comments By Others

  1. Nicole

    Can’t rate these guys highly enough! Thank you Nelson for going above and beyond to help me with my issue. This is such a helpful plugin.

    Reply
  2. Nicky Reveleigh

    Hi Nelson
    I enabled the image caption in the image settings module but for some reason the captions aren’t showing for me? I’m on a staging site using images copied across from my client’s live/production site. Does it only work with newly uploaded images and captions? Wondering what I could be doing wrong?

    Reply
    • Hemant Gaba

      Hi Nicky!

      Can you share the URL of the page to check further?

      Reply
      • Nicole

        Hi Hemant

        Thanks for your quick reply. I have sent the URL through my support user account.

  3. gaby

    Hey Nelson – great plugin! It would be great to see this same caption capability extended to the video module as well if this is possible? thanks!

    Reply
  4. Ephraim Ugarte

    very nice work man

    Reply
  5. Florence Nelson

    Great! Thanks. Works so well. And I just saw above that it works with text over the image – thought I would need to figure that out myself.

    Reply
  6. Samuel Chabre

    Hey, glad to have found this plugin, thank you. Is there a way to have the caption and the image side by side? (and even more difficult: the caption on the left and the image on the right?). Cheers.

    Reply
  7. John Stavola

    Hi! The caption text doesn’t show in the visual builder… Is that correct functionality? Thanks for the free plugin!

    Reply
    • Hemant Gaba

      Hi John!

      You’re very welcome! I’m afraid yes, the caption won’t show in the builder.

      Reply
  8. William Weaver

    Thank you for this. One issue, when I have an image module aligned left and the caption center, the caption text centers in the center of the module and not centered under the image which puts it on the right bottom corner of the image. Link to the example page is in the website field. Is there a way to make sure it centers with the image and not with the entire module?

    Reply
      • Hemant Gaba

        Hi William!

        The caption under the image also moves when the alignment of the module gets changed. Just make sure, change the alignment in Image settings > Design > Alignment.

        Let me know how it goes!

      • William Weaver

        Right, centering the image module makes the caption centered, but for a use case where you want a left aligned image this will center under the module’s center regardless of where the image is centered. Does that make sense? If I align the image left, the caption will not be centered under the image, it will be centered under the module itself.
        But centering the image works so I’ll just use that. Thanks!

  9. Raffi Mardirossian

    Hi Nelson,

    Is there a CSS way to enable globally the Image Caption Text over all pages ?

    Reply
  10. Vera Schafer

    Hi Nelson! Thanks a lot for another lifesaver!
    It works fine on individual posts or pages but I couldn’t figure out how to make it work from Divi Builder for blog posts as it shows here: (https://share.getcloudapp.com/2NupAEgE)
    Please let me know what I am doing wrong

    Reply
  11. amanda kapiteyn

    Hi
    Just want to say thanks for creating this plugin. I was trying to add the image title, using the css content property but just couldn’t get it to display how I wanted.
    Amanda

    Reply
  12. Jamie

    Is there a way to play with the spacing between captions. The spacing between my caption title and description title is big enough to be an eye sour

    Reply
    • Hemant Gaba

      Hi Jamie!

      Please add the following code in Theme options > Custom CSS:

      .pac_dih__image_details .pac_dih__caption{
      margin-bottom: 0;
      }

      Let me know how it goes!

      Reply
  13. Jay Andrew

    Great plugin, thanks for sharing. That’s it, no extra BUT…. hahaha like many of the comments. It worked first time everytime and very kind of you to offer it up for no charge.

    Reply
  14. Fred BENOT

    Hi,
    Thank you for your solution. How do you do for featured images in posts ?

    Reply
  15. Diane Duncan

    Hi,
    It’s not working for me.

    Reply
    • Hemant Gaba

      Hi Diane!

      Can you please share the URL of the page so that I can check further?

      Reply
  16. Chris Nesbitt

    Hi Nelson, and thanks for the plugin. Unfortunately, it doesn’t seem to work for background images. I’m using a Fullwidth header module, with the background image assigned as the featured image. None of the plugin settings appear in this case. Ideas?

    Reply
      • Hemant Gaba

        Hi Beatriz!

        I’m afraid it is not possible right now. However, we will consider the feature for our future products or guides. Thank you!

      • Beatriz fernandez

        Hi! I love your work and im learning a lot with you. Now iim working on a blog and I would like to know if there is some option for the captions of the blog module so i can customize the caption of the images of the post. The default is quite ugly/boring. Thanks in advance!

  17. Sigrun Gudbrandsdottir

    Love this, thank you!

    Is there any way I can set the caption text to be visible only on mouse over?

    And would you consider making a similar plugin for the gallery-module? That’s where I really miss showing text on individual images / being in control of the design.

    Regards form Denmark.

    Reply
    • Hemant Gaba

      Hi Sigrun!

      Please go to Image module settings > Advanced > CSS ID and class > CSS class, and add the class pa-image in it.

      Then add the CSS code:

      .pa-image .pac_dih__image_details .pac_dih__caption{
      opacity: 0;
      }

      .pa-image:hover .pac_dih__image_details .pac_dih__caption{
      opacity: 1 !important;
      }

      Also, we have provided design control to the caption in Image settings > Design > Image caption text.

      Let me know how it goes!

      Reply
  18. Ray Katz

    I absolutely love this plugin. Is there a way to adjust the spacing between the caption and the image? Maybe just with CSS? I can’t figure out the selector for the caption itself…

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      I’m so glad you love it, could you leave us a review on the product page? That would be awesome! Yes you can easily adjust the spacing between the text and the image in the design settings. Just go to the Design tab and open the Caption Text design settings and adjust the margin or padding.

      Reply
      • Dominic Conrad

        Nice add-on. Many thanks. The spacing between image and caption is adjusted in Design Tab > Image Details Container > Padding-Top

  19. Thomas Olsen

    Hey Nelson,

    thank you so much for offering a free plugin!
    I just want to let you know, that the plugin doesn’t work for me either. Neither the aspect ratio functionality nor the subtitles. As there have been some similar posts recently, there might be an unsolved issue. I didn’t want to complain on a free plugin – just a kind info… 😉

    All the best from Germany
    Thomas

    Reply
  20. Eva Frisk

    Hi, I followed your instructions and have done it twice but I can´t see the caption on frontend. The new setting are there and I have written a caption but no luck…

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      I am not sure about this, but we did find some issues with iOS that we fixed. Can you download the latest version from your account and try again? If it continues send us an email!

      Reply
  21. Miquel Amat

    Hello. I am not able to reduce the caption letter spacing to less than 1px. Is there any option to do that?

    Reply
    • Miquel Amat

      sorry, problem already solved, I don’t know what happened yesterday…

      on the other hand it would be very interesting to be able to see the caption in the visual editor

      Reply
  22. Franz Schekolin

    The Caption text isn’t showing on mobile, just on desktop. Any solutions?

    Reply
  23. divi pro

    hi nelson how are you

    Reply
  24. Fabiane Diniz

    Dont Work!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Other Freebies

0

Your Cart