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 600.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 awesome features, including with the ability to add sliders with video backgrounds. But, a feature that makes it even more powerful is the ability to extend the slider to display in full-screen mode. So we'll show you how to add a full-screen feature on a slider.

Adding 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 into 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 have not read our tutorial on the presentation of the interface of Divi, 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 ».

Comment ajouter un module sur 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 Slider Settings a full screen, under the "Custom CSS" tab, add a CSS class called " et_fullscreen_slider ».

Css avancé modification de slider divi

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]

In "General Settings" add a new slide.

Ajouter une diaspositive sur 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 use an image of unsplash.com)

Paramètres des diapositive divi

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:

Easily create your Online Store

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

.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 labeled " Add the code to the head of your blog ":

Each {function () {and_fullscreen_slider ($ (this));}); }), And_slider_height = $ (et_slider) .find ('. Et_pb_slider_container_inner'). InnerHeight () and_slider_slider (et_slider) {var and_viewport_width = , $ Admin_bar = $ ('# wpadminbar'), $ main_header = $ ('# main-header'), $ top_header = $ ('# top-header'); $ (et_slider) .height ('auto'); If ($ admin_bar.length) {var and_viewport_height = and_viewport_height - $ admin_bar.height ();} if ($ top_header.length) {var and_viewport_height = ') .length) {var and_viewport_height = and_viewport_height - $ main_header.height ();} if (and_viewport_height> et_slider_height) {$ (et_slider) .height (and_viewport_height);}}} (jQuery); </ Script>

Finally

Now you have a slider in full screen mode for your website. Use it to create effective sliders in full width 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 does not display 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 he were not responsive, do you have an idea to solve 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 according to the size of the image of the banner so that I can not crop the image?

  3. Hello,
    Thank you for this article. I read that it was not necessary to install a child theme with Divi until you change the CSS too much.
    There is still a little customization ...
    So do you recommend a child theme before applying your super tutorial?
    Thank you in advance for all your good advice, I am often inspired by 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 homepage.

    Thanks for your help

  5. Hello,
    I build my homepage with builder ... when I do a previsualization, 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