How I designed this product website in Elementor Pro

In this video we are exercising with Elementor Pro to create a cool looking audio website. I've used some new techniques that I hope you guys didn't know about.
Videos I've referenced in the video:
How to create a Blurry Transparent Sticky Header in Elementor • How to create a Blurry...
The Elementor Hotspot Widget • How to use Elementor’s...
Sections, Columns, Margin & Padding EXPLAINED • Sections, Columns, Mar...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixel...
Siteground for premium webhosting: livingwithpixel...
Elementor for no-code web-development: livingwithpixel...
Figma for Web Design: livingwithpixe...
All recommended software & discounts: livingwithpixe...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixe...
Figma Design Mastery Course: livingwithpixe...
Business Course: livingwithpixe...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixe...
Figma Design Starters Guide: livingwithpixe...
→ My Social Media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.

[@oluisdesigner]

2 years and is still the best video to learn elementor fast

[@JayJay-ki4mi]

I liked the intense CTA button, but nice tutorial. I've been coding themes by hand for a long time. I used Elementor one a job (just some content fixes) and was blown away by Elementor. I ended up purchasing because I'm getting older and I value my time.

[@AerialJohnny]

Hands down the greatest tutorial for elementor on KZbin!

[@johnravi3887]

Hi Reno, It was a great video! I recently got a client, who wants this exact same thing on his website, although my team is well-equipped to create this on their own, I think your video will be a great help for them. I will definitely share this video with them, and they will be able to follow the process and get this done quickly. So thanks a lot for sharing this, it was a great help.

[@JahinShahriar]

Hi, it feels great to see you back, one request to you. As i see you teach in BOTH Udemy and Skillshare. Please make a video on comparing two sites and how much you earn from both sites. This will be super fun. Good luck

[@noahgels7292]

Just watched the official elementor guides. Then I thought why not watch somebody who actually uses the software a lot... Great Video man!

[@rinodeboer]

That’s a huge compliment, thank you 🙏🏻

[@renehinojosa1962]

Thank you for posting this most helpful tutorial! I love to see how designers approach a webdesign project, it gives us great insight about one's organizational skills and approaches. Seeing you put together this website in Elementor was inspirational. Thanks for putting out superb content like this.

[@miikayak]

Yes, more of this please. I struggle especially with making things look *nice* :)

[@tymonvandenburg5281]

Fijn om je weer terug te zien Rino, bedankt voor deze video!

[@ducvinh3318]

really thanks to Rino for this perfect website tutorial 👍

[@Lokalbesucher]

best Elementor TUT i watched so far, love it

[@mumairmughal9865]

This is a fantastic design. I always appreciate your efforts Rino. Keep it up!

[@Alejandra-iy1uv]

woww , you do this page in simple pages , thank you , I understood all

[@sbraganca]

Recently found your channel and have already subscribed, thank you for your content!

[@rinodeboer]

Awesome, thank you!

[@andersa9655]

Good to have you back. Please more of these kind of videos.

[@greatdeal8436]

Thanks Rino for such amazing stuff, I must appreciate your way of explanation and taste of aesthetics.

[@niceguy-pw6uf]

Awesome video. But i really wanted to see you stretching and shrinking the browser window to see how the website behaves.

[@oliverthiebes8918]

Looks great! Can you do a tutorial how you will make this website ready for mobile use? :-)

[@bySterling]

Indeed, Mobile First design for 5 yrs is how I roll LUV ya LivingwithPixels but come on responsive design is 💯

[@capcui]

Yes... Iam the web designer to. I wish this site can be operation on mobile is well

[@exmrsnowwomanscorned8369]

True! Looks good on desktop .on tablet and mobile it looks horrible.

[@MohammadUmairAnsari]

In the left side panel at the bottom, there is an icon for responsiveness of a web page. This button is on the left side of the "eye" button (which is a preview button). Click on it and you will see how the page appears on desktop, tablet and mobile. You can click on any of those icons to edit the page for that particular device.

[@TNcFlipbook]

Gaining Insight Into Organization and Creativity Through Webdesign.

[@Dkny2001]

So valuable and easy to follow. Thanks for sharing!!

[@limatek8932]

dude, you've got TASTE. damn.

[@Marianoneris]

Always amazing tutorials from you. I always learn so much, thank you!

[@miles6385]

This is the most inspiring video I've ever seen 💛

[@ewast777]

Thanks for the video, very nice design with the gradient options! Yes, please - more video like this with simple design tricks :) I will be also interested of how do you know how to design a website for the client, what they needs are and how you create your design based on that. The most difficult thing for me :).

[@nikolaasvandijck3768]

Goed bezig. Erg happy met je video's. Fijne duidelijke manier van uitleg!

[@faisalfahmysulistya7329]

Thank you for sharing an awesome tutorial!

[@saleemdigital]

well I 'm watching your voids >>in fact they are very interesting with good ideas

[@droritay111]

Looks good! I enjoy the videos on your channel. Thank you!

[@Kabbbbba]

Hey Rino, can you please make a video about the topic : how to get clients ? That would be very helpful 🙏🏻

[@abdullahbutt3470]

That's a very informative video buddy ✨❤️ Can you please make a video on your thought process before starting a web designing project in Elementor? It would help a lot of beginners like me who are stuck at where to start! 🤝🏻

[@rinodeboer]

Thanks for the idea!

[@רוניבורלא]

Thank you Rino, great tutorial, i would like to see it on mobile.

[@anilpawar2423]

Thank you for such nice and simple video!

[@elnini415]

currently watching, and scrubbing up my website (: So thank you so much , you are straight forward, no bs, and make this shit look easy! Cheers and much love

[@KingTamzid123]

Your web design ideas so cool

[@runnard]

10:00 u can use a   instead of a

[@basmil3098]

  = its just 1 space that u get by pressing the spacebar = It leaves a line eg: runnard&nsbp;runnard = runnard runnard runnardrunnard = runnard runnard

[@shahulHameed-ek3bh]

Hey rino bring more tutorials like this!!!

[@motobandit5345]

Wow. Thank you so much for the Video. Helps a lot

[@febrisuryantoid]

Looks great, very useful tutorial. Thank you bro 🤩👍🏻

[@pds4927]

You're AWESOME! Big fan here

[@ryan2005raihan]

Great Tutorial 🔥 worth to watch✌🏻✨

[@goldencrestretrieversndoodles]

Very clear tutorial thank you

[@hexaux964]

Great tutorial as always. Love your work ❤️❤️❤️.

[@ammadjaved6156]

Please make another video explaining the mobile version. Looking forward

[@DustinS95]

This was great. Thank you very much!!

[@tariqbhanji1634]

Beautiful design. Thank you for sharing the tutorial. We all know you are expert in Elementor. I would like to see you trying new school page builders specially Zion builder and Live Canvas. Thank you once again

[@MaayanBar_]

YOu ARE AMAZING thank you so much ! you made it so easyy to me :**

[@rinodeboer]

Glad it helped!

[@CrackerJayherber]

Great work, looks awesome!

[@krutikadesai4280]

This design is great! I love following your tutorials. I was just wondering if we can add a list of video links from the media library and display a random video loop in the header instead of one particular video each time?

[@rinodeboer]

Thank you. I don’t think that is possible. So in this case its best to just make a video edit yourself where you mix multiple videos together and then just load that one video. This is also better for pagespeed because its only one file

[@krutikadesai4280]

@@rinodeboer Thanks a lot for answering that!

[@muhammadassad3593]

Thanks for this Amazing Videos...i love it. Continue creating these videos 🥰

[@anirbanmondal8678]

It helps me a lot..... Thank you

[@marcinr649]

Hi Rino, I like your lates email, you are 100 % right , don't try to be perfect, find time for relax and friends, that's what's important, stay safe brother !

[@DeveloperRifat]

Very Helpful Sir !

[@TheSup3rgirl]

love it, its perfect

[@elCastilloContable]

Buenísimo! muchas gracias.

[@alimasargul1716]

Hello! Thank you for amazing videos. Pls make video about how to create ecommerce website.

[@sharifulakbar9343]

Just wow design

[@PicSta]

Great video as always. Thanks for sharing this. Btw why you don't say "sections and inner-sections" when u explain the column's thing.

[@radouanesnoussi2274]

you are a great man

[@chadvise3308]

this is amazing thank you so much for content bro

[@fredwyatt3616]

Please make an in depth tutorial on buttons :)

[@amaanmulla1370]

Beautiful Design Rino🔥 You're content has helped me a lot to learn about web design🙌 The only question I have is where do i find these images and videos ?

[@Brulie]

Pexels

[@sonareclipse9810]

Looks amazing. Is it mobile responsive?

[@ИгорьВкусныйфитнес]

Awesome! Great work 👍

[@ionutsabo]

I was wondering why are you not using the icon box or image box widgets? Instead of 3 separate widgets. It would help you reduce the amount of divs elementor is creating for your layout. Also for the hero section, that second column content could have been replaced by a single widget - the cta. It's all about optimizing the size and structure of your layouts and final code.

[@rinodeboer]

This is a good point. The reason why I do this is because when I'm in the middle of development I use copy and paste a lot of the time. Then it's kind of frustrating if you can't copy and paste styles for individual widgets. But this is a good practice when the project is finished to optimize the speed. Thank you.

[@smt7270]

this is tutorial is very helpful .

[@blaz667]

Thank you very much. Very helpfull.

[@sohel-arman-dev]

Great tutorial. But as a Web Designer I think custom positioning is not good for responsive. You can just use -margin for the image to move it.

[@amindris3957]

If I do it the container expands instead of overlapping

[@I5A_1990]

Thanks!

[@Pascalleke_]

Ik open deze video en zie opeens een bekend gezicht ‘HoeGaatDat’ was dat toch? Wat een goede oude tijd

[@danielrindraniaivo1553]

heyy it's amazing how you go trought this, you've got a amazing idea !! it would be intersting if you could do some tutorial about landing page for woocommerce with 3D effect with the product for example! If You know what I mean !!

[@sucd218]

so cool, can we try how to make the woocommence?

[@Dyankustodio]

Thankkkk youuu veryy helpfulllll

[@katlehom3766]

AYYYY another video!!

[@Nocommmment]

Great vid.

[@mohsenjafari4498]

very cool man

[@nareshjain01]

Great knowledge !

[@asmrcats5496]

Wooooow thank you ❤

[@avihay03]

Always amazing tutorials from you! How can i find cool backround vidoes like this one I try look vidoes like this on youtube with models and didnt find any

[@mahmoudismael7380]

Great design 👍👌

[@y2vikram]

Wonderful tips friend

[@asya3473]

Great style and tutorial! Unfortunately the video I’m putting in is not showed in the live view 😢 What can I do?

[@vinodh9492]

Hey Rino amazing content. Can you explain on how to build both desktop and mobile responsive websites in elementor. Cause the design changes when we view on mobile, and how to correct it, So we get the same design experience on both platforms

[@MohammadAbuMeheraz]

you need to responsive it clicking responsive bar from the editing panel

[@mooltech]

Awesome thank you sir

[@mahmoudzahran5072]

It's real great explanation but can i get the pictures and video used for practical application with you.. that will be much better

[@אריאלבריל]

Great video man!! :)

[@summerlight9243]

hello Reno, can you make a video to show us how to pick the right colors for websites? the colors on my websites just do not look good. any advice?

[@namanjha727]

Thanks for your guidance sir. I am trying to get Clients, but I am hardly getting any. Please suggest us how can we get Clients to work with.

[@rezvanibeastx3452]

Wow so cool, thank you so much anyway

[@zubairahmed6908]

I'm also a web developer and designer but currently working on Upwork. Can you tell us how you get your clients?

[@bilalmajid8241]

Amazing

[@gamedguys372]

you are Super.! please we wanna tutorial like this.

[@andikayogisaputra5281]

NIce Design ,

[@lroberts2478]

Great tutorial! We have sites with videos in the background loading after the overlay and the page opens a little a little wonky at first. Any suggestions how to get this video to load simultaneously with the overlay? Thanks!!

[@hape8447]

Thank you very much for your great tutorials. I am looking for an option to move image content in the frames. When customizing on mobile it is often the case that it would be good to be able to move the image so that, for example, something is not cropped. Is there an option for this?

[@codemilestone7697]

Second Comment sorry for say Looking forward to something new and how to start a web design business tutorial all of the videos : _

[@vinculonorte]

Mega menus! If you ask for ideas, I would like how to design cool mega menus for blogs :) AND! Hero sections, I always struggle how to start the Home page :)

[@manankanani5]

I Loved the design but the problem with this like video = 16 MB Images = Large size like 700kb So it affects alot on site speed how to optimize this design for good speed

[@rinodeboer]

That's true, if you decide to use video on a page then the website doesn't become very fast. But for some websites where the user doesn't have to click a lot and it's more like an experience I think it's oke sometimes.

[@renehinojosa1962]

One can reduce the video quality to lessen the size without affecting the quality too much. In this instance, the number of colors used actually reduces the size of the video file.

[@rinodeboer]

That's true. But 16mb for a video is already super small. Video is just a pain in the *ss to make small. But you are right, it could be even better.

[@PicSta]

@@rinodeboer correct and find a compression (codec) that works also is tough. Sure format is mp4 but need to have the right codec as well.

[@lamaperin957]

Would like to see how this design responds to tablet and mobile please?

[@noahbosman6227]

where do you get transparent images like the music box?

[@danpaolohernani1689]

Really great tutorial! However, I can see the video from Elementor editor but it's not showing on the live page. Any idea how to fix this?