PRICING How to Create a Full Screen Slider with Divi Posted on March 27, 2017 by Jason Champagne 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: 01 02 03 04 05 06 .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”: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
Wir benutzen Cookies, um unseren Lesern das beste Webseiten-Erlebnis zu ermöglichen. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Weiterführende Informationen erhalten Sie in der Datenschutzerklärung von