How I designed this product website in Elementor Pro
HTML-код
- Опубликовано: 25 авг 2024
- 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.
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.
Fijn om je weer terug te zien Rino, bedankt voor deze video!
Hands down the greatest tutorial for elementor on RUclips!
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.
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.
Just watched the official elementor guides. Then I thought why not watch somebody who actually uses the software a lot... Great Video man!
That’s a huge compliment, thank you 🙏🏻
Yes, more of this please.
I struggle especially with making things look *nice* :)
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! 🤝🏻
Thanks for the idea!
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
Recently found your channel and have already subscribed, thank you for your content!
Awesome, thank you!
This is a fantastic design. I always appreciate your efforts Rino. Keep it up!
best Elementor TUT i watched so far, love it
Good to have you back. Please more of these kind of videos.
Looks great! Can you do a tutorial how you will make this website ready for mobile use? :-)
Indeed, Mobile First design for 5 yrs is how I roll LUV ya LivingwithPixels but come on responsive design is 💯
Yes... Iam the web designer to. I wish this site can be operation on mobile is well
True! Looks good on desktop .on tablet and mobile it looks horrible.
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.
Goed bezig. Erg happy met je video's. Fijne duidelijke manier van uitleg!
really thanks to Rino for this perfect website tutorial 👍
So valuable and easy to follow. Thanks for sharing!!
Always amazing tutorials from you. I always learn so much, thank you!
woww , you do this page in simple pages , thank you , I understood all
Gaining Insight Into Organization and Creativity Through Webdesign.
Ik open deze video en zie opeens een bekend gezicht ‘HoeGaatDat’ was dat toch? Wat een goede oude tijd
Looks good! I enjoy the videos on your channel. Thank you!
Thanks Rino for such amazing stuff, I must appreciate your way of explanation and taste of aesthetics.
well I 'm watching your voids >>in fact they are very interesting with good ideas
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 :).
Thank you for sharing an awesome tutorial!
This is the most inspiring video I've ever seen 💛
Very clear tutorial thank you
10:00 u can use a instead of a
= its just 1 space that u get by pressing the spacebar
= It leaves a line
eg:
runnard&nsbp;runnard = runnard runnard
runnardrunnard = runnard
runnard
Wow. Thank you so much for the Video. Helps a lot
dude, you've got TASTE. damn.
Thank you for such nice and simple video!
This was great. Thank you very much!!
Great work, looks awesome!
Great tutorial as always. Love your work ❤️❤️❤️.
love it, its perfect
Very Helpful Sir !
YOu ARE AMAZING thank you so much ! you made it so easyy to me :**
Glad it helped!
Thank you Rino, great tutorial, i would like to see it on mobile.
Your web design ideas so cool
Awesome video. But i really wanted to see you stretching and shrinking the browser window to see how the website behaves.
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
It helps me a lot..... Thank you
Looks great, very useful tutorial. Thank you bro 🤩👍🏻
Thanks for this Amazing Videos...i love it.
Continue creating these videos 🥰
Great Tutorial 🔥 worth to watch✌🏻✨
Hey rino bring more tutorials like this!!!
where do you get transparent images like the music box?
Great style and tutorial! Unfortunately the video I’m putting in is not showed in the live view 😢 What can I do?
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?
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
@@rinodeboer Thanks a lot for answering that!
Just wow design
Hey Rino, can you please make a video about the topic : how to get clients ? That would be very helpful 🙏🏻
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.
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.
this is amazing thank you so much for content bro
Awesome! Great work 👍
You're AWESOME! Big fan here
so cool, can we try how to make the woocommence?
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
Buenísimo! muchas gracias.
Please make another video explaining the mobile version. Looking forward
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
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.
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.
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.
@@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.
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?
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.
Thank you very much. Very helpfull.
you are a great man
Looks amazing. Is it mobile responsive?
Thankkkk youuu veryy helpfulllll
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.
If I do it the container expands instead of overlapping
Please make an in depth tutorial on buttons :)
Great vid.
very cool man
this is tutorial is very helpful .
How about the header ? Did you make a tutorial of it ?
Wonderful tips friend
Great design 👍👌
Thanks!
Hello! Thank you for amazing videos. Pls make video about how to create ecommerce website.
Wooooow thank you ❤
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.
Lang geleden kom nog van “hoe gaat dat”😂
Great knowledge !
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 !
Would like to see how this design responds to tablet and mobile please?
It looks good on desktop what about mobile?
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?
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
you need to responsive it clicking responsive bar from the editing panel
may I know how does this design work apply to table or mobile version?
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 ?
Pexels
Nice, where to get the photos png and video's to builds this all up?
Great video man!! :)
Awesome thank you sir
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
Good day pls How did you make the speaker image transparent it blends in sooo well with the video
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!!
NIce Design ,
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 !!
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?
Wow so cool, thank you so much anyway
AYYYY another video!!
using absolute? How will the website look on mobile!?