This week we’re doing our second Divi Nation Short. It’s actually much shorter than most shorts will be as we move forward but I’ve been gearing up to attend Miami WordCamp and my week has been full of travel plans, packing, and gear testing. Nevertheless, I think we’ve got a great Divi Quick Tip for you today. Hope you enjoy!
Divi Nation Short – How to Get a Fullscreen Video Background When Using Divi’s Fullwidth Module
[powerpress]
In this episode of Divi Nation I provide you with a Divi Quick Tip that explains how to get a full screen video background when using Divi’s fullwidth header module. Something the fullwidth header module itself does not do, but that you can accomplish using your section background settings and transparency. See the video for full details and be sure to let me know if something doesn’t make sense or could be more clear.
Subscribe To Our Youtube Channel
All Subscription Options:
Update: If You Want to Stop the Video from Looping
If you do not want the background video to loop, do the following:
First, in your section background name your CSS Class “no-loop”. Then, navigate to Divi Theme Options > Integrations > Add to Body.
Paste the following snippet there and save.
<script>
(function($) {
$(document).ready(function() {
$('.no-loop .et_pb_section_video_bg').each(function() {
$(this).find('video').removeAttr('loop');
});
});
})(jQuery);
</script>
What Kinds of Divi Quick Tips Would You Like To See Next?
Ever since the first episode of Divi Nation I’ve been compiling lists of Divi Quick Tip Requests to cover in these types of segments/episodes. I get a few requests each week and I also see them crop up in the comments here on the blog, on YouTube, and on Facebook.
Unfortunately not every requests is something that we can cover. Some are requests require third party plugins, complicated/convoluted development solutions, or are simply impossible. And still others are soon to be resolved with the next update of Divi and so do not need a quick tip to address.
I mention this not to discourage people from requesting Divi Quick Tips but to impress upon you that we can never have enough. After all of the requests I receive go through these “filters” I’m often left with just one or two per month that I can cover on the podcast. Now that I have more time than ever to dedicate to these I’d love to make sure I’m addressing specific and important requests from the community. So keep them coming!
Is there a setting in the Divi Builder that you’re not sure how to use? Is there something you’ve been trying to accomplish with Divi that you haven’t been able to wrap your head around? Drop your request in the comments below and I’ll add it to my list!
I will also do my best to respond in the comments regarding which requests are “filtered out” according to the criteria I described above.
Hi there. great video, thank you. How can I add the sound and if possible have a “control” bar at the bottom (minimal features) for a MP4 video so the viewer is able to turn sound on/off and pause/play the video?
Thanks Nathan for you interesting tip!
I wander to know how you got (with Divi) the “mobile” nav icon on the top right.
Is there a trick with Divi or you used another plugin?
Thanks in advance!
Andy
I love, love, love this tip, but am having a hard time getting the slider to go full screen. I’m using the Elegant Theme Deep Focus, with the Divi Builder to create a new home page. I’ve created an uploaded a video that’s 1920×1080, and followed your settings to make it full screen. It only plays w/in the structure of the page (I have it set to full-width page), not full width/edge to edge. Any thoughts?
Ah, I see what you mean now. The issue here is that the Divi Builder Plugin works within the existing theme’s page container and is not able to override it without a new page template being added. So it won’t go edge-to-edge unless your theme has a page template that goes edge-to-edge.
So right now there is no simple way to get the slider to display as a fullscreen background. Out devs have informed me that it is in fact a pretty complex feature that wouldn’t be a good fit for Divi Quick Tip 🙁
I actually set it up as a Full Width Header, not slider. Any thoughts on what I’m missing?
(My fault, I said ‘slider’ on the first comment).
Hi.
It would be great to create a tutorial on how to implement a CTA button in the header ?
thanks
We actually already covered that one. Here is the link to the video https://www.youtube.com/watch?v=IxIQkbCVs_g&list=PLF17V-5878mWVOcXf16DqIwStUtMS53ef&index=8
Hi,
Always show the final product first before you proceed to illustrate the means to achieving the final product. The same applies to all your Divi tutorials. The final product sets the direction and destination, and it provides a purpose to following your video. It’s like a marathon run. You should at least inform the participants the actual distance to be covered before you get them running. It’s a complete opposite experience to start running a marathon without knowing for sure the distance until you reach the finishing line.
Hi, can I put a YouTube video URL to be a backround video?
No, that’s not an option right now.
Thank you for the video, Nathan. I did this the other day the same way you just did it, so it was a nice confirmation that I did it “the right way”. ^^
That’s awesome Oliver 🙂
Just found this, great post! Looking forward to testing it out. Have seen quite a few sites with image backgrounds, but not so much with a video.
Great another great update Divi wonderful, congratulations
This was a helpful tip, thanks a lot!
And I’d like to see in another quick tip tutorial if you can make just an email field with the divi’s subscribe module.
Apparently it can’t be done, as the subscribe module has by default 3 fields (name, surname and email) – and this is hindering the people to subscribe…
Thanks Brent, I’ll see what I can do 😉
Hi Nathan,
I like Divi. I built approx. 30 Divi website.
What I can not do Divi:
– More columns (5-6)
– CSS animation modules
Unfortunately, these features are not Divi, the other sitebuilder is already a standard feature.
Other themes and Divi builder full with section and full with modules will not be full-width.
Hi Szabolcs,
You are correct. When using the Divi Builder with other WordPress themes it is confined to their page containers. So if you have a theme you’re using with fullwidth page containers you can get fullwidth Divi modules.
Best,
Nathan
Hi Nathan,
Do you plan to implement Youtube support for a fullwidth header?
It will be great if you use a tag for posts to quickly find all Divi Quick Tips.
Regards,
Igor
Hi Igor,
I’m not sure if adding YouTube support for the fullwidth header is something we plan to do or not. It’s always hard to say for sure what will be in a release or not until the final decisions are made. The best way to know for sure is to keep an eye out for our sneak peek posts.
If you’re looking for more Divi Quick Tips, we’ve compiled them all on our YouTube channel into a playlist.
https://www.youtube.com/playlist?list=PLF17V-5878mWVOcXf16DqIwStUtMS53ef
Best,
Nathan
Thanks for sharing
Divi Nation Shorts and Quick Tips are the bomb!
Appreciations for these precious little insights. Any other tips that denote the existing options and techniques within DIVI, to make the webmaster’s [our] work easier and effective, would be wonderful.
Maybe a couple of CSS incorporation examples within the Modules, might be nice. Showing off the ‘Before’, ‘Main Element’ and ‘After’ Custom CSS fields (et. al.) and, how these compare with making your CSS insertions directly within the ePanel section… How these two (above) CSS insert locations work, together (and/or against each other) within DIVI.
All the Best, Nathan!
Hi,
I’d like to know how to make a row with more than 4 columns.
Thanks!
Walter
Hi Nathan,
Great video, well explained! Thank you… I’ll be using that idea for sue!
My question is actually about the cool swirling transition that you used in the actual tutorial video… Where is that from? I love it! Was that a transition for your editing software? I could really use something along those lines.
Actually that is a motion graphic made in Adobe After Effects. If you have an Adobe CC subscription you have access to After Effects. There are tutorials all over the place (YouTube) for how to make different transitions like that. Or, you can purchase them pre-made on sites like Videohive.net.
Excellent, thank you Nathan! I’ll investigate.
I’m just getting into Motion 5, perhaps I can produce something similar in there. All good! (I do have CC as wel)
Cheers!
Nathan – I like the “short” short video for this week. It was a super quick tidbit I could fit into my day easily. Maybe trickle some of these short shorts in every once in a while. 🙂
I’ll keep that in mind. Thanks!
Nice short! I’m not big on podcasts because they take too long, but short tuts like this are perfect.
I follow tutvids on YouTube – he does very short (1 minute) tutorials on Photoshop & Illustrator – usually every day.
Doesn’t mean your shorts need to be 1 minute… but the appeal is to learn one small thing everyday. Keep the shorts coming!
Thanks Bob!
i would like to make the video stop instead of loop, is there a way to do that?
Hi Patricia,
I’ve added a little section to the post above to address this question.
Best,
Nathan
Hi,
I’m trying to get support from your website support page. There is none available as far as I can see. I’ve even tried to raise this on your facebook page. Absolutely nothing. You choose to ignore your customers?
Oh no! I’m sorry you haven’t received a response yet. That’s super frustrating. We are happy to help via our support forum but we can’t address everyone right away. If you’ve had a support ticket that’s gone unanswered for longer than 24 hours drop the link here in response to this comment and I’ll make sure someone takes a look as soon as possible.
Nathan,
I would like a tutorial, video or otherwise, that explains how Divi Builder can be used with another theme. It seems to me at first glance, that a non-divi theme will have elements that are by definition not-divi-able. Possibly, that’s why I might be interested in using the theme. But, I have to use the Divi builder and all its components, won’t I wind up turning my non-divi theme into Divi? And if so, then what’s the point of using the builder on a non-divi theme? Or am I missing something? And if I AM, then THAT’S what I’m looking for in a tutorial. I have asked this repeatedly in various places, both on ET and on Divi forums and child-theme building sites and I never get ANY answer. Can you help? And if you can, would you send me an email so I don’t miss it? Thanks.
Hey Randy, thanks for the request. I think this is a great idea. However, it’s incredibly broad since there are so many other themes out there and reasons why some people might want to use them w/ the Divi Builder. The three biggest reasons I can think that someone would want to use the Divi Builder with another theme are as follows: 1) They don’t want to switch frameworks but would like to start creating the kinds of posts and pages that DB is great at; 2) They want different headers and footers than what come with Divi; 3) They want to take advantage of another theme’s built in features–whether that be widgets, php templates, or something else.
I think a good write up or video for this topic would have to select a specific theme and possibly even a specific use case in order for it to have a sharp enough focus for it to be interesting and useful.
I ask all this because ET ADVERTISED that the Divi PB COULD be used on other themes. I quote:
“Use It On Any Theme
The Divi Builder plugin is compatible with any theme, and can be used to create beautiful and fluid layouts inside content areas of any size and shape.” [http://www.elegantthemes.com/plugins/divi-builder/]”
To me that indicates I ANY other provider and use DPB.
My question, then, is IF THAT IS SO, how does that work? How can I maintain the characteristics of the alternate theme and still build it using the power of DPB? Won’t using DPB essentially turn that alternate theme into the DIVI theme?
Ah, I think I see what you mean. This probably could have been worded better so let me give it a shot here:
Any theme you use the Divi Builder Plugin with will retain its own header, footer, and page templates. So those are the things that will make it different.
The other theme will in no way affect the elements of the builder itself.
However, any built-in functionality or widgets in the other theme will also help to differentiate it.
What the Divi Builder Plugin does is work within the content container that the other theme comes with. So fullwidth modules will go fullwidth across that theme’s content container–which may or may not go all the way to the edges of the page.
So yes, it is designed to work with any theme, but within the constraints of that theme’s page containers.
Does that answer you question?
That is a good question… I use Divi now, but never thought of using the builder on another theme. Maybe it would be best to keep current content and post you have on new theme, but from that point forward you use new theme for all new content.
Or, maybe it uses current themes styling…. not sure, but great question.
What microphone is that?
I’m using the Rode Procaster. It’s a great mic for broadcasting or podcasting. Love it.
Great tip – thanks!
Hello,
thank you for nice tip. I would like to ask you if is possible make filterable portfolio looks as fullwidth portfolio. I know I can do section fullwidth. I have still big gutters and isn’t look nice.
Thanks
Hey Nathan, again, a great tip. Shouldn’t it be in the Quick Tips videos? Moreover, don’t you get crazy making all that volume of content? Anyway, I do like very much the shorter DiviNation, it’s difficult to find time here too!
Cheers!
Thanks Sergio! I will be adding it to the Divi Quick Tip playlist on our YouTube Channel. This format seemed simpler for the purposes of this post.
I just want to say – awesome. I like these episodes that show us tips and tricks.
Oh also. Nice bar behind your desk!
Haha, thanks Natalie. Besides WordPress I’m a big fan of books and whiskey 🙂
Nice tip!
I’m wondering if there is a way to make fullscreen other elements, especially those that are not in fullwidth section. Like, everytime I scroll down the screen the next section will be fullscreen as well, regardless of the resolution of the screen.
If you do the video background what does it look like on a mobile device? Is there a way to make it have a different background if someone is using a mobile phone?
Right now video backgrounds are not supported on mobile.
What is the native dimension of the video uploaded? How should it be encoded to reduce load time but have relative good quality? Tips for best practices?
Native dimensions are 1920×1080. So 1080HD. When it comes to encoding, that’s tricky. If, like me in this example, you are using an overlay you can probably afford to encode down. By which I mean to choose lower quality settings than you might if you were uploading a regular video to YouTube or Vimeo. Also, I’d recommend using very short videos that loop. My video ended up being less than 4MB.
Make sense? Anything else?
4 MB is already a lot for a web page. Does the theme at least make the video loading the last priority?
Hi Nathan and first, good welcome back with your interesting podcast. ET themes are so creative that it’s difficult request a quick tip. Only one linked to the needs of the moment: how custom text in new imagine module hover.
My compliments and a good job for you and all ET team
Alberto
I just want to make sure I’m understanding your request:
You want to know how to add text in or over an image module?
When image overlay with icon. Text instead icon. Usefull to give more information “surprising”.
Thank’s a lot
Alberto
Oh ok. Using text instead of an icon for image overlay. I’ll look into it!
Hi Nathan, I agree with Alberto (or at least I think I agree).
I would love to see a tutorial on how to add textual overlay on hover, especially on /project/ (portfolio) thumbnails like it is on the Vertex Theme.
Thanks!
Interesting, but that has to really impact load time, no?
If you wanted to use a CDN or separate media host for video all you have to do is put the appropriate link in the video upload section.
Hi Nathan,
Thanks for the video. When say separate media host, are you referring to using a YouTube or Vimeo url?
Hey Pat, I may have misspoke above. So according to our lead dev Yuri if it is possible to use a CDN or separate media host already it may be possible to serve this video that way. However, we have not tested it yet so I cannot be certain this will work. I do know for sure though that YouTube or Vimeo links will not work in this instance.