How I designed this product website in Elementor Pro

Поделиться
HTML-код
  • Опубликовано: 5 янв 2025

Комментарии • 215

  • @oluisdesigner
    @oluisdesigner 3 месяца назад +2

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

  • @JayJay-ki4mi
    @JayJay-ki4mi 2 года назад +10

    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.

  • @noahgels7292
    @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
      @rinodeboer  Год назад

      That’s a huge compliment, thank you 🙏🏻

  • @MrFrobbo
    @MrFrobbo 2 месяца назад

    A month in with Elementor lite, I'm using containers everywhere as pretty sure they're replacement for sections, I note the age of this vid, perhaps I should watch more recent ones. These tips were really useful.

  • @johnravi3887
    @johnravi3887 3 года назад +2

    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.

  • @AerialJohnny
    @AerialJohnny 2 года назад +2

    Hands down the greatest tutorial for elementor on RUclips!

  • @tymonvandenburg5281
    @tymonvandenburg5281 3 года назад +1

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

  • @renehinojosa1962
    @renehinojosa1962 3 года назад +4

    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.

  • @JahinShahriar
    @JahinShahriar 3 года назад +2

    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

  • @sbraganca
    @sbraganca Год назад +1

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

  • @mumairmughal9865
    @mumairmughal9865 3 года назад +3

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

  • @Lokalbesucher
    @Lokalbesucher 2 года назад

    best Elementor TUT i watched so far, love it

  • @runnard
    @runnard 3 года назад

    10:00 u can use a   instead of a

    • @basmil3098
      @basmil3098 2 года назад

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

  • @andersa9655
    @andersa9655 3 года назад

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

  • @miikayak
    @miikayak 2 года назад +2

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

  • @ducvinh3318
    @ducvinh3318 Год назад

    really thanks to Rino for this perfect website tutorial 👍

  • @greatdeal8436
    @greatdeal8436 2 года назад

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

  • @ewast777
    @ewast777 3 года назад +1

    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 :).

  • @Marianoneris
    @Marianoneris 3 года назад +1

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

  • @Alejandra-iy1uv
    @Alejandra-iy1uv 2 года назад

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

  • @miles6385
    @miles6385 Год назад

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

  • @Dkny2001
    @Dkny2001 3 года назад +1

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

  • @droritay111
    @droritay111 3 года назад +1

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

  • @niceguy-pw6uf
    @niceguy-pw6uf 2 года назад

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

  • @febrisuryantoid
    @febrisuryantoid Год назад

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

  • @hexaux964
    @hexaux964 3 года назад +1

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

  • @ryan007elahi
    @ryan007elahi 2 года назад +1

    Great Tutorial 🔥 worth to watch✌🏻✨

  • @klaas-2025
    @klaas-2025 3 года назад

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

  • @faisalfahmysulistya7329
    @faisalfahmysulistya7329 3 года назад +1

    Thank you for sharing an awesome tutorial!

  • @oliverthiebes8918
    @oliverthiebes8918 3 года назад +66

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

    • @bySterling
      @bySterling 3 года назад +5

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

    • @capcui
      @capcui 3 года назад

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

    • @exmrsnowwomanscorned8369
      @exmrsnowwomanscorned8369 2 года назад +1

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

    • @MohammadUmairAnsari
      @MohammadUmairAnsari 2 года назад

      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.

  • @muhammadassad3593
    @muhammadassad3593 3 года назад

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

  • @summerlight9243
    @summerlight9243 3 года назад +1

    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?

  • @tariqbhanji1634
    @tariqbhanji1634 3 года назад

    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

  • @noahbosman6227
    @noahbosman6227 3 года назад +2

    where do you get transparent images like the music box?

  • @anilpawar2423
    @anilpawar2423 Год назад

    Thank you for such nice and simple video!

  • @Tradertamzid
    @Tradertamzid 2 года назад

    Your web design ideas so cool

  • @HumanFactsUnveiled
    @HumanFactsUnveiled 9 месяцев назад

    may I know how does this design work apply to table or mobile version?

  • @asya3473
    @asya3473 9 месяцев назад

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

  • @motobandit5345
    @motobandit5345 2 года назад

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

  • @krutikadesai4280
    @krutikadesai4280 8 месяцев назад

    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
      @rinodeboer  8 месяцев назад

      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
      @krutikadesai4280 8 месяцев назад

      @@rinodeboer Thanks a lot for answering that!

  • @sonareclipse9810
    @sonareclipse9810 3 года назад +1

    Looks amazing. Is it mobile responsive?

  • @limatek8932
    @limatek8932 11 месяцев назад

    dude, you've got TASTE. damn.

  • @elnini415
    @elnini415 3 года назад

    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

  • @CrackerJayherber
    @CrackerJayherber 3 года назад +1

    Great work, looks awesome!

  • @druizduque
    @druizduque 2 года назад

    Hello!! First of all sorry for my bad English.
    And secondly, congratulate you on your work, which is very helpful. But I have a question. At minute 11:00 where you show the mouse scroll rotation effect... in my case it does not rotate around the central axis of the image, it rotates around another axis and the piece instead of rotating on itself moves in a circle moving from its place or position. You can help? What happen? Thank you!!

  • @ticktackmobilestage
    @ticktackmobilestage 2 года назад

    thanks for the great turotial Rino. i have a question, when you upload the video on wordpress media liabary , the video link will be http by default, which casue my page not secure. do you know how to get a https link for a video that you want to upload on wordpress ?

  • @pds4927
    @pds4927 2 года назад

    You're AWESOME! Big fan here

  • @PicSta
    @PicSta 3 года назад +1

    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.

  • @danpaolohernani1689
    @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?

  • @Kabbbbba
    @Kabbbbba 3 года назад

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

  • @ammadjaved6156
    @ammadjaved6156 2 года назад

    Please make another video explaining the mobile version. Looking forward

  • @רוניבורלא
    @רוניבורלא 3 года назад +1

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

  • @DustinS95
    @DustinS95 Год назад

    This was great. Thank you very much!!

  • @chriswilcox8977
    @chriswilcox8977 2 года назад

    Does a self-hosted video not need to download in full to the visitor before it plays? It’s instant for you because it’s already on your device or browser cache? I’ve found self-hosted is way slower than RUclips as self-hosted doesn’t stream, it has to download and play.

  • @CrazyFuzz8
    @CrazyFuzz8 11 месяцев назад

    Nice, where to get the photos png and video's to builds this all up?

  • @saleemdigital
    @saleemdigital Год назад

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

  • @triplevee808
    @triplevee808 Год назад

    Hi there. Would you be able to remake this tutorial based on Elementor's flexbox? I'm still having a bit of a struggle migrating to flexbox.

  • @sucd218
    @sucd218 Год назад

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

  • @therankingworld7627
    @therankingworld7627 3 года назад

    Good day pls How did you make the speaker image transparent it blends in sooo well with the video

  • @avihay03
    @avihay03 2 года назад

    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

  • @hape8447
    @hape8447 2 года назад

    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?

  • @lroberts2478
    @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!!

  • @fredwyatt3616
    @fredwyatt3616 Год назад

    Please make an in depth tutorial on buttons :)

  • @masonwang2475
    @masonwang2475 3 года назад

    What is with the size of the video (16MB)? I mean because SEO and the website load time.

  • @esraestablished
    @esraestablished 3 года назад

    Please share the font sizes 🙏 I’m currently building a website with sora

  • @alimasargul1716
    @alimasargul1716 3 года назад

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

  • @saadshahid2275
    @saadshahid2275 3 года назад

    Can you please elaborate how we can use this design in our ecommerce multi products site because there gonna be a template and we cannot design for a specific image?

  • @namanjha727
    @namanjha727 3 года назад +1

    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.

  • @vibhutiarya2501
    @vibhutiarya2501 Год назад

    Hi, very helpful video. I create my websites on a subdomain and migrate to the domain. So my question is if I activate Elementor pro for a website on a subdomain and move it to the domain, will it be counted as one Elementor pro license used or 2. I have the one for 25 Pro websites.

  • @shahulHameed-ek3bh
    @shahulHameed-ek3bh 3 года назад +1

    Hey rino bring more tutorials like this!!!

  • @jwalbanker
    @jwalbanker 2 года назад

    Hey! Love your tutorials! Is there a way to add google ratings to an elementor site for free? UEA doesn't work. Thanks in advance!

  • @mahmoudzahran5072
    @mahmoudzahran5072 2 года назад

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

  • @MaayanBar_
    @MaayanBar_ Год назад

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

  • @sh.rahman
    @sh.rahman 3 года назад

    Hey, what's thename of the tool used for screen annotation in your video? TiA

  • @schwi3410
    @schwi3410 6 месяцев назад

    How about the header ? Did you make a tutorial of it ?

  • @goldencrestretrieversndoodles
    @goldencrestretrieversndoodles 11 месяцев назад

    Very clear tutorial thank you

  • @richiemawunyo5493
    @richiemawunyo5493 Год назад

    Where are the images you've used?? any link to download them??

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

    Awesome! Great work 👍

  • @ionutsabo
    @ionutsabo 3 года назад +7

    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
      @rinodeboer  3 года назад +1

      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.

  • @danielrindraniaivo1553
    @danielrindraniaivo1553 3 года назад

    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 !!

  • @chadvise3308
    @chadvise3308 2 года назад

    this is amazing thank you so much for content bro

  • @KishanChauhan-pg9hj
    @KishanChauhan-pg9hj 2 месяца назад

    please give me provide figma and resources img which used in this video

  • @zhincic
    @zhincic Год назад

    What's the size difference for the web load speed when using the video from file library and RUclips? Since, I know RUclips does some compressions and thought it might be better to use YT videos

    • @rinodeboer
      @rinodeboer  Год назад +1

      Really depends on the video you upload. For most big videos RUclips is better.

    • @zhincic
      @zhincic Год назад

      @@rinodeboer Noted! - Thank you, buddy!
      What I've also found so useful is doing a conversions into .webm + a compression to help it fit the fast loading speed

    • @rinodeboer
      @rinodeboer  Год назад +1

      No problem! You mean webp?

    • @zhincic
      @zhincic Год назад

      @@rinodeboer No, no, sir. It's the .webm - it's a web video format. I've also just found out about it and it works like charm!

    • @rinodeboer
      @rinodeboer  Год назад +1

      Oh amazing. Didn't know this. Thank you.

  • @Pascalleke_
    @Pascalleke_ 3 года назад

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

  • @mahmoudismael7380
    @mahmoudismael7380 3 года назад

    Great design 👍👌

  • @santiagocheker5153
    @santiagocheker5153 2 года назад

    Hello ! I have a question... How do you do to make the web responsive? When I design the website is different than when I watch the preview.
    I mean, the picture or text some times move a little, do you understand me?

  • @creepycaphindi
    @creepycaphindi 3 года назад

    HI Rinno, Which wordpress theme do you use most of the time?

  • @anirbanmondal8678
    @anirbanmondal8678 7 месяцев назад

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

  • @hexaux964
    @hexaux964 3 года назад

    Just one question, how to use svg logo on the website, because I guess Wordpress doesn’t support svg logos.

  • @SparaPengar
    @SparaPengar 2 года назад

    How do you get that crisp product pictures tho?

  • @DeveloperRifat
    @DeveloperRifat 2 года назад

    Very Helpful Sir !

  • @vinodh9492
    @vinodh9492 3 года назад +2

    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
      @MohammadAbuMeheraz Год назад

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

  • @TNcFlipbook
    @TNcFlipbook Год назад

    Gaining Insight Into Organization and Creativity Through Webdesign.

  • @marcinr649
    @marcinr649 3 года назад

    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 !

  • @zubairahmed6908
    @zubairahmed6908 2 года назад

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

  • @sohel-arman-dev
    @sohel-arman-dev 3 года назад +12

    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
      @amindris3957 11 месяцев назад +2

      If I do it the container expands instead of overlapping

  • @jameslee2252
    @jameslee2252 Год назад

    using absolute? How will the website look on mobile!?

  • @artistworld9632
    @artistworld9632 3 года назад

    Bro do you share some sample website link that contains this type of videos inserted?

  • @eng.michael5397
    @eng.michael5397 2 года назад

    How did you design the header please

  • @joybernabethsultan7270
    @joybernabethsultan7270 2 года назад

    How to have this header with a video hero bg? Help!