HomeХобби и стильRelated VideosMore From: Darrel Wilson

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

358 ratings | 36618 views
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! http://www.darrelwilson.com/divi 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!
Html code for embedding videos on your blog
Text Comments (101)
krishna chaitanya (4 days ago)
Hello Darrel, it worked for me pretty well but please explain me how to make the full screen slider mobile responsive. Thank you once again.
Kristijan Benic (2 months ago)
Does anybody have the code to control the text on the mobile version? When i change the text location it goes way out of the picture on mobile. How can i fix this i would love to make this work.
Stephen Willem Nida (3 months ago)
Hi!!! Darrel, since i'm following you, 'i'm never, never disappointed, all your videos are so perfect, thank you for this, keep going on, waiting the next tutorials
Darrel Wilson (3 months ago)
thanks again, i appreciate it, these take time!
Ollie Stanley (6 months ago)
In the earlier Divi themes full screen slider images were easy. You just put your slider picture in the background option instead of the slider image option and that was it. The Irish say, "If it works, don't fix it." I can't imagine why Elegant didn't realize that web builders everywhere where posting full screen slider images this way with no hassle at all. Much of Divi's popularity is based on Elegant's no coding, drag and drop technology. So they decided to add some coding to produce an effect that didn't used to require it. I don't get it.
Abraham Bogerd Khao Lak (6 months ago)
Thanks for that
Darrel Wilson (6 months ago)
you are welcome!
Greg J Konop (6 months ago)
Thank you so much for the tutorial!! It worked great, but there was one problem I noticed. Before I put the css code in and I viewed the slider on iPad or cell phone it would be responsive to the size of the screen. Now with the css code it is a static image that gets cropped. Is there a way to fix that so it is still responsive? Thanks so much
Nick Barnes (1 month ago)
Did you find an answer on this Greg?
datendusche (7 months ago)
Some people have problems that i doesnt work: Try to disable automatic resizing of your logo when scrolling down. That fixed it!
Jake Pak (7 months ago)
Darrel, you're a god. You're more helpful than ET's support team! I was literally looking for a solution to this issue for hours. Tell Divi to start giving you higher commissions or something! lol
Manzar Mashhood (8 months ago)
Where is the LOVE button? :) #LoveFromPakistan
Darrel Wilson (8 months ago)
thanks brotha, appreciate it
Andrew Blakeley (8 months ago)
Is this responsive?
Michael Laszambouw (9 months ago)
Hi Darrel, i love your movies and know i'm trying to test my webdesign using divithemes 3.0.87 i use fullwitdh section and then insert fullwitdh slider and when i updated the page then see the result .... my picture isn't come with the full size width it's only small. why this happen ... https://ibb.co/n8RRyR .... please advice me
Rahim Nadeem (9 months ago)
hi can you please guide me how can i add full width slider ? or what is the code for that ?
Rahim Nadeem (9 months ago)
can you please share the link ?
Darrel Wilson (9 months ago)
i have a seperate video for this,
Trevor Bradford (10 months ago)
Thanks for the very quick response Darrel.
Trevor Bradford (10 months ago)
But where do we get the code?
Darrel Wilson (10 months ago)
its on my blog page, its in the description of this video
Délinquance Juvénile (11 months ago)
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!
Darrel Wilson (11 months ago)
hey its in the video also in the description
Himanshu Ladia (11 months ago)
mine's working without adding css in the main element. how ?
Mark Shirley (1 year ago)
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
Mark Shirley (1 year ago)
Darrel Wilson If you need just to put in a slide without the text and just want the image to keep its ratio it's impossible to use. The gallery module does it but you can't hyperlink the slides. If they coded in a hyperlink provision into the gallery slider I'd be very happy.
Darrel Wilson (1 year ago)
i think its good but does need some work, its not bad,
Mariano Pantano (1 year ago)
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!
Brian Jensen (1 year ago)
Thank you!
Darrel Wilson (1 year ago)
you are welcome!
shelley parker (1 year ago)
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?
Darrel Wilson (1 year ago)
it okay, its a learning process!
shelley parker (1 year ago)
I apologize it was my error. I had changed the page template and that affected my menu. Thanks again for this tutorial.
Carmilaaa (1 year ago)
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
Sterling Forums (1 year ago)
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.
FRITZ WILHELM (1 year ago)
Hey Darrel, How can I get rid of the vertical scrollbar on the right ? Thank you.
Darrel Wilson (1 year ago)
yeah change your page to fullwidth
Jayden Lawson (1 year ago)
Thanks. It's a bit different on the Divi blog https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-full-screen-slider-with-divi
Darrel Wilson (1 year ago)
thanks brotha! its easy huh
Jayden Lawson (1 year ago)
Yours works well without the need for javascript though!
Ros (1 year ago)
It's working but not responsive !!
Darrel Wilson (1 year ago)
they might have some custom CSS for you to help! just shoot them an email
Marico Pratama (1 year ago)
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?
Franco Guaglianone (1 year ago)
Thank you very much! =)
SoulStay (1 year ago)
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?
SoulStay (1 year ago)
Oh yeah good response. Laugh, admit you don't know how to respond, send me on my way, and then highlight your reply like it's an important comment. Good job Darrel. You could have at least said, well it looks like you did (or didn't) do it right, I don't know why it didn't work and don't have any other suggestions. You should probably contact Elegant Themes and see if they have any suggestions.
Darrel Wilson (1 year ago)
lmao, i saw these comments. I dont know were to start, you can always ask elegant themes for the css, they will give it to you.
SoulStay (1 year ago)
I just pushed the space bar and added lines that way and it works without text showing. More than one way to skin a cat. :)
SoulStay (1 year ago)
And it's weird. I added 2 lines of text in the above slider and you can't see the text. So I did it in another one and you can see the text. I don't understand. Do I have something weird going on in DIVI?
SoulStay (1 year ago)
Oh I did go in and add a couple rows of text and that worked. All the pictures as bigger now. So maybe that's the best method for me I guess. That's a nice little trick to know. :)
Web IN'ormandie (1 year ago)
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
Pepe Leches (1 year ago)
That's Great !!! :-)
Darrel Wilson (1 year ago)
thank you!
Mehedhi Hassan Pritom (1 year ago)
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
Kerry James (1 year ago)
Great tutorial, that slider was killing me!
Darrel Wilson (1 year ago)
thanks again, yeah it does need some improvement
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.
HI, Darrel told me that the best we can do is to be in contact with the Elegant Themes people and expose this issue to them. I have done a lot of tests too, but the problem is still there. I will report this issue to them.
Ashraf Jandali (1 year ago)
Hi I am having an issue with the module, if it look good on the desktop it looks bad on the tablet and mobile, I get big white spaces between the slider image and the next module, tried many things nothing worked.
Darrel Wilson (1 year ago)
strange! it also depends on the resolution of the monitor. the website will not look the same on a 1600x vs 4k resolution. I would probably ask elegant themes what is the best solution here for each device.
Lubo Enev (1 year ago)
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
Darrel Wilson (1 year ago)
howdy, its in the tutorial when i discuss the menu options
Lasse Bauer (1 year ago)
Nice tut, alrighty? ;)
Darrel Wilson (1 year ago)
ha thanks!
Tech Tic (1 year ago)
does slider revolution work with divi ?
Darrel Wilson (1 year ago)
yes it does, just insert the shortcode in a text module
aquilesnake (1 year ago)
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 :D )
Darrel Wilson (1 year ago)
i would try 1920x1080
Muhammad Hammad Anjum (1 year ago)
hi darrel, what should be the image size? kinldy suggested?
Darrel Wilson (1 year ago)
try a image around 1980x1020
Me Me (1 year ago)
Hey Darrel, Thanks for the video! Do you also have the code for the margin line? Tanks
Darrel Wilson (1 year ago)
there are two codes you have to enter, ill have a video on this monday!
Allan Seabrook (1 year ago)
Hi Darrel, I'm really enjoying and receiving great value from you videos! Since I'm a new to Divi 3.0, could you recommend a sequence I should follow in going through your videos? Thanks! Allan
Darrel Wilson (1 year ago)
hey allen, yaa try the one with the guy or the D with the green backround. I mostly teach divi. ill actually have more un February ^^
naxiand (1 year ago)
your header is transparent and when you scroll is white. how you accomplish this?
naxiand (1 year ago)
Darrel Wilson thanks :) is there an easy way to apply this only for the home page?
Darrel Wilson (1 year ago)
+naxiand theme customizer, header, reduce transparency bar. I have a tutorial on Divi on my other video
Maids On A Broom (1 year ago)
Hey Darrel, Another great video! Can you control the animation of the text in the slider? E.g. fade-in, fade-out, slide-in from left or slide-out, etc.
Darrel Wilson (1 year ago)
ahh i havent tried this yet ><
Awais Ahmad (1 year ago)
Thanks a lot, that really was a helpful video :) thumbs upPppPPP
Darrel Wilson (1 year ago)
thanks again!
Eli (1 year ago)
Great tutorial! Thanks!!
Vlad Vlad (1 year ago)
Hey Darrel ! Could you please make a video about a callback button?
Eric Or (1 year ago)
Great video, I have a question, there is any way to had the slider title, body text and button to pop up in different times, for example: after the slider image is showing up I want the title to fade in in 1 sec, the body in 1.5 sec and the button in 2 sec ?
Darrel Wilson (1 year ago)
with the magic of css, im sure you can. Elegant themes can probably provide this for you
Ravindra S Dhande (1 year ago)
Thanks for the tutorial.
Ravindra S Dhande (1 year ago)
Just putting the code in the Theme options made my full width slider full screen, i did not use the height:100vH; in the title css. Please check.
Will Aguilar (1 year ago)
First of all, thank you so much for the tutorial. I was wondering the same thing... Putting the first snip made the trick is it really necessary to paste the second part? Everything is working just wondering about the second part.
Darrel Wilson (1 year ago)
if it doesnt work out, try elegant themes, but thats the correct CSS. Maybe you pasted it in wrong? i know that can be annoying sometimes
Kossi Eric AMAWUDA (1 year ago)
Nice tutorial... You good
Darrel Wilson (1 year ago)
thanks mate!
BlackDeath12345 (1 year ago)
can u do a video about the email function for a static and dynamic WordPress site
Onuoha UI (1 year ago)
Thank you for this video.
Darrel Wilson (1 year ago)
thanks again
Franz (1 year ago)
You are the best!! Tnks :)
Darrel Wilson (1 year ago)
thanks and good luck!
Darrel Wilson (1 year ago)
Thanks for watching! Let me know if you have any questions
Naresh P (9 months ago)
For me, the full screen slider showing the image only at left side... even though the text is empty
Rishav sagar (10 months ago)
yes but it also changes height in mobile view that i dint want ,what i do
Vlad Vlad (1 year ago)
Hey Darrel ,is there any way to create a Real estate with divi theme? Perhaps you know some plugins which are free and good to go ?:D
Beagle Line Biased (1 year ago)
Darrel Wilson it was right on time. I was going insane with a header slider. Thank you!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.