![Make Dream Website](/img/default-banner.jpg)
- 129
- 3 203 178
Make Dream Website
Registrace 1. 03. 2020
One stop solution for creating any kind of WordPress Website. You also get regular tutorial on WordPress Tips and Tricks.
Make a Horizontal Scroll Section/Page in Elementor FREE | Horizontal Scrolling with Parallax Effect
Today, I'll show you how to make a Horizontal Scroll Section/Page in your Elementor website for FREE and create that with Parallax Effect.
✅Get Elementor Pro:
makedreamwebsite.com/elementor-pro
✅Get code snippet for Horizontal Scroll:
makedreamwebsite.com/make-a-horizontal-scroll-section-page-in-elementor-free/
✅Get this as Ready Template (✨1 CLICK INSTALL✨):
templatish.com/template/elementor-horizontal-scrolling-page-with-parallax
TIMESTAMP
00:00 Start
00:43 Step 1: Make the Horizontal Section
10:30 Step 2: Add Parallax and Rotating Effects
13:49 Step 3: Click to Scroll and Reveal Animation
16:45 Step 4: Responsive for Tablet and Mobile
21:49 End
In this video, I’ll show you how to make a horizontal scrolling page/animation on your Elementor website using container. We’ll create this without using Elementor Pro or any other extra plugin. I’ll Also show you how you can add parallax effect inside that section, how to add rotating effect, a nice reveal animation, the progressbar and so many other things.
And the best part is you can place it inside anywhere on your page. So, when you reach that section, you can start sliding horizontally and after finishing that part, you can again go through your other content.
If you want, you can also get this animation with all the end results as a ready made template from my template shop. And inside each of these, you also get 2 different versions. But, if you don't want these ready template, you can also start it from scratch.
First, you need to create a container and inside that place your containers. But, before that also make sure to configure your containers settings properly. Then, we need to add CSS class and paste some code snippet to work it properly. Also let's fix some minor issues here.
After that, we have added the parallax and rotate effect. Here you can also customise different things like: speed, direction, moving axis with that parallax effect.
On the 3rd step, we add click to reach and a custom reveal animation. Normally, these features are not working, but with the help of custom code we can make it possible.
Lastly, you need to do responsive for the tablet and mobile devices. On mobile, there is the option to enable the vertical scroll too.
So, that’s how you can create fully responsive horizontal scrolling website in WordPress for FREE. If you want to get more advanced GSAP like tutorial, hit the like and subscribe button.
✅Get Elementor Pro:
makedreamwebsite.com/elementor-pro
✅Get code snippet for Horizontal Scroll:
makedreamwebsite.com/make-a-horizontal-scroll-section-page-in-elementor-free/
✅Get this as Ready Template (✨1 CLICK INSTALL✨):
templatish.com/template/elementor-horizontal-scrolling-page-with-parallax
TIMESTAMP
00:00 Start
00:43 Step 1: Make the Horizontal Section
10:30 Step 2: Add Parallax and Rotating Effects
13:49 Step 3: Click to Scroll and Reveal Animation
16:45 Step 4: Responsive for Tablet and Mobile
21:49 End
In this video, I’ll show you how to make a horizontal scrolling page/animation on your Elementor website using container. We’ll create this without using Elementor Pro or any other extra plugin. I’ll Also show you how you can add parallax effect inside that section, how to add rotating effect, a nice reveal animation, the progressbar and so many other things.
And the best part is you can place it inside anywhere on your page. So, when you reach that section, you can start sliding horizontally and after finishing that part, you can again go through your other content.
If you want, you can also get this animation with all the end results as a ready made template from my template shop. And inside each of these, you also get 2 different versions. But, if you don't want these ready template, you can also start it from scratch.
First, you need to create a container and inside that place your containers. But, before that also make sure to configure your containers settings properly. Then, we need to add CSS class and paste some code snippet to work it properly. Also let's fix some minor issues here.
After that, we have added the parallax and rotate effect. Here you can also customise different things like: speed, direction, moving axis with that parallax effect.
On the 3rd step, we add click to reach and a custom reveal animation. Normally, these features are not working, but with the help of custom code we can make it possible.
Lastly, you need to do responsive for the tablet and mobile devices. On mobile, there is the option to enable the vertical scroll too.
So, that’s how you can create fully responsive horizontal scrolling website in WordPress for FREE. If you want to get more advanced GSAP like tutorial, hit the like and subscribe button.
zhlédnutí: 4 378
Video
Make this INCREDIBLE Animated Side Menu in Elementor | WordPress Advanced Navigation Menu Design
zhlédnutí 28KPřed 2 měsíci
In this video, I'll show you how to make this INCREDIBLE Animated Side Menu in your Elementor website and design a WordPress Advanced Navigation. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Animated Side Menu: makedreamwebsite.com/make-this-incredible-animated-side-menu-in-elementor/ ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templatish.com/template/elemen...
Elementor Playing Card Image Hover Effect with Animated Popup/Lightbox | Expanding Image Gallery
zhlédnutí 9KPřed 3 měsíci
In this video, I'll show you how to make an Elementor Playing Card Image Hover Effect with Animated Popup/Lightbox and create this Expanding Gallery. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Playing Card Effect: makedreamwebsite.com/elementor-playing-card-image-hover-effect-with-animated-popup-lightbox/ ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templat...
Make this Team Member Slider/Carousel with Reveal Animation in Elementor | FREE Image Slider
zhlédnutí 6KPřed 4 měsíci
In this video, I'll show you how to make this Team Member Slider/Carousel with Reveal Animation in Elementor and create a FREE Image Carousel. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Team Member Image Slider: makedreamwebsite.com/make-this-team-member-slider-carousel-with-reveal-animation-in-elementor/ ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templat...
Create this Table Image Hover Effect in Elementor | WordPress Creative and Cool Portfolio Section
zhlédnutí 4,9KPřed 5 měsíci
In this video, I'll show you how to create this Table Image Hover Effect in Elementor and make a WordPress Creative and Cool Portfolio Section. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Table Image Hover Effect: makedreamwebsite.com/create-this-table-image-hover-effect-in-elementor/ ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templatish.com/template/eleme...
Create this Social Menu with Stagger Animation in Elementor | WordPress Creative Menu Hover Effects
zhlédnutí 13KPřed 11 měsíci
Today, I'll show you how to create this Social Menu with Stagger Animation in Elementor and make WordPress Creative Menu Hover Effects. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Advanced Social Menu: makedreamwebsite.com/create-this-social-menu-with-stagger-animation-in-elementor/ ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templatish.com/template/element...
Make this Stacked Card Scrolling Effect/Animation in Elementor | WordPress Creative Text Box Design
zhlédnutí 61KPřed rokem
Today I'll show you, how to make this Stacked Card Scrolling Effect/Animation in Elementor and Design this WordPress Creative Text Box. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Stacked Card Scrolling Effect: makedreamwebsite.com/make-this-stacked-card-scrolling-effect-animation-in-elementor ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templatish.com/templ...
Elementor Creative Portfolio Page with Text Reveal Animation | Card/Image Reveal Effect
zhlédnutí 33KPřed rokem
Today, I'll show you how to make Elementor Creative Portfolio Page with Text Reveal Animation and create a Card/Image Reveal Effect. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Creative Portfolio Page: makedreamwebsite.com/elementor-creative-portfolio-page-with-text-reveal-animation/ ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templatish.com/template/elemen...
Make this Cool Card Hover Effect with Background Image in Elementor | Creative Stagger Animation
zhlédnutí 22KPřed rokem
Today, I'll show how to make this Cool Card Hover Effect with Background Image in Elementor and create a Creative Stagger Animation. ✅Get Elementor free version: makedreamwebsite.com/elementor ✅Get code snippet for Cool Card Effect: makedreamwebsite.com/make-this-cool-card-hover-effect-with-background-image-in-elementor/ ✅Get this as Ready Template (✨1 CLICK INSTALL✨): templatish.com/template/e...
Elementor Full Width Navigation Menu with Images on Hover | WordPress Hamburger Popup Menu Animation
zhlédnutí 38KPřed rokem
Today I'll show you how to design Elementor Full Width Navigation Menu with Images on Hover and make a WordPress Hamburger Popup Menu Animation. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Menu with Images: makedreamwebsite.com/elementor-full-width-navigation-menu-with-images-on-hover/ ✅Get this READY-MADE template on TEMPLATISH: templatish.com/template/elemento...
Make an Elementor Image Gallery with Animated Lightbox/Popup | WordPress Creative Portfolio Section
zhlédnutí 12KPřed rokem
Today I'll show you how to make an Elementor Image Gallery with Animated Lightbox/Popup and design an WordPress Creative Portfolio Section. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Image Lightbox with Gallery: makedreamwebsite.com/make-an-elementor-image-gallery-with-animated-lightbox-popup/ ✅Get this READY-MADE template on TEMPLATISH: templatish.com/template...
Make an Orbiting Circle Image Hover Effect/Animation in Elementor | Cool Team Member Section Design
zhlédnutí 26KPřed rokem
Today I'll show you how to make an Orbiting Circle Image Hover Effect/Animation in Elementor and design a Cool Team Member Section. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Image Circle Hover Animation: makedreamwebsite.com/make-an-orbiting-circle-image-hover-effect-animation-in-elementor/ ✅Get this READY-MADE template on TEMPLATISH: templatish.com/template/e...
Make this Bouncing Ball Image Effect in Elementor/WordPress Website | Image Moving Animation
zhlédnutí 9KPřed rokem
In this tutorial, I'll show you how to make this Bouncing Ball Image Effect in Elementor/WordPress Website and create an Image Moving Animation. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get Domain & Webhosting(SAVE 50%): makedreamwebsite.com/bluehost ✅Get code snippet for Bounce Effect: makedreamwebsite.com/make-this-bouncing-ball-image-effect-in-elementor-wordpress-website/ ✅Get...
Create an Auto Sliding/Scrolling Image Effect in Elementor | Infinite Scrolling Image Slider
zhlédnutí 48KPřed rokem
In this tutorial, I'll show you how to create an Auto Sliding/Scrolling Image Effect in Elementor and make this Infinite Scrolling Image Slider. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Auto Sliding Image Effect: makedreamwebsite.com/create-an-auto-sliding-scrolling-image-effect-in-elementor/ ✅Get this READY-MADE template on TEMPLATISH: templatish.com/templat...
Make this Icon Navigation Menu Bar like an App in Elementor/WordPress | Magic Menu Indicator
zhlédnutí 83KPřed rokem
Today we will see how to make this Icon Navigation Menu Bar like an App in Elementor/WordPress website. Let's just create a Magic Menu Indicator. ✅Get Elementor Pro: makedreamwebsite.com/elementor-pro ✅Get code snippet for Elementor Icon Menu: makedreamwebsite.com/make-this-icon-navigation-menu-bar-like-an-app-in-elementor-wordpress/ ✅Get this READY-MADE template on TEMPLATISH: templatish.com/t...
How to Create a STUNNING Contact Us Page in Elementor Pro/WordPress | Contact Form Design Tutorial
zhlédnutí 36KPřed rokem
How to Create a STUNNING Contact Us Page in Elementor Pro/WordPress | Contact Form Design Tutorial
Elementor Repeat Image Hover Effect | Elementor Tips and Tricks
zhlédnutí 9KPřed rokem
Elementor Repeat Image Hover Effect | Elementor Tips and Tricks
Smooth Background Color Change on Scroll in Elementor | Scrolling Background Effect/Animation
zhlédnutí 30KPřed rokem
Smooth Background Color Change on Scroll in Elementor | Scrolling Background Effect/Animation
Slide Anything in Elementor/WordPress? Advanced Custom Carousel/Slider with Templates (NO PLUGIN)
zhlédnutí 97KPřed rokem
Slide Anything in Elementor/WordPress? Advanced Custom Carousel/Slider with Templates (NO PLUGIN)
Elementor Animated Circle Background Effect | Mouse/Cursor Image Hover Animation in WordPress
zhlédnutí 21KPřed rokem
Elementor Animated Circle Background Effect | Mouse/Cursor Image Hover Animation in WordPress
Make a Portfolio Gallery with Live Preview Box in Elementor | Portfolio for Web Designer/Developer
zhlédnutí 27KPřed rokem
Make a Portfolio Gallery with Live Preview Box in Elementor | Portfolio for Web Designer/Developer
Make an Image Hotspot with Text in your WordPress Website using Elementor Pro Hotspot Widget
zhlédnutí 10KPřed rokem
Make an Image Hotspot with Text in your WordPress Website using Elementor Pro Hotspot Widget
Elementor WOW Entrance Animation/Effect with Image and Text | WordPress Cool/Creative Banner Design
zhlédnutí 51KPřed rokem
Elementor WOW Entrance Animation/Effect with Image and Text | WordPress Cool/Creative Banner Design
Elementor Advanced Slider with Card Carousel | WordPress Custom Slider Design with Text and Image
zhlédnutí 458KPřed rokem
Elementor Advanced Slider with Card Carousel | WordPress Custom Slider Design with Text and Image
How to Embed YouTube Shorts Video in WordPress/Elementor Website - (SUPER EASY)
zhlédnutí 19KPřed rokem
How to Embed CZcams Shorts Video in WordPress/Elementor Website - (SUPER EASY)
[3D] Make a 360 Degree Image Rotation Effect in Elementor Website | WordPress 3D Object/Model Viewer
zhlédnutí 63KPřed rokem
[3D] Make a 360 Degree Image Rotation Effect in Elementor Website | WordPress 3D Object/Model Viewer
Elementor Liquid Button Hover Effects/Animation | Cool and Creative Button Design Ideas (NO ADDON)
zhlédnutí 7KPřed 2 lety
Elementor Liquid Button Hover Effects/Animation | Cool and Creative Button Design Ideas (NO ADDON)
Can you Make this Blur Card Hover Effects with Zoom Animation in Elementor? - Image Hover Effects
zhlédnutí 7KPřed 2 lety
Can you Make this Blur Card Hover Effects with Zoom Animation in Elementor? - Image Hover Effects
Animating Video Popup with a Play Button in Elementor/WordPress Website (Custom Video Player)
zhlédnutí 12KPřed 2 lety
Animating Video Popup with a Play Button in Elementor/WordPress Website (Custom Video Player)
Make a 3D Cube Slider Effects with Text in WordPress/Elementor | Creative Animated Image Carousel
zhlédnutí 6KPřed 2 lety
Make a 3D Cube Slider Effects with Text in WordPress/Elementor | Creative Animated Image Carousel
Thank bhi
Welcome
Honeslty I did the one click install and it was so amazing, I think it really added value to my site, thank you very very much
Glad it really helps you!
🔥
🙏🙏
Thank you so much... for this amazing video I have an issue with mouse hover on mobile device any solution?
Actually on mobile there is no hover so when you tap you can see the hover animation
Well done
Thanks!
You are the king of web design, thank you for all the awesome tutorials.
You’re welcome 😇
AmAZING video as always¡¡ thank you'
Thank you too!
guys its a fraud dont buy its a scam its not working !!!!
Don't panic! If anything doesn't work you can email me for support!
Can you please explain in brief what's my motive to give everyone an file with issues intensionally? Yes, there can be issue, but that can be caused for several reason like plugin conflict, code conflict, update issue etc... If you have any issues make sure to email me for support. I'll resolve it. I request everyone not to come to the comment section and mislead others just to throw out your anger.
I Cant Create The Sliders In 3 View In Testimonial carousel When I Select The Option Slides per View : 3 Its Not Coming In 2 Sections It Just Remains One SO Please Suggest How DO I resolve it Other Then That I Have NO Problem Learning This Tutorial Its Amazing Learn A Lot From Your Channel
my background image slider is not working . i dont know why can u help me ?? ...... thankyou for sharing your knowledge.. amazing tutorial
Can you please let me know only for slider navigation show only on hover with like follow the mouse cursor and show in 50% of left side width and same for right
Here comes the hero ❤❤
🙏🙏
Bro the link in description is broken pls fix it
Hi, the website is currently under maintenance, can you please check it within few hours!
Thanks man ❤@@MakeDreamWebsite
The link is not working. Anyone has the files to share with me please
Hi, the website is under maintenance. Can you please check it within few hours?
Your link is down :C
Yeah! Please visit the site after few hours…
bro honestly you are the best! this is what im currently doing to my project to client you saved my time bro! you are the pricese and straight to the point tutorial here in youtube! you deserve a tip! where can i send bro! please!!!!
You're welcome and also thank you so much for you willing to support! You can support me by buying the ready templates!🙏🙏
@@MakeDreamWebsite bro one thing do you have existing tutorial or idea how to implement a functionality same like this scrolling horizontal but instead of sliding they are just static at the middle and then fading out and fading in from right to left and going to another panel fading out and fading in.
Bro the url that you provided is not working. error 1001 DNS Resolution error Ray ID: 8ab01ceb9a5884e8 • 2024-07-29 21:13:27 UTC
I see. Please check the website after few hour...
Hi. Thank you for the video, i love it. I wanted to suggest that on your template page, for each template you add a link to the tutorial for people to learn how you got to do it, instead of just downloading the template. I like learning than I purchase
You're welcome and thanks for the tip!
Are u jim fahad tutorials too? You both have the same voice and pronunciations lol
No, but we are siblings actually! 😇
@@MakeDreamWebsite That's awesome. I learned elementor pro using Jim fahads tutorial, built 4 website following his tutorial for my portfolio and recently got a $3000 web design gig as well. Appreciate you both.
@@captainsparky5839 You're welcome! Glad to hear that! If it really helps you that means a lot.
ty bro
wlc!
I bought the template. Is it possible to replace the buttons by icons?
Yes, you can. But, you need to change the code for that. You can email me...
BRO BRO BROOOOOOOOOO UR THE BEST
Thanks!
@@MakeDreamWebsite brother i am requesting this for the fourth time, please come with the tutorial on how to create page intro and page transitions that when someone opens your page for the first time there is a short transition before landing on the hero section i hope u got me I will really appreciate Thanks
ye hi to chahiye tha
Glad you like it!
Thank YOU for your talents and sharing w us bro!
You're welcome!
czcams.com/video/fKkfyH9thRg/video.htmlsi=bkgbESTCt2NPq988 We aggressively wait for your updated animated menu with submenu option you promise us you will inform us but till now its not update pls make abobe mentioned link menu with sub menu option
i send you another email, please check .
Glad to see you bro, do you remember me?
Thank you! Glad to see your comment!
best
Thanks!
share the url used for this video
It's jituraiyan.com/horizontal-scroll as you can see it's also visible in the video...
Hello, I just made the purchase, but they sent me a .JPEG file instead of a .zip. Please help me!
Sorry, right now we have a trouble in that site. I’ll try to fix it. I’ll send you the file to your email manually.
@@MakeDreamWebsite My purchase is in the name of Juan Manuel, there you can see the email. I'm waiting, Thank you!
@@MakeDreamWebsite I continue to pay attention to the shipment of the product, thank you!
Just sent!✌
@@MakeDreamWebsite Gracias!
Thank you so much for the great gift of yours
You’re welcome!
Cool ❤. Make more videos frequently.
Thanks! Yes, I’ll try
@@MakeDreamWebsite Please do. Your videos have improved my design skills. You're always my get-go Elementor CZcamsr
Best, thank you.
You’re welcome!
he is a scammer, i purchased his template and it was not responsive plus it had a lot of bugs in it he is not helping me solve the issue instead he has stopped replying to me over mail. such a scammer please dont buy anything from this guy please
Was waiting for a new video. Thank You
Great video! The link to buy is not working.
I'll fix it soon! The internet here in our country is almost shut down so I can't fix it. Once fixed, I'll let you know!
Hi, the site is currently working. But, I can't upload the zip file to the site as a slow internet connection. For now, if you purchase I'll send you the zip file manually✌
First you are the best❤
✌🙌🙌
Hello, I sent you an email...
Hi, I just bought your sidebar menu, I would like to know if I can make lef side bar menu have sub menu (just like normal hover menu on the top usually), thank you!
For that you need to use the nav menu widget.
what if I dont want to use full width, i just wanted to use box, how to do then>?
Then you can adjust the width of the container
@@MakeDreamWebsite I think the menu is slower because of jquery, converting into vanilla JS will make it faster :)
@graphicdestination968 not actually. There are already a tons of js/css/other file loaded of a Elementor page by default. Even jquery is also loaded by WordPress. So doing the code with jquery or vanilla js is not affecting any practical noticeable performance difference.
I enjoyed your tutorial can you please do the same or similar tutorials using Bricks Builder i would be honored to give you my activation code as i have Life time deal.
Very nice… thanks a lot …❤
You’re welcome!
Amazing! But where is the code ( min:6:45 ) to be found?
On my website, you can see all the code snippets as different segments…
@@MakeDreamWebsite Thanks for aswering! :) Well.. your website is hugh! :D Is it too much to ask to post a link to the specific page? :x
will it work if i use flexbox instead?
Not probably! I’ll make a container version soon and add it to the video description
not sure when i'll use it.. but I LOVE IT ! just bought it thank you
Glad you like it!
Your videos are exactly what I've been looking for! Thanks a lotttt
You’re welcome!
Bro please give me your gmail. I bought it but after payment the payment page is only processing. Please
Sorry for that issue. My mail is contact@makedreamwebsite.com
@@MakeDreamWebsite Gmail is showing this gmail is invalid. Please help bro
@@MakeDreamWebsite Sent a mail to you with the attachment please help
Can you please try again. I think something is going wrong…
does this work with flexbox containers? i am trying to use the html code but it's not working
As it was made when flexbox is not arrived so this code snippet is only applicable for section/column. I’ll have a look if there is any way to update the code so it will also support container…
@@MakeDreamWebsite if you could do that, it would be amazing, thank you.
If i want to show only in mobile device how can i Disable in the web browser?
For that container, go to Advanced > Responsive > Hide on Desktop and check the option.
Hi, this is an amazing content as always. I followed all the steps and everything was ok until I started duplicating the heading, paragraph and button. Set the overflow to hidden and added the code but when I preview the elements duplicated are all over the website. It is same for all the devices.
Can you send me your page link through my email
Yes of course.
Please where do I get your email?
@@MakeDreamWebsiteplease where do I get your email?
@@MakeDreamWebsiteplease where do I get your email?