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

Last updated Nov 29, 2022 @ 11:53 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

46 Comments

  1. Tonny Kluften

    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
    • 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
    • Nelson Lee Miller (aka The Divi Teacher)

      I am not sure what you mean, there is no issue like this for us. Maybe you have a preset. You can share more info with a video to our support team.

      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
    • Nelson Lee Miller (aka The Divi Teacher)

      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
  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)

      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
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Samuel,
      That should be pretty easy with CSS, but no setting for that kind of thing as that soon becomes a Blurb. But yeah I assume should be pretty easy with CSS.

      Reply

Submit a Comment

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

Other Freebies

0

Your Cart