Skip to Main Content

How to create a full screen slider on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

The full width slider comes with some awesome features including the ability to add sliders with video backgrounds. But, one feature that makes it even more powerful is the ability to expand the slider to display in full screen mode. So we'll show you how to add full screen functionality to a slider.

The addition of a full screen feature to the slider module of Divi is extremely easy to implement with a few lines of CSS and JavaScript. In just 5 minutes, you can convert your full width slider to a full screen slider that expands to fill the entire screen, much like full screen headers.

The implementation of the full-screen slider functionality on Divi

If you haven't read our tutorial on the presentation of the Divi interface, I invite you to do it.

Step 1: Add a slider with slides in full width mode

Use the " Divi Builder »Add a section« full width »And click on«  Insert a module ».

How to add a module on divi builder

Add a full-width module.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

add a module slider Divi #

In the Fullscreen Slider Settings, under the "Custom CSS" tab, add a CSS class called " et_fullscreen_slider ».

Advanced css modification of divi slider

In "General settings" add a new slide.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Add a diaspositive on divi

In the slide settings, under General Settings update the following items:

  • Category: [enter your heading]
  • Text Button: [enter your text button]
  • URL Button: [enter your URL button]
  • Background image: [add your background image] (I am using an image from unsplash.com)

Divi slide settings

Repeat this step for as many slides as you want to add.

Once done, click on " Save & Exit ».

How to add custom CSS & 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; }

click on the next tab and add the following javascript to the text box titled " Add the code to the head of your blog ":

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

(function($) {
 
 $(window).on('load resize', function() {
 $('.et_fullscreen_slider').each(function() {
 et_fullscreen_slider($(this));
 });
 });
 
 function et_fullscreen_slider(et_slider) {
 var et_viewport_width = $(window).width(),
 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');
 
 $(et_slider).height('auto');
 
 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) {
 var et_viewport_height = et_viewport_height - $main_header.height();
 }
 
 if (et_viewport_height > et_slider_height) {
 $(et_slider).height(et_viewport_height);
 }
 }
 
})(jQuery);

Finally

Now you have a full screen slider for your website. Use it to create effective fullwidth sliders for most browsers.

If you have any questions, do not hesitate to ask them.

Other Divi tutorials

This article features 12 comments

  1. Hello, great tutorial.
    On the other hand it is not displayed full screen on iphone for example, by tilting the iphone the slider is displayed from time to time in full screen but not all the time…. as if it weren't responsive, would you have any idea to fix this little problem?

    Thanks in advance,
    cordialement,

    1. Hello,

      Try to deactivate all the other plugins, also check that your versions of WordPress and Divi are up to date.

  2. Good afternoon, how can I customize the size of the slide to match the size of the banner image so that I can't crop the image?

  3. Hello,
    Thanks for this article. I have read that it is not necessarily necessary to install a child theme with Divi as long as we do not modify the CSS too much.
    There is still a little customization here ...
    So do you recommend a child theme before applying your super tutorial?
    Thank you in advance for all your good advice, I often draw inspiration from it 🙂

  4. Hello, very good article!
    I followed what was indicated in the article but my slider is not displayed in full screen on DIVI.
    Can you help me ? I would like to put it on my home page.

    Thanks for your help

  5. Hello,
    I am building my home page with builder… when I do a preview, I see the page.
    The problem is that when I save my page and open it again, the slider does not appear.
    Could someone please help me?

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
11 shares
Share5
tweet1
Save5