How to use the Divi Fullwidth Slider (Divi Theme Tutorial)

Learn how to best use the Full Width Slider in the Divi Theme by Elegant Themes. I show you how to set up each slide and customize the overall module so you can get stunning results on your website.
// DOWNLOAD DIVI:
creatorimpact.com/downloaddivi
// FULL IN DEPTH DIVI TUTORIAL PLAYLIST (build a website, step by step):
• DIVI THEME - How to Ma...
Please note that the above link is an affiliate link I earn commission from if you decide to make a purchase.
In this Divi Tutorial, I run through the Divi Slider options and design tools to really customize the look of each slide as well as get some general overall rules for the whole module.
It's a terrific theme with a powerful page builder the and the Slider included is excellent.
-- ⚒ // TOOLS // ⚒ --
The following are the tools I use and highly recommend. Some of these are affiliate links I earn a commission from, but this is what I use and swear by!
📺 USED FOR MY VIDEOS:
🔴 Camtasia (screen recording): creatorimpact.com/camtasia
📷 Camera - Canon Rebel T7i: amzn.to/3Qzsi28
🎙 Nicama Lavalier Mic: amzn.to/3BR5OW3
🎙 Audio-Technica Mic: amzn.to/3PivRbH
🖥 WEBSITE / WORDPRESS BLOGGING
🌍 WebHosting Siteground:creatorimpact.com/siteground
🔥 Divi WordPress Theme: creatorimpact.com/downloaddivi
⚙ All in One SEO Premium Plugin: creatorimpact.com/aioseo
📩 EMAIL NEWSLETTER:
📈ConvertKit: creatorimpact.com/convertkit
😍 DESIGN & PHOTO EDITING:
👁 Adobe Photoshop: creatorimpact.com/adobephotoshop
👁 Canva: creatorimpact.com/canva
👁 Penji Graphic Design Service: creatorimpact.com/penji
🔸 FREE KZbin Thumbnails PSDs: creatorimpact.com/free-youtub...
🔥 PREMIUM KZbin Thumbnails PSDs: creatorimpact.com/youtube-thu...
🔸 FREE Facebook Cover Images PSDs: creatorimpact.com/free-facebo...
🔥 PREMIUM Facebook Cover Images PSDs: creatorimpact.com/premium-fac...
FREE PHOTOS:
🔸 Unsplash: unsplash.com/
🔸 Pexels: www.pexels.com/
// LEARN MORE
🔗BEGINNER COURSE
Build a website, set up your presence online and start earning money:
creatorimpact.com/start-here/
// CREATOR IMPACT
🤘 Follow Creator Impact on Social Media!
🔗 Facebook: / creatorimpact
🔗 Instagram: / creatorimpact
🔗 Twitter: / creatorimpact

[@Your_fav_Fifi1]

As a beginner with Divi it was a very efficient turorial. Short but to the point. Thanks!

[@WadeMcMaster]

Thank you! I’m glad it was useful for you :)

[@foussenihema6839]

Hi. I must say thank you to you for this series. Very helpful even for someone like me who thought to be a kind of Divi specialist. I am taking time watch all the videos in one day. Plenty to learn in order to fill these small gaps. Congrat for your skills.

[@WadeMcMaster]

Very complimentary comment, thank you so much! I'm glad I could help :) I'm going to keep adding to this as regularly as possible as I've kind of let my Divi videos slip in the past.

[@larrymannino444]

This is probably the best slide tutorial for Divi I've seen - thanks, and just subscribed!

[@WadeMcMaster]

Thank you very much Larry! I really appreciate that uplifting feedback :) Have a good day mate!

[@sonchoydas]

Your Divi tutorials are awesome. It helped me a lot. Thanks, Wade. A tutorial for the mobile version would be nice.

[@WadeMcMaster]

Thank you Sonchoy, I'm defintitely going to make more of them, thank you so much for the compliment :)

[@armandogutierrez2880]

Very nice way to use and quick review about this tool, thanks for sharing your knowledge.

[@WadeMcMaster]

Thank you for the positive feedback Armando! I really appreciate it, have a great day :)

[@TheMawyin]

Greetings from Ecuador, thanks for the explanation, it is the best I have seen. I was looking to reduce the height, it is unbelievably big as you say and it is you who comes up with a solution. Thank you very much, you gain a new subscriber.

[@WadeMcMaster]

Thank you so much! I greatly appreciate you subscribun and leaving such a positive comment :) im so glad i was able to help, have a great day!

[@muddassirahmad36]

good tutorial keep it up

[@WadeMcMaster]

Thank you!

[@dedisupardi2815]

It's cool 🎉

[@ideaplusagency]

Seems like you talked about eveything except the actual "sliding" functionality options of a slide ...unless I missed it

[@WadeMcMaster]

I'm pretty sure I did, however I'm not in a position to rewatch and check. Essentially there's an animation section under the design tab where you can control the slide animation if that helps

[@AJD1300]

Does the slider not slide automatically from one slide to another... I am building this website, have used the fullwidth slider in the Hero section but have to manually click the arrows to slide from one slide to another.. Is there a way to make it slide automatically after a few seconds?

[@WadeMcMaster]

There are some animation settings in the design tab to turn that on, change timer, etc

[@khizarkhan8252]

Hii Wade McMaster how to swap the image and text in the slider i want text to the left side and image on the right side how to change this kindly let me know thanx

[@WadeMcMaster]

Hey mate, Sorry they haven't made it very simple. I'd check out this blog post: blog.tawfiq.me/divi-aligning-the-fullwidth-slider-image-right/

[@mmmnati]

Hi! Great video! Is there a way to make the slider with two buttons centered aligned on mobile?

[@WadeMcMaster]

Not using the standard options, but you could not use the button option, add two links next to each other in body text, then chanhe the link class to et_pb_button - divi would then style those links like buttons. Let mw know if that makes sense or not!

[@aidenthewoolf6583]

Hello, i have a question. Can we make the image on the backgorund of the slider be a yt video? i know it lets you put a url of a yt video as background but it gives me an error and doesnt let me.

[@WadeMcMaster]

I remember it used to work, but I can't get it to now. I would recommend compressing the video the best you can without losing quality and uploading it to your host. But it may slow down your page speed.

[@lauraexploramc]

Is there a way to link to the individual slides with a button or text link? i.e. a menu above the slider that allows you to skip to particular slides within the slider? For example: Let's say there is a slideshow with 3 sections, containing 10 slides for each section. Perhaps there is a title slide at the beginning of each section, and let's say you want to click a button to skip directly to the 3rd section. A button could be utilized to take you to the title slide of the 3rd set of slides. Is that possible? Can it be done without reloading the page?

[@lauraexploramc]

I am also wondering if it is possible to disable the left navigation arrow on the first slide, and the right navigation arrow on the final slide?

[@WadeMcMaster]

@@lauraexploramc Idont think you can remove one arrow. You also cannto create groups but you can turn off text animations and create severalslides where you simply change the background - so essentially the text remains static on certain slides while the background changes. I don't know if that is super helpful, but I usually reference this article for turning off animations to get that effect: divinotes.com/create-a-slider-with-static-text-using-the-divi-slider-module/ I hope that is helpful, it may not be exactly what tyou're after but i hope it helps.

[@WadeMcMaster]

I just realised i didnt answer your message about linking to the slides. I dont know how sorry :( apart forom the standard navigation options i dont know if its possible.

[@KevinRaymundSamson]

can we edit the full slider's height? if yes, can you tell us how it's done, please?

[@WadeMcMaster]

No worries, you can open up the fullwidth slider options (grey box, cog symbol) and in the design tab you can either: - under sizing, adjust the height there - or under margin/padding, adjust the top and bottom padding (space above and below the title, button etc) Hope that helps!

[@sashaleal5505]

How to customize this to be picture on top of text?

[@WadeMcMaster]

One hack you can try is leaving the title field etc blank, and put all of the content into the single content field (it has the formatting options and 'add media's above it) and add media in there

[@jannatislam6310]

may i know how to put the image on right side in the slider?

[@WadeMcMaster]

There's no simple way of doing it. But you can do it with CSS, not sure hwo stable it would be: 1. Open the FullWidth Slider Settings 2. Click the individual slide to open it's settings 3. Go to the top 'Advanced' tab 4. Under 'Slide Description' put in: "float: left;" (not including quotation marks) 5. Under 'Slide Image' put in: "left: 50%;" (not including quotation marks) Save and check it out. I would recommend viewing things on tbalet and mobile resolutions. The image does disappear. I haven't thoroughly tested thi sbut it appears to work on myt end just now :)

[@cmonster67]

How do you lay text over the image on the left?

[@WadeMcMaster]

Not super simple unfortunately :( Requires some CSS. Check out this blog post: blog.tawfiq.me/divi-aligning-the-fullwidth-slider-image-right/

[@mohammadshafeeq3471]

Is there a way to make the image top of the text

[@WadeMcMaster]

Hi Mohammad, if you use the 'Logo Image' area it should go above the text. If you get really stuck, leave the Title & Subtitle area empty, and put everything in the 'Body' area. That way you can add as much text and imagery as you like in the classic style editor.