How to Create a Fullscreen Slider with Divi

by | Oct 12, 2021 | Etcetera | 0 comments

A fullscreen slider can paintings in point of fact smartly because the header of your site’s homepage. The fullscreen side constantly helps to keep essential content material above the fold. And the slider capability lets in customers to peer further content material (or CTAs) with no need to scroll down the web page.

Making a fullscreen slider with Divi is unusually simple to do. The secret’s to offer your slider a peak this is relative to the browser peak after which do away with any further padding and width restrictions at the mother or father row or segment. In only a few mins, you’ll be able to 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 have a look at the design we’ll construct on this educational.

Obtain the Fullscreen Slider Format for FREE

To put your fingers at the designs from this educational, you’ll first want to obtain it the usage of the button underneath. To achieve get right of entry to to the obtain it is important to subscribe to our Divi Day by day e-mail listing through the usage of the shape underneath. As a brand new subscriber, you’ll obtain much more Divi goodness and a unfastened Divi Format pack each Monday! In case you’re already at the listing, merely input your e-mail deal with underneath and click on obtain. You are going to now not be “resubscribed” or obtain further 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 { coloration: #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 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 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;}

You could have effectively subscribed. Please test your e-mail deal with to substantiate your subscription and get get right of entry to to unfastened 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, make a choice the import tab and make a selection the obtain document out of your laptop.

Then click on the import button.

divi notification box

As soon as achieved, the segment structure might be to be had within the Divi Builder.

Let’s get to the academic, lets?

What You Want to Get Began

expanding corner tabs

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

  1. In case 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’ll have a clean canvas to begin designing in Divi.

Making a Fullscreen Slider in Divi

Phase 1: Putting in the Phase and Row

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

divi fullscreen slider

Phase Padding

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

  • Padding: 0px peak, 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 peak, 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 of span the overall width and peak of the row/segment with none gaps.

Phase 2: Developing the Fullscreen Slider

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

See also  How to Use the All Reviews WooCommerce Block

divi fullscreen slider

Upload Pictures to Each and every Slide

Earlier 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 situation, I’m the usage of the similar symbol for the slide symbol and background symbol (round 1920px through 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 person slide has a novel symbol and background symbol, we’re able to replace the settings for the slider basically.

Return to the slider settings and replace the next below 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 Energy: -6.5vw
  • Shadow Colour: #cf1259

divi fullscreen slider

Identify Textual content
  • Identify Font: Montserrat
  • Identify Font Weight: Extremely Daring
  • Identify Textual content Dimension: 5vw (desktop), 40px (pill and make contact with)

divi fullscreen slider

Frame Textual content

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

divi fullscreen slider

Button Types
  • Use Customized Types for Button: YES
  • Button Textual content Dimension: 16px
  • Button Background Colour: #cf1259
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Font Weight: Daring
  • Button Font Taste: TT
  • Button Padding: 15px peak, 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 ensure that the slider spans the overall peak of the browser window. That is the secret to meaking a fullscreen slider. The slider will already span the overall width of the browser window since the row width is 100%.

Slider Arrows

Underneath the Complex tab, replace the dimensions and place of the slider arrows through including the next customized CSS to the Slide Arrows CSS field:

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

divi fullscreen slider

This may increasingly make the slider arrows better on massive display screen sizes in addition to scale them all the way down to a smaller length on cell.

Phase 3: Subtracting Header Peak from Slider Peak

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

See also  WordPress vs HubSpot CMS

It is very important know the peak of the header (on desktop and cell) for this to paintings. In case you’re the usage of the default Divi header, the peak of the header might 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 upload the next customized CSS to the Primary Part of the slider and in addition for each and every person slide:

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

divi fullscreen slider

Ultimate Consequence

This is the overall consequence.

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

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 overall width of the browser after which give the slider a min-height of 100vh. In case you are the usage of a header, you’ll be able to upload a customized CSS snippet that may subtract the peak of the header to verify the fullscreen slider doesn’t prolong past the ground of the browser. With the ones key steps in position, you’ll be able to additional customise the slider (and slides) any manner you need the usage of all the tough design options integrated within the Divi Builder.

Use it to create stunning and efficient sliders in your hero segment that fills any display screen on any instrument.

I am hoping you revel in this handy addition for your Divi web page. I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; coloration: red; 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 put up How to Create a Fullscreen Slider with Divi gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment