How To Show The Caption Text Below The Divi Image Module Tutorial by Pee Aye Creative

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

Nelson Miller Pee Aye Creative
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!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

54 Comments

  1. 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
  2. Fabiane Diniz

    Dont Work!

    Reply
  3. divi pro

    hi nelson how are you

    Reply
  4. Franz Schekolin

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

    Reply
  5. 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
  6. 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
  7. 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
  8. 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"><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>

      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
  9. 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
  10. 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
      • 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!

      • 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!

  11. 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
  12. Fred BENOT

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

    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. 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
  15. 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
  16. 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
  17. Raffi Mardirossian

    Hi Nelson,

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

    Reply
  18. 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
      • 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!

      • 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!

  19. 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
  20. 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
  21. 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
  22. Anna Thorner

    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/

    Reply
  23. Anna Joy Thorner

    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
  24. Ephraim Ugarte

    very nice work man

    Reply

Submit a Comment

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

Other Freebies

0

Your Cart