- 129
- 3 413 072
Make Dream Website
Приєднався 1 бер 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.
Переглядів: 42 611
Відео
Make this INCREDIBLE Animated Side Menu in Elementor | WordPress Advanced Navigation Menu Design
Переглядів 45 тис.4 місяці тому
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
Переглядів 11 тис.5 місяців тому
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
Переглядів 8 тис.6 місяців тому
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
Переглядів 6 тис.6 місяців тому
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
Переглядів 15 тис.Рік тому
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
Переглядів 70 тис.Рік тому
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
Переглядів 37 тис.Рік тому
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
Переглядів 24 тис.Рік тому
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
Переглядів 40 тис.Рік тому
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
Переглядів 13 тис.Рік тому
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
Переглядів 28 тис.Рік тому
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
Переглядів 9 тис.Рік тому
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
Переглядів 51 тис.Рік тому
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
Переглядів 88 тис.Рік тому
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
Переглядів 38 тис.Рік тому
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
Переглядів 10 тис.Рік тому
Elementor Repeat Image Hover Effect | Elementor Tips and Tricks
Smooth Background Color Change on Scroll in Elementor | Scrolling Background Effect/Animation
Переглядів 31 тис.Рік тому
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)
Переглядів 104 тис.2 роки тому
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
Переглядів 22 тис.2 роки тому
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
Переглядів 29 тис.2 роки тому
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
Переглядів 10 тис.2 роки тому
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
Переглядів 54 тис.2 роки тому
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
Переглядів 488 тис.2 роки тому
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)
Переглядів 20 тис.2 роки тому
How to Embed UA-cam Shorts Video in WordPress/Elementor Website - (SUPER EASY)
[3D] Make a 360 Degree Image Rotation Effect in Elementor Website | WordPress 3D Object/Model Viewer
Переглядів 66 тис.2 роки тому
[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)
Переглядів 7 тис.2 роки тому
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
Переглядів 8 тис.2 роки тому
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)
Переглядів 13 тис.2 роки тому
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
Переглядів 6 тис.2 роки тому
Make a 3D Cube Slider Effects with Text in WordPress/Elementor | Creative Animated Image Carousel
This is one of the best comprehensive videos I've watched on layout design. But I followed as you taught. But it doesn't appear when I want to add it to a page. How do I get this solved or did I miss something?
Hi lightbox is not working
Awesom turtorial Bro..thanks
You’re welcome!
#MakeDreamWebsite Sir "icon-menu v3" not working properly, when the round purple 🟣 div moves to other icon, the icon disappeared suddenly and only purple 🟣 round div showing. Please help me to resolve this problem, I look forward to your positive response. Thank you.
Hi, can you please email me. I'll have a look on the issue...
@@MakeDreamWebsite Yes Sir, I will, Sir can I contact you via your website contact form?
@@MakeDreamWebsite Yes Sir! I will. Sir can I contact with you via your website contact from?
gracias!
Welcome 🙏
Any idea how to add subpages? For example Blog -> South America -> Peru?
After a lot of requests, I have later created an another version of this menu with submenu support(even nested submenu) and I have added it with the template file…
@@MakeDreamWebsite Thank you very much for your fast answer! Just bought it:)
You’re welcome!
Very explicit Mine only worked after I made a duplicate on the same page. I ended up turning off the responsiveness of the duplicate copy on all devices before the original one could work
I think you have done some mistake. It will work perfectly even if you have multiple set of this section in a same page…
Thank you for your help - this helped me with making a clickable column. Much Apreciated!
You’re welcome!
Great description! I finally managed to do the vertical header!! Can you help in telling me how to move the vertical header to the right of the page?
Hello! if i buy the menu i can run it only with elementor base? i use pro elements not elementor pro, i can use it?? thank you!
Yes, it will also work without Elementor Pro if you have header builder plugin
It's not working, I believe it's the code used in the flexbox model that is not compatible, could you redo the tutorial?
I’ll update the code snippet so it will also work for the flexbox structure…
very nice. thanks for the step by step
You’re welcome!
hey great video, bought the template! However i do have a question, can i make it so that the sidebar (closed by default) stays open once it has been opened and only closes again once it is closed manually, even if i reload the page, i want the sidebar to stay in the position it had before... so maybe save the position somehow, that would be great if there was a possibility
There is a version closed by default inside the template. You can use it. And to save that open/close state, you need to utilise the browser cookie to save the state on the users browser and show that accordingly. So, the code need to be also adjusted according to that. You can email me for that...
@@MakeDreamWebsite sounds great, whats your email :)
I bought it but it doesn't work! This package cannot be installed. The theme is missing the style.css stylesheet. Theme installation failed.
Blogger, if you see my message, please reply to me.
@pph1308 I think you try to install it as a Theme so you can see that error message. You need to install it as an Elementor template json file. You can follow the pdf file to see how to install it properly. Even if you failed you can email me...
@@MakeDreamWebsite I can't contact you with the email address you used for payment. I purchased this, but I can't install it.
@@MakeDreamWebsite Is there any way I can contact you?
It’s contact@makedreamwebsite.com
Wilson Margaret Davis Scott Lewis Donald
Thanks so much for this brother👊🏼 you’ve really helped us improve our design❤
Glad to help you❤️
Please make a video of this whole page doing from scratch. plzz
help i followed all the instruction but im stucked at 7:05, i have pasted the javascript on the html but the result is not the same as yours, i still can't see the sliders
Can you please complete the full tutorial. Then, it will also work in your case.
Hi everyone, i've some problems. I follow all the steps but my title,text and button doesn't change when i select another image from the carousell and also is not diplayed on elementor customization page.
Excellent travail !
Thanks!
How can I make it full width like slider
How can i add working search button ?
Hello, this is very useful for you, but I would like to know if it is possible to add a link to each photo so that my customers can jump to the corresponding page by clicking on the photo
After a lot of requests after uploading the video I have added the clickable card option and add it as a separate version inside the template…
great stuff man. many thanks
You're welcome!
Sir could you please make a video of spin and win using elementor .
awesome! the only tutorial that gave me a real solution for the horizontal scrolling!! thanks a lot!
You’re welcome!
slider button class is not working please give me solution
Hey MDW: I bought the widget, but I have 2 questions: 1. How can I change the position of the backgroundimage for mobile? 2. Is it possible to fix the visual glitch while transitioning on mozilla firefox? It looks good anywhere accept in MF. I am almost done, styling...
Can you please email me...
Can I apply the template on the without flexbox website?
Yes, inside the zip file there is a folder Non-container. You need to use the json file inside that.
Hi sir, I just bought the effect and literally drag with only changing the text and images but I got a problem, when I click it does bug and does not show the picture zoomed until I click in another one. Sorry for the bothering but what it could be?
Can you please email me your page link?
Hi, I purchased this template. When scroll down the logo wasn’t working in transition but disappeared suddenly. Could you fix this error?
I think something is conflicting with it. Can you please email me your website link? I'll resolve it...
@@MakeDreamWebsite It occurs even when import in blank page
I see… if you email me the page link, I can inspect the reason why it’s occurs on your site…
When I change the text size to 10VH it automatically screws everything up. The text box doesn't accommodate the size of the text. I continued to do the rest of the video, and the whole thing didn't work? Any ideas of what i'm doing wrong?
Can you please repeat everything again carefully
It didn't worked for me. I am using Hub Theme and have placed CSS in Custom CSS option provided by the theme.
How do I make the cards clickable?
After a lot of requests after uploading the video I have added the clickable card option and add it as a separate version inside the template…
Can you just share how to make it go vertical and not horizontal?
Great, how can I add those cards, I have the Premium Addons for Elementor plugin and I use the vertical scroll, but I can not enjoy the movement of the cards because it makes me scroll.
Okay! I'll update the code snippet soon so it will work without any issues...
@@MakeDreamWebsite Thanks for your response. great job.
THANKS BROOO VERY COOOL
You are welcome!
Could you upload all template in templatish? Probably someone need to buy.
Yes, I’ll try to upload these soon!
Bro, this video don’t have template?
No, it doesn’t have any templates.
Great tutorial, is it possible to close the menu with the ESC key?
Yes, it’s possible but need to add some extra line of code…
Love You Sir, Helpful
Thanks!
Bro legend
Thanks!
how would one go about making the rotating text in the first section stop when cursor is hovering?
That code would be different process
Is anyone having a problem purchasing from the website?
Can you please try again few hours later. If it doesn’t work then you can let me know.
Hello, Really cool effect. I followed your steps it and it works fine. The only problem I am having is that when I am scrolling down, all the cards are invisible. Then, as soon as the effect takes place, the cards appear. Do you have an idea why and how I could correct this?
Thank you!
You’re welcome!
Hi, thank you for the video, but it doesn't work for me, nothing happens :(
Can you please follow the process again carefully?
@@MakeDreamWebsite I understand now from the replays' it does not work with container, is it right?
very good video and straight point
🙏
Hello! I would like to buy the ready-made template. How can I make it so that when I click on an item in the menu, it closes? It is for a one-page website. Thank you very much.
When you purchase you can email me. I’ll make that customisation…
I asked chatgpt to do it, and it worked. Thanks for your content! Can you tell me what I should study to be able to make that kind of animations on the web? Thanks.
You need the knowledge of html, css, javascript and a lot of practice actually!
Thank you! it is amazing, unfortunately the HTML code IDK why it's not working, any common mistakes that someone make when adding the HTML code? Thanks
Can you please repeat the process again carefully?