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 ».

Add a full-width module.

Start promoting your blog

Download dozens of Logos, banners, website templates and many other marketing tools to market your WordPress Blog. [Recommended]

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 ».

In "General Settings" add a new slide.

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

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]

  • 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)

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

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]

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 10 comments
  1. 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?

  2. 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

  3. 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

  4. 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