1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved How to add Caption on Slider Gallery for Divi Wordpress?

Discussion in 'Free Divi Community Forum' started by DGG1941, Jun 20, 2017.

  1. DGG1941

    DGG1941 New Member

    i want to ba able to show a series of rolling pictures on my home page with each image having its own caption which:
    - is centred below the image
    - is on a white or transparent background
    - has a font and text size and colour of my choice

    Advice welcome!
    Thanks
     
    #1 DGG1941, Jun 20, 2017
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
  2. david72

    david72 Divi Expert

    It will have multiple images per slide? Or one image per slide?
     
    #2 david72, Jun 20, 2017
  3. DGG1941

    DGG1941 New Member

    #3 DGG1941, Jun 20, 2017
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  4. DGG1941

    DGG1941 New Member

    I want each picture to have a short caption underneath, describing where the wedding in the picture took place.
     
    #4 DGG1941, Jun 20, 2017
  5. david72

    david72 Divi Expert

    I'm afraid you need custom coding for that. The gallery slider doesn't allow you to add caption by default.

    But then, you can try to use slider module to achieve what you want. Instead of using gallery module.
     
    #5 david72, Jun 20, 2017
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  6. DGG1941

    DGG1941 New Member

    Can anyone help with the custom code that would be needed for thi?
    Thanks
     
    #6 DGG1941, Jun 20, 2017
  7. Jason Teoh

    Jason Teoh New Member

    I would suggest to use slider module for that, similar to david. Just set the image as background of the slider and add your caption.

    I can't give any advice on custom code though :oops:
     
    #7 Jason Teoh, Jun 21, 2017
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  8. DGG1941

    DGG1941 New Member

    Thanks Jason and David but can't make the slider module show the caption either!
     
    #8 DGG1941, Jun 21, 2017
  9. Jason Teoh

    Jason Teoh New Member

    By caption, I mean just add it to the content. See the screenshot below.
    For the image, you need to add it to the slide background image.
    caption.png
     
    #9 Jason Teoh, Jun 21, 2017
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  10. DGG1941

    DGG1941 New Member

    Thanks. Can you tell me how to move the text to the bottom of the image?
     
    #10 DGG1941, Jun 21, 2017
  11. Jason Teoh

    Jason Teoh New Member

    Go to Advanced tab for the slider & under Custom CSS:

    For Slide Description, add the below css.

    width: 100%!important;
    padding: 380px 0 30px 0!important;
    text-align: left;
     
    #11 Jason Teoh, Jun 21, 2017
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  12. DGG1941

    DGG1941 New Member

    Thanks Jason - that's given me what I need - but triggered two more questions:
    - how do I make the text appear immediately, ie no scrolling up from below
    - how do I remove the navigation Dots. Dot Navigation for the page is Off, but they are still there.

    Thanks again
     
    #12 DGG1941, Jun 21, 2017
  13. Jason Teoh

    Jason Teoh New Member

    To make the text appear immediately, go to Advanced tab for the slider & under Custom CSS:

    For Slide Description, add the below css.

    animation-duration: 0s!important;
    animation-delay: 0s!important;

    -----------------------

    To remove the navigation dots, you just go to slider settings, under the "Content" tab, click "Elements", and under "Show Controls" click "No".
     
    #13 Jason Teoh, Jun 21, 2017
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  14. DGG1941

    DGG1941 New Member

    problem solved -many thanks Jason!
     
    #14 DGG1941, Jun 21, 2017
    Jason Teoh likes this.
  15. Mark H Stover

    Mark H Stover New Member

    If you want to add the title to the gallery module in slider mode do this:
    .et_pb_gallery_image a[title]:after {content: attr(title); width: 100%; text-align: center; padding: 8px 12px 8px 0; color: #aaa; position: absolute; left:0; top: 100%; z-index: 2; font-size: 80%; font-style: italic;}

    This grabs the "title" data in the link for each photo. Adjust as needed. I reformatted the entire module with:
    .et_post_gallery {padding: 0 0px 30px !important; border-top: 1px #ccc dotted; border-bottom: 1px #ccc dotted; margin-bottom: 30px;}
    .et_pb_gallery_image {padding:30px;}
    .et_pb_gallery_image a[title]:after {content: attr(title); width: 100%; text-align: center; padding: 8px 12px 8px 0; color: #aaa; position: absolute; left:0; top: 100%; z-index: 2; font-size: 80%; font-style: italic;}
    .et-pb-arrow-next, .et-pb-arrow-prev {top: 10%;}
    .et-pb-slider-arrows .et-pb-arrow-prev {left: -6px; color: #ccc !important; opacity: 1;}
    .et_pb_slider:hover .et-pb-arrow-prev {left: -10px; color: #0271b9 !important;}
    .et-pb-slider-arrows .et-pb-arrow-next {right: -6px; color: #ccc !important; opacity: 1;}
    .et_pb_slider:hover .et-pb-arrow-next {right: -10px; color: #0271b9 !important;}
    .et-pb-controllers {bottom: 50px;}
     
    #15 Mark H Stover, Mar 28, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  16. gandrew

    gandrew New Member

    This worked great, but I wonder, is there a way to put the text and navigation on top of the image?
     
    #16 gandrew, Mar 12, 2021
(You must log in or sign up to post here.)