1. HOT Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
HOT Divi Login Customizer Plugin - White-label your Wordpress login page for your Divi site.
View premade login page design
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.
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 Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  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 Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members: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 dynamic background hover 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 Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  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 Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site: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 Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  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 - 30+ premade custom footer designs for you to choose from: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.)