Post Title Text/First paragraph + Button over Video Slider content

darcy_ujjainwalla's Avatar

darcy_ujjainwalla

15 May, 2020 03:19 PM

Hi, I'm new to using this slider and was trying to figure out how to put text content on top of a video slider slide. Please see the attached .PNG. Idea is to give slightly more of a preview than the side bar before a user clicks to go to the featured content page. I am using Wordpress with Divi.

Thanks!

  1. Support Staff 1 Posted by Dmitry Semenov on 15 May, 2020 03:37 PM

    Dmitry Semenov's Avatar

    Hello,

    If you want to use the same structure for each slide (image + title + description + button), you may use Slide Markup Editor in general options.

    For example, somewhere after {{image_tag}} add something like:

    <div class="my-overlay">
      <h4>{{title}}</h4>
      <p>{{description}}</p>
    </div>
    

    and then style such overlay via CSS or use your theme styles.

  2. 2 Posted by darcy_ujjainwal... on 27 May, 2020 03:27 PM

    darcy_ujjainwalla's Avatar

    I was able to get it over each slide using:

    position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

    But now want to edit the overlay text to be bigger without also editing the sidebar text. Is there a way to do accomplish this?

    Thanks!!

  3. 3 Posted by darcy_ujjainwal... on 27 May, 2020 05:54 PM

    darcy_ujjainwalla's Avatar

    Nevermind, I figured it out!

    If you want to change the header (5) of .my-overlay just go:

    .my-overlay h4 {
    font-size: 40px;
    }

    If you want to change the body go:

    .my-overlay p {
    font-size: 20px;
    }

    Thanks for your help!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Example.png 1.12 MB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac