How to Create a Full Screen Slider with Divi

Posted on March 27, 2017 by in Divi Resources | 138 comments

How to Create a Full Screen Slider with Divi

Divi’s Fullwidth Slider Module comes with some great features including the ability to add sliders with parallax and video background. But, one feature that would make it even more powerful is the ability to expand to a full screen slider. Divi’s Fullwidth Header Module has this full screen option already so we thought it would be a good idea to show you how to add this same functionality to the those fullwidth sliders.

Adding full screen functionality to Divi’s Fullwidth Slider Module is extremely easy to implement with a few lines of CSS and Javascript. In just 5 minutes, you can convert your fullwidth slider into a full screen slider that expands to fill the entire screen on page load just like those full screen headers.

Let’s get started.

Implementing the Full Screen Slider Functionality with Divi

Step 1: Add a Fullwidth Slider Module with Slides

Using the Divi Builder, add a Fullwidth Section and click “Insert Module”.

Add a Fullwidth Slider Module.

In the Fullwidth Slider Module Settings, under Custom CSS, add a CSS Class called “et_fullscreen_slider”.

Under general settings, add a new slide.

In the Slide Settings, under General Settings update the following:

Heading: [enter your heading]
Button Text: [enter your button text]
Button URL: [enter your button url]
Background Image: [add your background image] (I’m using an image from

Repeat this step for as many slides as you need.

Save & Exit

Adding the Custom CSS and Javascript

From the WordPress Dashboard, go to Divi → Theme Options and, under General Settings, enter the following CSS in the Custom CSS text box:

.et_fullscreen_slider .et_pb_slides,
.et_fullscreen_slider .et_pb_slide,
.et_fullscreen_slider .et_pb_container {
	min-height: 100% !important;
	height: 100% !important;

Next click the Integration tab and add the following javascript to the text box labeled “Add code to the head of your blog”:

(function($) {
    $(window).on('load resize', function() {
        $('.et_fullscreen_slider').each(function() {
    function et_fullscreen_slider(et_slider) {
        var et_viewport_height = $(window).height(),
            et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
            $admin_bar = $('#wpadminbar'),
            $main_header = $('#main-header'),
            $top_header = $('#top-header');
        if ($admin_bar.length) {
            var et_viewport_height = et_viewport_height - $admin_bar.height();
        if ($top_header.length) {
            var et_viewport_height = et_viewport_height - $top_header.height();
        if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
            var et_viewport_height = et_viewport_height - $main_header.height();
        if (et_viewport_height > et_slider_height) {

That’s it!

Wrapping Up

Now you have a full screen slider for your website. Use it to create beautiful and effective sliders for your hero section that fills any screen on any device.

I hope you enjoy this useful addition to your Divi site.

If you have any questions feel free to post theme in the comments.


Premade Layouts

Check Out These Related Posts


  1. Awesome! I’m going to implement this! Thanks!

    I’m a noob so this is perfect so I don’t need to work about dimensions!

    Ahahaha! I’ll just fill the whole screen!



  2. Thank you Jason for that.
    Whether it’s a still picture, video or a slide show, the full screen is always beautiful. But it simply lacks the indication for the surfer that there is content under the visual (arrow icon for example).
    This is possible until now with the still picture and it is regrettable.

    • Yes this is timely and helpful, thank you. But with the full width header as mentioned above, you would have the icon to move you to the content below. How would you customise the full width/screen slider to encompass this?



    • There is another work around for the moment. You can use either a button with more text and maybe an icon also. Then you should enable dot navigation on the page from the divi options on the top right. Give the next section of your page an ID in its custom css, for example about, and then insert in url of the button the #example. That should do the work for you.

      • I’m using an animated GIF and linking it to the content below:

        However, I built the full screen slider just by using css. And in addition, I’m using a smaller picture for the mobile screen sizes, which looks much better then just scaling the primary large picture.

        • How did you add the scroll arrow? I would like to add a scroll icon like the full width headers have.

  3. Great post!!! Very useful!!!
    Any idea how to implement the same with Fullwidth Post Title?
    Best wishes, Fabs

  4. I normaly just add “height: 100vh” to the main element of the fullwidth slider module to make it full screen.

    Which is the difference of doing it with js?

    • I want to know about this too!

      • Truth be told, I use it too, but vh is not supported by older browsers. In fact, Safari didnt fully support viewport % units until v6.1, and IE didn’t until v9.

    • Hi Juan,

      That will not take into account the height of the main header, the top header and / or the admin bar (if you are logged in). If you take a close look at the JS code you will notice the logic with a little bit of basic math (ex: main header height – the viewport height).

    • Juan, your technique sounds so much easier, but when I tried to implement it. It didn’t seem to work. Slider was still just a sliver.

      • Same here literally nothing happened

  5. There is a little mistake in this line (Step 1, third line)

    In the Fullwidth Slider Module Settings, under Custom CSS, add a CSS Class called “et_fullscreen-slider”.

    Must be: et_fullscreen_slider


    • @Carsten – You just saved me about 20 minutes of wasted time and then giving up. Original Author — PLEASE FIX!! 😀

    • Thanks for that… it took me a little while to figure out why things weren’t working 🙂

    • Thank you very much, I was already pulling my hair. 🙂

    • Very sorry about this! I’ll get this fixed today.

  6. Nice tip. If we have a menu bar: is menu bar height + slider height = screen height? I used to use height = 100vh for every slide, but it doesn’t work if you have a menu bar (well, it works if the menu bar is transparent.)

    • You can use height: calc(100vh – slider height px)

  7. Why do we need to mess with css if there is a module for a “full width slider”?

    Doesn’t the full width slider to full width? Couldn’t you use include the css info on the module if it is needed to achieve the full width slider?

    • This is about achieving a full ‘HEIGHT’ slider. 🙂

    • Ron,

      This is for a slider that spans the width and height of your screen on page load. A fullscreen slider, not simple a full width slider.

  8. This is cool. I’ve been waiting for a “Divi approved” way to do this for a while now. However, when I handover my sites to client’s, it’d be nice for them to have a simple module that could do this for them. As a designer/dev, I get the codes etc. Is there ANY way to just get a fullscreen slider module for Divi pretty please?

    • I’ve just adapted this tutorial into a custom module plugin if you are interested it been uploaded Bolt Themes website and it’s free, the plugin is called slider tighten.

      • Your full screen slider plugin doesn’t work mate. When I click on it in the module options it doesn’t add anything to the screen (at least in the visual builder).

        • Actually it does work.. my bad… it just doesn’t work in the visual builder for some reason, works fine in the admin screen. Anyway you can post a fix for this?

      • Thanks James,

        Works like a charm!

        • Sounds good, going to try that !
          Is it responsive, also ?
          Thanks !

  9. This is nice, but in my opinion this option should be built in. I’ve done what you describe but it’s not as clean. I’ve had issues with it loading on mobile devices poorly, and also when on a computer, all sliders were effected instead of just the one I applied the code to.

    • Unreal – I was wondering if this would work just on the one specific slider, since the CSS class seemed to be named so generically.

      When you post your conflicting experience here, I would expect for the original author (@Jason Champagne) to chime in and actually help.

      What’s the point of these blog posts/tutorials when there is no follow ups by the respective authors?

    • Hey Tony,

      What is the problem on mobile devices exactly? It shouldn’t trigger if the slider height is bigger then the viewport height.

      Are you certain you did not include the class on the other slides as well?
      I have 3 sliders, the 1st and the 2nd have the class and the 2nd one doesn’t and it works just fine on my end.

      Small screencast to illustrate that:

    • Tony,

      Sorry for the confusion. I would check to make sure you have the custom css class (et_fullscreen_slider) on your fullwidth slider module only.

    • Agreed. The slider needs improvement.

  10. I’m waiting for this months ago ,thanks but still late 🙂

  11. Hello Jason,
    it’s not working with vertical header. Could you post a working soluiton with vertical header?

    • Hi Daniel,

      Sorry about that! In the jQuery code, please the following line:

      if (!$(‘.et_transparent_nav’).length) {


      if (!$(‘.et_transparent_nav’).length && !$(‘.et_vertical_nav’).length) {

      This should do.

      I let Jason know so he can update the post as well.

    • I’ve updated the post for this fix. Thanks, Daniel.

  12. Hello this sounds like a good thing, I have struggled with making the slider full screen several times already so a good tutorial. Now can this same thing be applied to the Video Slider…would be nice to be able to use full screen video slider, showing videos from youtube, would look like a background video and fill the full screen but without the problems associated with it and be able to use youtube as the video which currently we can’t do with the slider.

  13. good advice. Thank you. But I would be more grateful if you could explain to me how to change the h2 header (by default) to the one I need, for example, the header h1.
    I think you know the rules of the hierarchy of headings: h1 -> h2 but not h2->h1

    • Alexey,

      You are right! That is an issue. For now I would just add the h1 header to your content section of your slide settings with the h1 tag. At least until I figure out a better fix.

      • Jason,

        any updates on this? I need h1 instead of h2 for the title. Maybe using a php snippet to replace text or something in functions.php?

      • I too need the ability of an H1 for a slide title.

    • Alexey, excellent point and an seo issue im struggling with on the home page at least for all my client divi sites. I read Jason’s reply below and in my experience when selecting h1 in the content area, the advanced settings for header are ignored. Bold, TT, size, etc. I’ve had issues even when adding custom css to try to achieve the font style. Seems either my custom css gets overwritten or I’m doing it wrong. The Full Width slider settings should have an option below the Title with a checkbox. Something as simple as
      “h1 title?”
      Any chance Divi Development Team will add this soon?

  14. Perfect! I’ve been looking for this a long time now. Would be even better if it was implemented in the next update. 😉 Lots of my customers have asked for this, but I’ve always had to pursued them to only have one image and then using the full width header module.

  15. Thank you very much! very useful!

  16. Why not use height: 100vh;?

    The slider is already full width, so you only have to define the full height.

    • Exactly my thoughts… Even ‘tho if you use 100vh the section is a bit jumpy on page load but its still much more elegant solution. Am i wrong?
      I am wondering if there is an advantage of using this method over 100vh. Anyone tried to compare the two methods?

    • As Vlad says above, “That will not take into account the height of the main header, the top header and / or the admin bar (if you are logged in). If you take a close look at the JS code you will notice the logic with a little bit of basic math (ex: main header height – the viewport height).”

      I hope that helps.

  17. Thanks a lot for this post, exactly what I wanted to do !!!

  18. Is there a way to have the navegation bar above the slider, with transparency for this single case (homepage for example)


    • Let me think about this one. For starters I would try this CSS. It’s not a perfect solution but let me know if it helps:

      .home #main-header {
          position: absolute;
          top: 32px;
          background-color: rgba(255,255,255,0.2);
      .home .et_fullscreen_slider {
      height: 100vh !important;
  19. Still wondering why this simply is not an option inside the divi module instead of messing around with code. The fullwidth header module has this feature but not the slider ???

  20. This seems easy to implement if you know how to code. Like many Divi items that should be built in, you need to know how to code to get things to work. Without this tutorial & code share, there is no way I could’ve figured this out on my own. That is why many of my Divi sites have so many 3rd party plugins.

    I’ve saved this tip for when I might need to do this along with dozens of other CSS work-a-rounds I’ve saved.

    • You don’t have to know how to code to implement this if you follow the instructions. It’s just a matter of using copy and paste.

    • Bob,

      I try to make it easy to follow without knowing much code at all so you don’t have to use a plugin. But I understand your point. Thanks for the feedback.

  21. I agree with everyone who wants this to be included in Divi. There seem to be too many things like that. But what I REALLY didn’t see here, was a demo — an actual example — of what this effect looks like. If I don’t know, I’m not sure I would invest my time in this process just to look at it and SEE if it’s something I’d like to use.

    But maybe that’s just me.

    • There should always be a working demo for a tutorial. Not including one or just using screenshots isn’t adequate.

    • I completely agree – a lack of a respective demo AND a lack of follow ups and help by the original blog authors on most of these blog posts/tutorials – and there are a few comments of those who implemented this and had issues with the code being interpreted by ALL sliders on their site when viewed on a desktop. What’s the point of having tutorials and no help?

    • Me too!

    • Thanks for the feedback, Randy. I should have illustrated this effect better on this post. I’ll try to improve it.

      • I actually disagree and think this was totally fine. Can be implemented within 2 minutes and undone just as quick. No need for a demo with something like this. Many thanks Jason! 🙂

  22. Your CSS Class is “et_fullscreen-slider” but in the CSS code it is “et_fullscreen_slider”, won’t work.

    • I’m addressing this problem and updating the post. Thanks, Jack. Sorry for this mistake.

  23. Excellent. But who can actually unequivocally define the aspect ratio of the images?

    This has always been a pita for me. I would love to have this answered with finality.

    • I’m not completely sure what you mean, Mark. Do you mean the aspect ratio of the slide images?

  24. Come on man this is tone of code! You can do it 10 times more elegant than that, no need for css and no need for that much code. If you wanna to help people, than please do it right way. Just use fullwidth slider add this somewhere in youre script…

    jQuery(window).resize(function() {
    jQuery(‘.et_pb_slides .et_pb_slide’).height(jQuery(window).height() – 109);

    You can add this code in youre Theme Options/Integration/ and then add in some of option for scipt adding. You can see in this image steps you need to do to add it.

    This 109 number is height of my header section in pixels, i measure it manualy, no need for code when element hight is almost static for header in all responsive resulutions (it grows few pixels in height on mobile in default divi css).

    Correct me if i am wrong. Sorry cuz of comment spam now i made little image for people to see steps how to add code… You can remove this last line if you want 🙂

    • amazing man , actually the previous code mentioned on this page only worked for the first slide for some reason. that made me scroll down to the comments are . Quite a stunner man

      • just warp it with this kind of doc ready declaration to avoid global scope, and get more speed and client security.
        (function(jQuery) {
        //code goes in here 😀

        i dont know for you but mine WP, with all themes, and blank theme, cant use $, so i use jQuery instead…
        anyway, use it, and share it…
        peice and stay with a forece!

  25. Its Great
    and easy to implement…


  26. Wow, just today I was looking to improve the modification I did and this came just in time.

  27. Divi claims make beautiful websites without coding. It would be super if elegant themes makes little features this built in divi so we dont have to enter any code at all. It would be a great help.

  28. Thanx for this Jason!
    This function should really be implemented into Divi 😉
    Just like “make fullwidth” you should urgently include a switch into the sections “Make this section full height”!

    • Thanks Andy. Sounds like a good idea to me. I’ll keep this in mind.

  29. Jason Champagne Good morning ….
    Could you please help me with the css code so I can put shadow on the fixed bar like on the above site? Ja tried more I did not get anything ….. Shadow sticky bar sticky ….. ok?

    • Sorry for the delay. Are you referring to adding shadow to your navigation bar/header? I’m not sure what you meant by “Shadow sticky bar sticky”.

  30. Please could you give us some advice about images sizes for fullwitdht headers or sliders for best result ?
    Why not a blog post about this important thing width adivces for today and tommorrow when devices will have always better resolution and size…

    • That is a good suggestion. I will keep that in mind. I usually make my background image width at least 1920px and I change the height depending on how tall my header is. As for fullscreen image sizes I would keep them around 1920 x 1080.

  31. Another tutorial about a feature that should be implemented into the core product to begin with (the other one being the “How to create more columns”).

    What I don’t get about those series of tutorials is that the Divi theme, specially the builder, is marketed towards the average user and simplicity is the strong point being everywhere in the website.

    Now, this tutorial is completely against this principle and I find it very contradictory.

    Anyway, my 2 cents: Integrate all those features into the core product.

    • Arkymedes,

      Sorry for your frustration. Thanks for the feedback.

    • I get the exact same as you. No full height. I can only get it to go full width only. Just a lot of white space below.

      • Me also. cant get the full height. any solution?

        • sorry i just found the mistake, whick is mentioned aboe also. Its the CSS Class “et_fullscreen-slider” instead of “et_fullscreen_slider” in the tutorial.

    • So very sorry about this. I updated the post with the correct css class (et_fullscreen_slider).

      • Great thanks for that!

  32. Definitely I am going to use this! Thank you for help!

  33. it works with extra theme?

  34. Hi, one quick question according the slider.

    Does anyone have a hint where to find a (tech) documentation on the Slider JS?
    To me it seems self coded – not using a slider plugin.
    I wonder if it offers advanced features – like jumping (linking) to a certain slide like slider plugins would offer?

    Alternative: Can anyone recommend a Divi compatible slider plugin that offers a jump-to-slide feature?

    Thanks for your help. I have been searching a long time and found nothing related.

  35. One thing to bear in mind is the content of your image try to make sure what you want people to see is in the center as it will display in both portrait and landscape meaning on mobile devices viewing in portrait mode the left and right edges will be cropped.

  36. Implemented on my custom 404 page (with sitemap underneath)! Thanks for the tutorial!

  37. Thank you so much – implemented on a client site today!

  38. Does this have any effect on the header being hidden until scroll? I can’t seem to get rid of the header.

  39. You are an absolute lifesaver!!!! I had been trying to figure this out for a few weeks for my own website. I kept trying to customize the fullwidth slider module and increase the section height but I couldn’t get it fullwidth on every device. My only concern is for those of us using a child theme with Divi is there a file we need to create for the javascript code in the wordpress editor or will the integrations tab be fine when it comes to updating? Needless to say this saved me pulling out my hair. Haha

    • I just noticed this put a white line through one of my slider images on my website. This only seems to happen on mobile devices. Has anyone else noticed this? I’m going to try and resize the photo or use a different one altogether.

      • Jip, I’m also struggling with responsive full header any advice?

  40. OMG! i wanna burn the slider in the flames of hell!

    OK, so here’s my issue. I have a full width section with the slider module in it. In the slider i have a video which is 1920 X 700. All i want is the height to scale relative to the width when i resize the browser window, so it retains the same aspect ratio no matter what device it’s on. I’ve tried resizing the height of the slider via CSS (from divi booster) but on smaller devices the sides of the video get cut off, I’m literally tearing my hair out.

  41. Hey Jason, that’s great, it works.

    Do you have any idea how can bring main navigation bar below to Full Height home banners?

    • Add a menu module below your header?

  42. Still not working for me, any help?

    • Please don’t add these comments – I had header script disabled.

  43. Hello,

    Thanks for this very useful tip … I tried it on a fullwidth slider and it worked ok.

    I tried to adapt it to a page of mine, which has a section with an image, a slider and a blurb in it (the blurb is empty, just for the icon).

    Something like this beautiful free divi layout:

    I created a custom css class and successfully made the section being 100%. However, I was stuck when trying to change your javascript code.

    Specifically, I could not find what to ‘substitute’ for et_clider and .et_pb_slider_container_inner ..

    If you have the time, I think it could be extremely useful to adapt your elegant solution to something like this. The reason is, very often people want one single image as background, a single logo image, and then a couple of sliders on top of that (like the demo). Unfortunately fullwidth slider doesn’t handle this well (one problem being the logo image, which is by default not shown on devices with less than 768px width) ..

    Anyway, thanks for your help, I know you can’t possibly customize everything, I ‘m just suggesting something, perhaps it’s an obvious little thing and I can’t find it ! 🙂

  44. Great tutorial. to echo everyone else, being in the core product would be amazing, but my main reason for commenting is that the full screen doesn’t work if (like I’m looking to) you hide the menu before scroll.


    Is there something that could be added to the Java to check whether hide before scroll is active and therefore make the slider actually full page in that situation too?


    • I just saw your comment after I had commented on exactly the same issue.

      • I’m glad it’s not just me 🙂

  45. Almost perfect, It worked great when my header had a background color, but now that it’s transparent, I have a small gap at the bottom of the page (About the size of the topbar). Any idea why it’s giving me that gap?

    • When the header is hidden, it doesn’t account for that.

    • Here is the code for a hidden header:

      (function($) {
      $(window).on(‘load resize’, function() {
      $(‘.et_fullscreen_slider’).each(function() {
      function et_fullscreen_slider(et_slider) {
      var et_viewport_height = $(window).height(),
      et_slider_height = $(et_slider).find(‘.et_pb_slider_container_inner’).innerHeight(),
      $admin_bar = $(‘#wpadminbar’),
      $main_header = $(‘#main-header’),
      $top_header = $(‘#top-header’);
      if ($admin_bar.length) {
      var et_viewport_height = et_viewport_height – $admin_bar.height();
      if ($top_header.length) {
      var et_viewport_height = et_viewport_height – $top_header.height();
      if (!$(‘.et_transparent_nav’).length && !$(‘.et_vertical_nav’).length) {
      var et_viewport_height = et_viewport_height;
      if (et_viewport_height > et_slider_height) {

  46. The problem I see is that this approach does not allow for the fact that there may not be a main navigation menu visible until after the visitor scrolls down x% of the page.

    So in the case where the top navigation menu is not visible initially, this method leaves a large white menu-sized space at the bottom of what is supposed to be a full screen image.

    Apart from this, there is always something missing when we use a slider for the hero section (unless you use RevSlider, that is) and that is a scroll-down arrow.

    Personally, if this method was corrected to allow for the hidden menu and maybe also had a scroll-down arrow added, I’d use it on almost every site I build.

  47. As others have said, it’s not truly full screen. There is a gap at the bottom. 100vh would make it “truly” full screen.

    • how to do that? what’s do you mean “100vh”?

  48. Doesn’t work for me. Image is about half screen with bottom half white.

    using this css class

  49. Hi everyone, I have the same issue when I use transparent header. There is a gap at the bottom with the same height as the header, so I remove some of the codes given and it’s working now. Here is the code:

    $(window).on(‘load resize’, function() {
    $(‘.et_fullscreen_slider’).each(function() {
    function et_fullscreen_slider(et_slider) {
    var et_viewport_height = $(window).height(),
    et_slider_height = $(et_slider).find(‘.et_pb_slider_container_inner’).innerHeight(),


    if (et_viewport_height > et_slider_height) {


    There is also a quick fix for the fullscreen slider but I’m not using it because I’m afraid it won’t work on some browsers and here is the css code:

    .et_pb_slide {

  50. Hi, is not working the full-height mode. Am I doing something wrong?

  51. what i must to fix my padding top. can i get the code?

  52. Hi
    My problem with “Fullwidth Slider” is not solve, my picture is stretch. As you see on my website is not looking good.

  53. any update about height issue?,
    i got not full height also..

    • yeeiiiy.. i fix it,

      add custom css = et_fullscreen_slider also on “full widht slider”


  54. another problem…..
    it looks like when first time loading, the page load page with not full page…

    after all full loading, then they do with full height…

    ummm how to describe this…:
    1. open page on browser
    2. page loading
    3. first opening is not full height picture… (still loading page)
    4. page finish loading…
    5. got full height picture….

    how to get first opening they got full height picture??

  55. Hi, I have done it several times, following closely all the instructions, but it does not work, in not full… all the images look like cute in the bottom side. Any help please?

  56. Hello, not working to me. Tried several times but nothing.

  57. Now working. 🙂

  58. Awesome – been after this for a long time! But have you tried enabling automatic animation on the slider? The slides flit around and go mental. When I turn it off, it’s just fine. Anyone else noticed this?

  59. I tried this but its not working for me 🙁 Please help me how it works!


  60. I noticed that my image was stretching within the Full Width slider.
    I had the Parallax effect on unintentionally. Turned it off and the image fits as expected.

  61. I have the same issue, slide is not full height only width. Any news on a fix yet??

  62. Sry but vor me only the css part seems to work. The script seems not doing anything still scroll bar on the right. It seems to be still picture 100% + header.

  63. The script seems not working for me. I get the full screen but with a scroll bar on the right because. 100% seems to added to the header so what am i supposed to to.

Join To Download Today

Pin It on Pinterest