☝Btw - not all my web designs are perfect-the title was just to catch your attention 😅 But check out my designs here: nicolaipalmkvist.com/get-templates
No your designs are better than perfect, Nic.🤩❤ Btw can I have the chocolate melting video. "I'm not selling or distributing. I'm just showcasing my websites in my thumbnails and in my portfolio in Fiverr." It would be deeply appreciated.🥰
Just a quick clarification about this video. When using a background video in the hero section, keep in mind that video files can impact your website’s speed. It’s important to compress the video file or load it externally. If your primary goal is to rank high on Google and have a lightning-fast website, you should be cautious about using videos. However, if your goal is to create a “wow” experience for your visitors or boost brand awareness, a background video can work really well. Just wanted to point that out💪
Why serve the video bandwidth on your own hosting when you can link it from youtube or something else? What was the size of that video? It can't be good for load speed.
exactly. And there are problems in responsive. You need to brea it down so classic bg and the model in 3d so you can work with the file size and responsive and loading speed
Very nice! But how do you put al this beauty into responsive? can you make a video about that? EDIT: What are the things you leave out on mobile? Does mobile limit you in the design process for desktop? What do you take in considersation?
It’s absolutely possible to have a super-fast website with a video, but it needs to be done correctly. If you ask me, there are two solutions: 1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content. 2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
This is awesome. From my past experience, adding video from wordpress media actually slows down the loaing time significantly. also other options like youtube and vimeo doesnt look look. So what do you recommend for a cdn video link?
It’s absolutely possible to have a super-fast website with video, but it needs to be done correctly. If you ask me, there are two solutions: 1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content. 2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
Sir, would you kindly consider creating a tutorial for this? I have gone through the material, but I am having difficulty visualizing how to proceed. Your time and guidance on this would be greatly appreciated. @@nicopalmkvist
Hi mate :) It’s absolutely possible to have a super-fast website with video, but it needs to be done correctly. If you ask me, there are two solutions: 1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content. 2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
It´s great to see how video can enhance web design. Bridging the gab between video and web. Attention or loading time? Both are important. And responsive video is possible, even combined with interactivity. Very inspiring, thank you.
Just a quick clarification about your question. When using a background video in the hero section, you should keep in mind that video files can impact your website’s speed. It’s important to compress the video file or load it externally. If your primary goal is to rank high on Google and have a lightning-fast website, you should be cautious about using videos. However, if your goal is to create a “wow” experience for your visitors or boost brand awareness, a background video can work really well.
How did u download the video without the "envato" in the middle of the screen. In your acc on the right top there is "Upgrade to annual", but in my acc there is "Get unlimited downloads" . What did you, so you were able to donload it? Please help me out! :)
I Like your designs very well. Good job. Can you explain me why you use negative margin for Menu social Media instead insert the Elements in the Video Container ? Thank you
it would be cool to have a video on a way to create tabs on an elementor website, Like 5 tabs on the left and the full page changing on the right (withouut having to fully change page)
hey i cant upload and hd video it says we only goes upto 2mb max.if i use 2 mb video then the quality really goes worse can you please solve this problem
HEY mate, old suscriber need your help can you make a tutorial on product slider, minimalist design and your creativity touch, it will be very help for us who makes ecommerce sites
It’s possible to have a super-fast website with video, but it needs to be done correctly. If you ask me, there are two solutions: 1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content. 2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
☝Btw - not all my web designs are perfect-the title was just to catch your attention 😅
But check out my designs here: nicolaipalmkvist.com/get-templates
No your designs are better than perfect, Nic.🤩❤
Btw can I have the chocolate melting video.
"I'm not selling or distributing. I'm just showcasing my websites in my thumbnails and in my portfolio in Fiverr."
It would be deeply appreciated.🥰
@@ballbloopers_17 Thanks - and yes you can use it :)
@@nicopalmkvist Thank you so much☺
Just a quick clarification about this video. When using a background video in the hero section, keep in mind that video files can impact your website’s speed. It’s important to compress the video file or load it externally.
If your primary goal is to rank high on Google and have a lightning-fast website, you should be cautious about using videos. However, if your goal is to create a “wow” experience for your visitors or boost brand awareness, a background video can work really well.
Just wanted to point that out💪
i really need this kind of design its stunning
Thank you, Muhammad🥰
We all need it...BTW, are Arabic?
Omg, you killed it again! Thank you for your beautiful work!
Thank you! or danke schön, Germanundergroundtv! 🇩🇪🇩🇪
Why serve the video bandwidth on your own hosting when you can link it from youtube or something else? What was the size of that video? It can't be good for load speed.
exactly. And there are problems in responsive. You need to brea it down so classic bg and the model in 3d so you can work with the file size and responsive and loading speed
Good trick. Thanks for sharing mate
@@elendil4543 thanks, mate❤️
how does it looks on mobile?
Very nice! But how do you put al this beauty into responsive? can you make a video about that?
EDIT:
What are the things you leave out on mobile? Does mobile limit you in the design process for desktop? What do you take in considersation?
It looks great but in my experience background videos in the hero header section are detriment to the page loading speed and core web vitals.
It’s absolutely possible to have a super-fast website with a video, but it needs to be done correctly. If you ask me, there are two solutions:
1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content.
2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
Videos can be streamed for peak performance
@@dannrcstr How
This is awesome. From my past experience, adding video from wordpress media actually slows down the loaing time significantly. also other options like youtube and vimeo doesnt look look. So what do you recommend for a cdn video link?
It’s absolutely possible to have a super-fast website with video, but it needs to be done correctly. If you ask me, there are two solutions:
1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content.
2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
Sir, would you kindly consider creating a tutorial for this? I have gone through the material, but I am having difficulty visualizing how to proceed. Your time and guidance on this would be greatly appreciated. @@nicopalmkvist
can you provide the header section too?
Could you show page speed after this magic? :)
Hi mate :) It’s absolutely possible to have a super-fast website with video, but it needs to be done correctly. If you ask me, there are two solutions:
1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content.
2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
It´s great to see how video can enhance web design. Bridging the gab between video and web. Attention or loading time? Both are important. And responsive video is possible, even combined with interactivity. Very inspiring, thank you.
Just a quick clarification about your question. When using a background video in the hero section, you should keep in mind that video files can impact your website’s speed. It’s important to compress the video file or load it externally.
If your primary goal is to rank high on Google and have a lightning-fast website, you should be cautious about using videos. However, if your goal is to create a “wow” experience for your visitors or boost brand awareness, a background video can work really well.
Can I do this with the free elementor plugin
Loved it. Thank you for such videos!
Thank you, Arpitshrmah
How did u download the video without the "envato" in the middle of the screen. In your acc on the right top there is "Upgrade to annual", but in my acc there is "Get unlimited downloads" . What did you, so you were able to donload it? Please help me out! :)
You need to by a membership it costs 180$ per year. Its not free
You Can find free videos somewhere else, but in this video i use a paid plan on Envato elements. Envato is €14,50/ month
What about mobile section?
Good video ! One thing VH does not mean „view height“ (like u said at 2:18) it’s called „vertical height“
Cheers
Hmm I think it’s acully Viewport height, but I guess it doesn’t matter that much: elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/
I Like your designs very well. Good job. Can you explain me why you use negative margin for Menu social Media instead insert the Elements in the Video Container ? Thank you
I still don't understand how the 3d object work, are they a video? No, so what are they in the HTML ? and how did you integrated that with elementor?
it would be cool to have a video on a way to create tabs on an elementor website,
Like 5 tabs on the left and the full page changing on the right (withouut having to fully change page)
Can this be done without Elementor Pro as well?
Yes, you can recreate this with Elementor free, but you need PRO for the sideways text, but thats not that important
@ thanks!
I Want the CSS code pls :) thank you for your value
Here you go: codepen.io/Wireframe-ApS/pen/azoWMPX
bro can you tell what are the best designing tools for dekstop and mobile
Do you mean pagebuilders? Then I would say Elementor or Framer. If you just mean design tools it’s Adobe XD
hey i cant upload and hd video it says we only goes upto 2mb max.if i use 2 mb video then the quality really goes worse can you please solve this problem
chnage filseize max on php ini
please add the other creative demos in your website I liked them :)
which software you use?
Elementor💪
awesome video man!!
which software are you using?
@@tony3stark Elementor💪
css code?
The CSS code is at the bottom of this document, under the heading "Let's make it move":
nicolaipalmkvist.com/snap-on-scroll/
awesome buddy. You just made my sites worth 200% more =)
💪💪
HEY mate, old suscriber
need your help can you make a tutorial on product slider, minimalist design and your creativity touch, it will be very help for us who makes ecommerce sites
is it responsive if yes i buy it right now ;)
amazing i save this for later i'm gone use it for sure
Thank you! And yes it’s responsive.
Excellent content
Thank you mate!
Nice working bro
Thank you💪
it was video all along
Which app he is using for that design?
He is using Elementor Page builder ;)
What about the performance?
It’s possible to have a super-fast website with video, but it needs to be done correctly. If you ask me, there are two solutions:
1. Manually optimize video + preload image - Convert the file to an MP4 format and compress it. For example, my video with ice and chocolate, from this youtube video, ended up being just 1 MB. Combine this with a preload image (the first frame of the video), which gives the illusion that the video is starting immediately, while the actual video loads in the background. This approach has been a game-changer for me, delivering incredibly fast websites with video content.
2. Or this is the easy one: Use Nitropack - This tool optimizes your entire website, including videos, but it does come with a cost.
@@nicopalmkvist wp rocket is not better?
Sooo how does this look on mobile?
Check the live demo link :)
verry nice! creative.. great. if you can make tutorials with bricks builder ill be your biggest fan and subscriber. elementor is outdated
Beautiful
I would like some assistance with changing a psd design to html
Sorry can't help you with that
You are great
You have to be danish lmao.
@@rosasandberg4487 😂😂
Very cool website suitable for big brands but will not work for small to medium level buisness