How To Make The Divi Slider Fullscreen | Divi Theme 3.0 Customization

This is a quick tutorial on how to make the divi slider fullscreen. The divi slider for the divi theme doesnt come like this standard, so you will need to enter some CSS to get the results!

Here is the CSS You will need to Enter In

Add this in theme options for the divi theme
Add In Theme:
.et_pb_slide {
height: 100vh;
}

After this, you will need to go to the divi slider module and paste this in the Main Element:
main element
height: 100vh;

Shortly after this, you will need to paste this in the “slide title”
margin-top: -200px !important;

For more tutorials like this, or to learn how to make a wordpress website feel free to visit my website. Also make sure to subscribe to my newsletter where i give away divi layouts!


Posted

in

by

Tags:

Comments

26 responses to “How To Make The Divi Slider Fullscreen | Divi Theme 3.0 Customization”

  1. Délinquance Juvénile Avatar

    Very helpful, thank's a lot! By the way, how you do the small separators that you show at the beginning of the video please? Thank you!

  2. Himanshu Ladia Avatar

    mine's working without adding css in the main element. how ?

  3. mark shirley Avatar

    Divi's slider is terrible – I wish they would make a simple slider that doesn't need text to pad it out. Very frustrating – I've contacted them but they don't reply – all I want is slides that don't crop

  4. Mariano Pantano Avatar

    GREAT TUTORIAL DUDE… been in wordpress for some months and also in DIVI AND THIS IS, SO FAR, THE BEST SOLUTION I´VE FOUND TO CONTROL DIVI SLIDER SIZE! thanks!

  5. shelley parker Avatar

    This really helped a lot, but I think it caused my top primary menu to disappear. I just noticed my header menu is completely gone from my home page (where I placed the slider at the top) yet my header menu does appear on my other pages where the slider does not reside. Any ideas please?

  6. Carmilaaa Avatar

    Hi Darrel,
    Do you have any tutorials on how to have the images in the background sliding but the same static text? I know Elegant Themes has a tuto on that but it doesnt work for me
    Thanks mate, I've been following you since you started, great tutorials!! xx

  7. Sterling Forums Avatar

    VERY important question. How can I the text text over? I want to put a fair amount of text in and for some reason the max width of text isn't working.

  8. FRITZ WILHELM Avatar

    Hey Darrel, How can I get rid of the vertical scrollbar on the right ?
    Thank you.

  9. Ros Avatar

    It's working but not responsive !!

  10. Marico Pratama Avatar

    Great tutorial bro, thanks, one question, if i change that height from 100vh into 600px, how image resolution that i need for that screen size?

  11. Franco Guaglianone Avatar

    Thank you very much! =)

  12. SoulStay Avatar

    I don't get it. It doesn't do anything for mine. I have DIVI 3, pasted the code in Theme Options and saved, and then pasted the code in the Slider CSS and saved. When I changed the number in the Slider CSS like you do in the video, nothing. I can drag the bottom line in for the slider in Visual Builder and show more of the background picture, but the area for the picture stays the same. I even changed the 100vh to 400vh and nothing.
    I have this first picture in the slider that's bigger than the others and it only shows from her nose up, so I wanted to at least display the other half of her face. I just made the picture smaller and that worked. I just wanted to do it this way and learn a new trick.
    Any suggestions? Maybe there's something else in the theme or slider that I need to adjust?

  13. Web IN'ormandie Avatar

    Hi Darrel
    Many thanks for this ! I was tearing my hair for days to find a solution to my problem of displaying sliders full screen on screens of different sizes. Just : regarding one comment here I used % instead of px for placement of text into the slide, It seemed more relevant… I will see over time if it works

  14. Pepe Leches Avatar

    That's Great !!! 🙂

  15. Mehedhi Hassan Pritom Avatar

    I like your videos very much and it's very helpfull for me to learn wordpress by using divi theme…..plz make more videos about divi theme on css customixation…….realy man you are a mall

  16. Kerry James Avatar

    Great tutorial, that slider was killing me!

  17. Comment Avatar

    Using the margin like that is a very poor way of positioning and it will likely cause issues on weird display resolutions. What you should do is relatively position the parent element of the text and absolutely position the text from either side of the screen. If you did want to have the text near the center, it would be better to set a percentage width (say 50%) for the text and use text align left or right depending on which side the container is. Although by default it will be on the top left. So you should float it or use flexbox. If you don't use flexbox, make sure to vertically center both containers for the title and subtext. But make sure to clear your floats at the end of the page content. It almost seems as though you don't know how to write in HTML/CSS which is pretty scary considering how basic it is, but whatever. Maybe this helped.

  18. Jorge Juan Fusté Tortosa Avatar

    Hi Darrel,
    First of all, many thanks for your tutorials. They are really helpful.
    Just one thing about this tutorial: when I have found the css position for the button and, in fact, I can see it correctly on the desktop screen (27 inches) but if I want to see the page on a MacBook Pro (15,4 inches) the call to action button disappears from the screen. I mean it does not remains sticked on the same position. Its behavior seams not to be responsive. It changes on the iPhone too whether I see it vertically or horizontally. Could it be a lack of css code?
    Could you help me in this matter?
    Thank you very much in advance.
    Regards.

  19. Lubo Enev Avatar

    Hi Darrel, nice tutorial. Just asking as I can see on the video there is a 'hamburger' menu there, is it really and how to show it exactly there on the top right for example

    thanks a lot

  20. Lasse Bauer Avatar

    Nice tut, alrighty? 😉

  21. Tech Tic Avatar

    does slider revolution work with divi ?

  22. aquilesnake Avatar

    dude, wich is the size (px)for responsive? When put the option broke the size of my slide 🙁 )(the min px and max, please for try 😀 )

  23. Muhammad Hammad Anjum Avatar

    hi darrel,

    what should be the image size? kinldy suggested?

  24. Me Me Avatar

    Hey Darrel, Thanks for the video! Do you also have the code for the margin line? Tanks

Leave a Reply

Your email address will not be published. Required fields are marked *