How to Add Parallax Elements and a Slide-Down Transition to the Divi Slider Module

Last Updated on September 22, 2022 by 24 Comments

How to Add Parallax Elements and a Slide-Down Transition to the Divi Slider Module
Blog / Divi Resources / How to Add Parallax Elements and a Slide-Down Transition to the Divi Slider Module
Play Button

This post is part 2 of 5 in our mini series titled 5 Interesting Ways to Style Divi’s Slider Module. Stay tuned for all five unique examples of the slider module and tutorials on how to achieve them!


In today’s slider tutorial we’re going to change the slider animation so that the text and button slide down from the top. We’ll also be styling it using parallax settings so the transparent images we’re using appear to “float” above the background. It’s an appealing effect when done correct and draws the eyes to your call to action.

Let’s get into it!

Today’s Before & After: The Divi Slider Module

The slider doesn’t come with any default images stored inside so I’ve added some background images (and some dummy text) ahead of time, but not changed any of the default settings in the modules themselves.

screen-shot-2016-10-28-at-2-32-28-pm

We’ll end up with a fullscreen parallax slider and a nice new effect for the slides. I’m using a restaurant motif since it seemed like a good fit for this style.

screen-shot-2016-10-28-at-2-38-54-pm

How to Add Parallax Elements and a Slide-Down Transition to the Divi Slider Module

Subscribe To Our Youtube Channel

The Concept & Inspiration

I’ve seen this concept before on the interwebs, using transparent png’s on parallax to give the mixed-layer illusion, or “floaty” as I like to call it, I just figured I’d try it with a slider.

parallax

Preparing the Design Elements

foodie-mood

For this particular layout I prepped my transparent images beforehand. If you’re unsure how to make an image with a transparent background, Elegant Themes has this great tutorial, scroll down to #3.

When you’re searching for images to use, try the query “isolated __________”. This will usually bring up some white background options.

Here are the image dimensions I used in this post:

  • Section background: 1920px by 1280px
  • Slider background: 1920px by 1500px

Implementing the Design with Divi

I’ll be using the classic backend builder because that’s what I’m most comfortable with, but everything we do can certainly be accomplished and edited with the new front-end Visual Builder–as is shown in the video above.

The Section Settings

We’re going to start with a standard 1-column section and add a slider module to it.

screen-shot-2016-10-16-at-11-17-48-am

Next we’ll change some settings in the section module itself.

For the Section General Settings I upload my background image and specify some top and bottom padding, top: 0px / bottom: 0px

screen-shot-2016-10-28-at-5-01-36-pm

screen-shot-2016-10-28-at-5-01-46-pm

The Row Module Settings

In the General Settings apply the settings like below.

screen-shot-2016-10-28-at-5-10-18-pm

The Slider Module Settings

For the Slider Module General Settings set the following:

  • show arrows
  • show controls: no
  • automatic animation: on
  • animation speed set to 8000
  • continue automatic slide on hover: on
  • use parallax effect: yes
  • parallax method: true parallax
  • remove inner shadow: yes

For the Slider Module Advanced Design Settings the color you see being used is #000000 (black) and the header font sizes are Desktop: 44 / tablet: 44 / smartphone: 30. You can use #1d1d1d instead of black if you think it’s too harsh on the eyes.

parallax-settings-tiny

For the Slider Module Custom CSS Settings add the following code:

Slide Description – This is changing the slide animation to slide down from the top and changing the default padding.

animation-name: fadeInTop;
padding: 18% 10%;

Slide Title – We’re not using any body text in the slides so we’re adding a bit more room between the title and the button.

margin-bottom: 15px;

The Slide Settings

For the slide General Settings see below, the background color is rgba(0,0,0,0) and the background overlay color is rgba(0,0,0,0.2)

screen-shot-2016-10-28-at-6-09-10-pm

Important: Don’t forget to add your transparent png images as the background image in each individual slide, as well as the title and button text to create the full effect. Also, since we’re using parallax you’ll need to have content below the slider section to be able to scroll and actually see the parallax working.

After you insert all your slide background images you’ve now created a pretty cool parallax slider that should impress your clients and/or visitors. Hope you can make some great use of this tutorial, and feel free to post your uses of it in the comments!

screen-shot-2016-10-28-at-2-38-54-pm

Tomorrow: How to Create a “Soft Box Overlay” Slider with Divi’s Slider Module

In tomorrow’s post I’m going to continue this series on how to style Divi’s slider module in interesting ways. I’ll be showing you how to create a subtle overlay effect with your slider background so that the section background shows through. We’ll also be using css to change the slider transition. See you there!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

How to Build a Website with Divi (2024 Tutorial)

How to Build a Website with Divi (2024 Tutorial)

Posted on June 12, 2024 in Divi Resources

You’ve purchased Divi and are ready to build your website. The only problem is that you don’t know where to start. Thankfully, Divi is one of the most intuitive WordPress themes available. It offers a user-friendly drag-and-drop Visual Builder that allows you to place design modules...

View Full Post
Get a Free Chinese Restaurant Layout Pack For Divi

Get a Free Chinese Restaurant Layout Pack For Divi

Posted on June 10, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Chinese Restaurant Layout Pack that’ll help you get your next Chinese...

View Full Post
Download a Free Spa Theme Builder Pack for Divi

Download a Free Spa Theme Builder Pack for Divi

Posted on June 7, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Spa Theme Builder Pack...

View Full Post

24 Comments

  1. Absolutely beautiful … it gives me inspiration for my next creation! Thank you

  2. Where is part 1 of this series?

  3. Is it also possible to change the slide image animation? I tried to do so in the Slider Module Settings Custom CSS area, but no luck.

  4. Thanks for this Leslie. I can’t wait to try it.

    • Thanks Tammy!! 😀

  5. I find it very confusing that the hardest part is obviously creating those transparent images and it’s not being shown how to achieve that. All the other stuff is easy when comparing it to getting the correct images in my opinion.

    I do think these tutorials are helpful, I just find it a bit questionable that the most important part is missing.

    • Hi Oliver,

      I guess these tutorials would be way too long if they were to include every single aspect of web design. There are literally hundreds of tutorials on transparent images out there, e.g. on YouTube, so I can understand the Divi tutorials concentrate on theme details only. 🙂

  6. Where is the example end result? Is there a link I missed?

    • Hi Arby, no you didn’t miss it. I’m not sure if it will be the same for all the Daily Divi tutorials but for mine there aren’t any demo links. I do have them on my site but links aren’t allowed in the comments here so If you mosey over to my site (click on my name) you’ll see a page titled “Tuts y Mas” where I’ll be linking these posts along with a demo for each. Thanks!!

  7. Wow! Beautiful touch! Again: Love it!

    • Thanks Elisandro! 😀

  8. Very interesting and I’m looking forward in using this.
    But how can you create a .png file 1920×1080 without having image weight issues? An image like that will be minimum 1MB! It’s too much for websites and far too much for mobile! Even compressing it you can’t reach a “human” weight. Have you got any workaround or tips for solving this issue?

  9. Thanks for this post guys. I am going to implement it right now.

  10. Thanks !

  11. where is the link to part one?

    • Hi Richard,

      See Right Sidebar, Recent Posts, “How to Style Divi’s Slider Module for a Bold Team Members Area”.

  12. Thanks guys!! 🙂

  13. Awesome share.

  14. So simple to create but looks great on frontend.

  15. it is possible to see a preview? it is possible to have .Jason with this modifications?? 🙂

  16. Great job Leslie! This parallax slider is gorgeous!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today