A fullscreen slider can work rather well because the header of your web site’s homepage. The fullscreen facet persistently retains necessary content material above the fold. And the slider performance permits customers to see extra content material (or CTAs) with out having to scroll down the web page.
Making a fullscreen slider with Divi is surprisingly simple to do. The secret is to offer your slider a peak that’s relative to the browser peak after which eliminate any further padding and width restrictions on the guardian row or part. In only a few minutes, you may create a fullscreen slider that expands to fill your entire display on web page load and look nice on all units.
Let’s get began.
Sneak Peek
Here’s a fast take a look at the design we’ll construct on this tutorial.
Obtain the Fullscreen Slider Format for FREE
To put your fingers on the designs from this tutorial, you’ll first have to obtain it utilizing the button beneath. To realize entry to the obtain you have to to subscribe to our Divi Day by day e mail checklist through the use of the shape beneath. As a brand new subscriber, you’ll obtain much more Divi goodness and a free Divi Format pack each Monday! If you happen to’re already on the checklist, merely enter your e mail handle beneath and click on obtain. You’ll not be “resubscribed” or obtain further emails.
@media solely display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container type enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container type button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}
Obtain For Free
Be a part of the Divi E-newsletter and we’ll e mail you a duplicate of the last word Divi Touchdown Web page Format Pack, plus tons of different superb and free Divi sources, ideas and methods. Observe alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely sort in your e mail handle beneath and click on obtain to entry the format pack.
You’ve got efficiently subscribed. Please examine your e mail handle to verify your subscription and get entry to free weekly Divi format packs!
To import the part format to your Divi Library, navigate to the Divi Library.
Click on the Import button.
Within the portability popup, choose the import tab and select the obtain file out of your pc.
Then click on the import button.
As soon as finished, the part format shall be obtainable within the Divi Builder.
Let’s get to the tutorial, lets?
What You Have to Get Began
To get began, you have to to do the next:
- If you happen to haven’t but, set up and activate the Divi Theme.
- Create a brand new web page in WordPress and use the Divi Builder to edit the web page on the entrance finish (visible builder).
- Select the choice “Build From Scratch”.
After that, you should have a clean canvas to begin designing in Divi.
Making a Fullscreen Slider in Divi
Half 1: Organising the Part and Row
To begin, add a one-column row to the part.
Part Padding
Earlier than including a module, open the part settings and take out the highest and backside padding as follows:
- Padding: 0px prime, 0px backside
Row Settings
Subsequent, open the settings for the row and replace the next:
- Width: 100%
- Max Width: 100%
- Padding: 0px prime, 0px backside
Now that our part and row padding has been eliminated and our row width is 100%, the slider we’ll add to the row will have the ability to span the complete width and peak of the row/part with none gaps.
Half 2: Creating the Fullscreen Slider
To create the fullscreen slider, add a brand new slider module to the row.
Add Photos to Every Slide
Earlier than updating the overall slide settings, open the settings for the primary default slide and add a picture and background picture to the slide. For this instance, I’m utilizing the identical picture for the slide picture and background picture (round 1920px by 1500px).
Then open the settings for the second slide and add completely different picture and background picture to the slide.
Replace Slider Settings
Now that every particular person slide has a singular picture and background picture, we’re able to replace the settings for the slider generally.
Return to the slider settings and replace the next below the design tab:
Background Overlay
- Use Background Overlay: YES
- Background Overlay Coloration: rgba(27,18,38,0.74)
Picture Field Shadow
- Picture Field Shadow: see screenshot
- Field Shadow Horizontal Place: -8vw
- Field Shadow Vertical Place: -8vw
- Field Shadow Unfold Power: -6.5vw
- Shadow Coloration: #cf1259
Title Textual content
- Title Font: Montserrat
- Title Font Weight: Extremely Daring
- Title Textual content Measurement: 5vw (desktop), 40px (pill and telephone)
Physique Textual content
- Physique Font Weight: Semi Daring
- Physique Textual content Measurement: 16px
- Physique Line Peak: 1.8em
Button Kinds
- Use Customized Kinds for Button: YES
- Button Textual content Measurement: 16px
- Button Background Coloration: #cf1259
- Button Border Width: 0px
- Button Border Radius: 0px
- Button Font Weight: Daring
- Button Font Model: TT
- Button Padding: 15px prime, 15px backside, 30px left, 30px proper
Slider Peak and Content material Width
- Content material Max Width: 90%
- Min Peak: 100vh
Giving the slider a min-height of 100vh will be sure that the slider spans the complete peak of the browser window. That is the important thing to creating a fullscreen slider. The slider will already span the complete width of the browser window as a result of the row width is 100%.
Slider Arrows
Beneath the Superior tab, replace the scale and place of the slider arrows by including the next customized CSS to the Slide Arrows CSS field:
font-size: 8vw !necessary; margin-top: -4vw;
It will make the slider arrows bigger on massive display sizes in addition to scale them all the way down to a smaller dimension on cellular.
Half 3: Subtracting Header Peak from Slider Peak
If in case you have a header on the web page, the fullscreen slider will truly lengthen a bit beneath the browser window. It’s because the peak of the header pushes down the slider which at the moment has a peak of 100vh (100% of the viewport/browser peak). To maintain the slider from being pushed beneath the browser’s viewport, you may add a CSS calc() perform to subtract the peak of the header from the peak of the slider.
You have to to know the peak of the header (on desktop and cellular) for this to work. If you happen to’re utilizing the default Divi header, the peak of the header shall be 80px. So the peak of the slider must be 100vh – 80px.
So as to add the customized peak, open the settings for the slider and add the next customized CSS to the Essential Component of the slider and in addition for every particular person slide:
min-height: calc(100vh - 80px)!necessary;
Ultimate End result
Right here is the ultimate consequence.
And right here is how the design appears to be like on pill and telephone.
Ultimate Ideas
The important thing steps to making a fullscreen slider in Divi are to arrange the part and row to span the complete width of the browser after which give the slider a min-height of 100vh. If you’re utilizing a header, you may add a customized CSS snippet that can subtract the peak of the header to verify the fullscreen slider doesn’t lengthen past the underside of the browser. With these key steps in place, you may additional customise the slider (and slides) any manner you need utilizing the entire highly effective design options included within the Divi Builder.
Use it to create stunning and efficient sliders on your hero part that fills any display on any gadget.
I hope you get pleasure from this handy addition to your Divi web site. I look ahead to listening to from you within the feedback.
Cheers!
.inline-code{padding: 0px 4px; coloration: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!necessary} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}
The put up Methods to Create a Fullscreen Slider with Divi appeared first on Elegant Themes Weblog.