A fullscreen slider can paintings in point of fact smartly because the header of your web site’s homepage. The fullscreen facet persistently assists in keeping essential content material above the fold. And the slider capability permits customers to look further content material (or CTAs) with no need to scroll down the web page.

Making a fullscreen slider with Divi is strangely simple to do. The bottom line is to offer your slider a top this is relative to the browser top after which eliminate any additional padding and width restrictions at the dad or mum row or segment. In only some mins, you’ll create a fullscreen slider that expands to fill all of the display screen on web page load and glance 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 instructional.

Obtain the Fullscreen Slider Structure for FREE

To put your palms at the designs from this instructional, you’re going to first want to obtain it the use of the button beneath. To realize get admission to to the obtain it is important to subscribe to our Divi Day-to-day electronic mail listing by means of the use of the shape beneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Structure pack each and every Monday! When you’re already at the listing, merely input your electronic mail cope with beneath and click on obtain. You’ll now not be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media best display screen 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 !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Download For Free

Obtain For Unfastened

Sign up for the Divi E-newsletter and we will be able to electronic mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of alternative superb and loose Divi assets, guidelines and methods. Practice alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely kind on your electronic mail cope with beneath and click on obtain to get admission to the structure pack.

You could have effectively subscribed. Please take a look at your electronic mail cope with to verify your subscription and get get admission to to loose weekly Divi structure packs!

To import the segment structure for your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, choose the import tab and make a choice the obtain document out of your laptop.

Then click on the import button.

divi notification box

As soon as accomplished, the segment structure can be to be had within the Divi Builder.

Let’s get to the educational, lets?

What You Wish to Get Began

expanding corner tabs

To get began, it is important to do the next:

  1. When you haven’t but, install and activate the Divi Theme.
  2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
  3. Make a selection the choice “Construct From Scratch”.

After that, you’re going to have a clean canvas to start out designing in Divi.

Making a Fullscreen Slider in Divi

Section 1: Putting in place the Segment and Row

To start out, upload a one-column row to the segment.

divi fullscreen slider

Segment Padding

Sooner than including a module, open the segment settings and take out the highest and backside padding as follows:

  • Padding: 0px height, 0px backside

divi fullscreen slider

Row Settings

Subsequent, open the settings for the row and replace the next:

  • Width: 100%
  • Max Width: 100%
  • Padding: 0px height, 0px backside

divi fullscreen slider

Now that our segment and row padding has been got rid of and our row width is 100%, the slider we will be able to upload to the row will be capable to span the whole width and top of the row/segment with none gaps.

Section 2: Growing the Fullscreen Slider

To create the fullscreen slider, upload a brand new slider module to the row.

divi fullscreen slider

Upload Pictures to Each and every Slide

Sooner than updating the overall slide settings, open the settings for the primary default slide and upload a picture and background symbol to the slide. For this case, I’m the use of the similar symbol for the slide symbol and background symbol (round 1920px by means of 1500px).

divi fullscreen slider

Then open the settings for the second one slide and upload other symbol and background symbol to the slide.

divi fullscreen slider

Replace Slider Settings

Now that each and every particular person slide has a singular symbol and background symbol, we’re able to replace the settings for the slider usually.

Return to the slider settings and replace the next underneath the design tab:

Background Overlay
  • Use Background Overlay: YES
  • Background Overlay Colour: rgba(27,18,38,0.74)

divi fullscreen slider

Symbol Field Shadow
  • Symbol Field Shadow: see screenshot
  • Field Shadow Horizontal Place: -8vw
  • Field Shadow Vertical Place: -8vw
  • Field Shadow Unfold Power: -6.5vw
  • Shadow Colour: #cf1259

divi fullscreen slider

Name Textual content
  • Name Font: Montserrat
  • Name Font Weight: Extremely Daring
  • Name Textual content Measurement: 5vw (desktop), 40px (pill and contact)

divi fullscreen slider

Frame Textual content

  • Frame Font Weight: Semi Daring
  • Frame Textual content Measurement: 16px
  • Frame Line Peak: 1.8em

divi fullscreen slider

Button Kinds
  • Use Customized Kinds for Button: YES
  • Button Textual content Measurement: 16px
  • Button Background Colour: #cf1259
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Font Weight: Daring
  • Button Font Taste: TT
  • Button Padding: 15px height, 15px backside, 30px left, 30px proper

divi fullscreen slider

Slider Peak and Content material Width
  • Content material Max Width: 90%
  • Min Peak: 100vh

divi fullscreen slider

Giving the slider a min-height of 100vh will be sure the slider spans the whole top of the browser window. That is the secret to meaking a fullscreen slider. The slider will already span the whole width of the browser window for the reason that row width is 100%.

Slider Arrows

Underneath the Complicated tab, replace the scale and place of the slider arrows by means of including the next customized CSS to the Slide Arrows CSS field:

font-size: 8vw !essential;
margin-top: -4vw;

divi fullscreen slider

This may occasionally make the slider arrows higher on massive display screen sizes in addition to scale them right down to a smaller length on cellular.

Section 3: Subtracting Header Peak from Slider Peak

When you’ve got a header at the web page, the fullscreen slider will in truth prolong a little beneath the browser window. It is because the peak of the header pushes down the slider which recently has a top of 100vh (100% of the viewport/browser top). To stay the slider from being driven beneath the browser’s viewport, you’ll upload a CSS calc() serve as to subtract the peak of the header from the peak of the slider.

It is important to know the peak of the header (on desktop and cellular) for this to paintings. When you’re the use of the default Divi header, the peak of the header can be 80px. So the peak of the slider must be 100vh – 80px.

So as to add the customized top, open the settings for the slider and upload the next customized CSS to the Primary Part of the slider and likewise for each and every particular person slide:

min-height: calc(100vh - 80px)!essential;

divi fullscreen slider

Ultimate Outcome

This is the general consequence.

And this is how the design seems to be on pill and contact.

divi fullscreen slider

divi fullscreen slider

Ultimate Ideas

The important thing steps to making a fullscreen slider in Divi are to arrange the segment and row to span the whole width of the browser after which give the slider a min-height of 100vh. In case you are the use of a header, you’ll upload a customized CSS snippet that can subtract the peak of the header to ensure the fullscreen slider doesn’t prolong past the ground of the browser. With the ones key steps in position, you’ll additional customise the slider (and slides) any method you wish to have the use of the entire robust design options integrated within the Divi Builder.

Use it to create gorgeous and efficient sliders to your hero segment that fills any display screen on any tool.

I’m hoping you revel in this convenient addition for your Divi web page. I sit up for listening to from you within the feedback.


.inline-code{padding: 0px 4px; shade: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} 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 publish How to Create a Fullscreen Slider with Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]