How to create a vertical page scroll with Wordpress and Elementor

Подписаться 8 тыс.

Просмотров 57 тыс.

50% 1

In this tutorial you will learn how to build a vertical page scroll in WordPress for Desktop and Mobile, using Elementor, Elementor PRO and a third plugin called Dynamic Content for Elementor. We will create step by step a simple page scroll for a Greengrocer website, the design was made by me (Aryan Shirani) with Adobe XD.
#elementorpagescroll #howtomakepagescroll #Wordpresspagescroll
✨ Plugins:
Elementor Free: bit.ly/elementor-xdu
Elementor PRO: bit.ly/elementorpro-xdu
Dynamic content for Elementor: bit.ly/dynamicooo-xdu
🖐 Theme:
Hello Theme: bit.ly/hellotheme-xdu
👌 Hosting I use:
Siteground: bit.ly/siteground-xdu
🦄 Tools & Plugins
XDUnicorn Links: bit.ly/tools-xdu
💖 Templates Download:
Gumroad: gumroad.com/xdunicorn
Chapters:
0:00 - Preview / Final Result
0:42 - Plugins & Theme Check
1:17 - Create the menu
2:32 - Building the Header
8:27 - Building the Homepage Page Scroll
22:53 - Header Mobile Version
26:03 - Page Mobile Version
30:01 - Add the other slides
34:50 - Fixing
37:35 - Navigation Dots
39:03 - The End
😁 Follow me:
Facebook group: / elementortutorial
Instagram: / aryanshirani
Dribbble: dribbble.com/AryanShirani
Behance: www.behance.net/aryanshirani
Linkedin: / aryanshirani
Twitter: / xdunicorncom
------------------------------
Coming Home - Atch / atch-music
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/3yQGawP
Music promoted by Audio Library • Coming Home - Atch (No...
------------------------------

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 89

@TheHPCreatives Год назад

You just earned yourself another subscriber! great tutorial hope to see more of your helpful videos man!

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

Thanks a lot for joining!

@franciscoperez-by3hh 2 года назад

Thank you very much for this tutorial, it is definitely what I was looking for.

@Wpespresso 2 года назад

Great, thanks a lot for commenting and I'm really happy you found what you was looking for :)

@Kartenhouse 2 года назад

This is awesome, thanks so much!

@Wpespresso 2 года назад

Thanks to you happy to hear this

@rome229 2 года назад

Holy... you are a life saver!!!

@Wpespresso 2 года назад

Hey thanks a lot my friend 😜

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

26:37 is the part I was looking for. Thanks!

@Wpespresso 5 месяцев назад

Cool, thanks for the feedback 😁

@AmirGTR 5 месяцев назад

@@Wpespresso Little too far into the video, but glad I found what I wanted.

@teuccio73 3 года назад

Good Job

@Wpespresso 3 года назад

Thanks a lot! :D

@SamueleMarin 2 месяца назад

really a beautiful tutorial, I have a question to ask myself that the page scrolls do I necessarily need the "Dynamic content for Elementor" to ensure that the setting comes out than to use scrolling on Page Settings > Page scroll? Because I see that that plug in has a cost... is there a way to do the same without buying that plug in? Thanks so much in advance

@Merlo_77 2 года назад

Amazing, thank you! How can I make appear the menu only in the first secrion?

@Wpespresso 2 года назад

Don't make the menu sticky, try and let me know if worked :)

@aminel-amri2518 2 года назад

thank you so much for this video, one question please, for scrolling effect in page setting do i need the pro version ?

@Wpespresso Год назад

Hello, I don't remember but I think yes, all animation are in pro version not free

@googleinc6033 Год назад

Its not there even in the pro version

@jaykim4677 Год назад

Thanks for your great info. have a question here. I just followed you step by step but my scroll is not that smooth like you. what do I have to do for it? / and I think it doesn't work with my wordpress website. when I installed and published "Dynamic content for Elementor" this one. I can check only header and footer one.

@Wpespresso Год назад

This is very strange I will try to check and see if I can make a new video without plugin so that we are sure no conflict is going on

@hernanfiore 2 года назад

Excellent video! One question , how do I go from the first section full width , to the next section full width , by clicking the menu . Because I use anchors . but it never shows me the full page , Always , some part of the following section is seen in the screen. Can it be fixed using this dynamic content? thank you for your time

@Wpespresso 2 года назад

Hello Herman are you using Elementor built in Anchors widget ?

@grenaldymanoppo4577 2 года назад

Mastah

@Wpespresso 2 года назад

Nice right ?

@Baffardi 2 года назад

Hi! and thank you so much for your video tutorial, I have 1 question, because I can't find it: do i need the pro version of elementor for the "motion effects" section? thank you!!!

@Wpespresso 2 года назад

Hello and thanks for watching, Yes for the motion effect you need Elementor PRO

@Baffardi 2 года назад

@@Wpespresso ok, thank you!

@Wpespresso 2 года назад

@@Baffardi No problem have fun!

@fahminizam8539 2 года назад

ini sangat membantu dan mudah di mengerti salam dari indonesia

@Wpespresso Год назад

Thanks a lot, very kind of you!

@relaxationvacation640 2 года назад

How do you get the actual slides to vertically scroll the way you have? I don't have the page scroll settings option in my editor.

@Wpespresso 2 года назад

Hello did you check the plug-in I’m using ? As you can see in the description of this video there is a link to get the plug-in for the vertical sliding feature there are many other too

@konstantinaeleutheriampogi2341 2 года назад

@@Wpespresso Hey there! I have the exactly same problem. I'm using all of the 3 plugins but Page Scroll doesn't show on editor.

@estefanoaquino 2 года назад

TKS 🙂

@Wpespresso 2 года назад

No problem, thanks to you for commenting ☺️

@kellingtoncrivelaro3929 Год назад

Hey! Is there a way to have a fixed menu at the top of the page that triggers the "dots pagination" when clicked?? Thx for the video!

@Wpespresso Год назад

Yes but we should add some custom code in that case as there is no options

@shun.h.197 2 года назад

Hi. thank you for the great content. I was looking for the Dynamic Content plugin in Wordpress, and I found one name "Dynamic Visibility for Elementor" from the same company. Is this the same thing? Do they updated the name recently?

@Wpespresso 2 года назад

This is the same company, and recently they changed the logo and the name now is Dynamicooo to make it easy. But yeah is the same company/plugin

@tomdrouillet442 2 года назад

@@Wpespresso Hi I have exactly the same plug-in but i don't have the page scroll section, can you help me please ? Thank you !

@Wpespresso 2 года назад

@@tomdrouillet442 Hello Tom, did you enabled in the plugin settings this feature? Can you please double-check if you did that?

@tomdrouillet442 2 года назад

@@Wpespresso Hello, I don't find the plugin settings but in their doc they said "Simply open a page in Elementor mode. Select your widget, go to Advanced tab. You’ll find a new “Dynamic” configuration. Open it, enable Animations and set as you prefer." But nothing appears to me... I'm sorry to bother you with this, but this tutorial is so complete that I need to finish it because it could be useful in the future

@Wpespresso 2 года назад

@@tomdrouillet442 If you open the page with elementor and go on: "Settings" you don't see a tab called "Page Scroll" ? Check 10:46 you will see where is it

@yaya555 Год назад

Thank you For you're Tutorial Brother Can I hidden Dot Scroll Only Mobile Device 🙏

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

No problem, I did not understand your question

@franh90p67 Год назад

the header is not sticky and i made all the steps good

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

Try to start again the video and check every step, unfortunately I don't know what you did wrong is hard for me to help :(

@keshavkeshav1039 7 часов назад

i don't show in page scroll option in my website (elementor PRO version is 3.20.0)

@PeekABooBeatz 2 года назад

Can you please do the exact same tutorial with the elementor plugin elements kits or premium addons for elementor? because I don't understand how it works. Or the plugins are not working properly!

@Wpespresso 2 года назад

Hello I need to buy those plugin first and then try to make a tutorial out of it, I will see If I have time, thanks a lot for asking!

@primashades1616 2 года назад

Is this possible to do in gutenberg blocks?

@Wpespresso 2 года назад

No unfortunately.

@whitecartin 2 месяца назад

Hello, In my Dynamic Content Plugin, Snap Scroll is not working. Please help me to fix this issue.

@maknae2135 2 года назад

Hi. Thank you. But my nav is duplicated for the first section, have to scroll twice to go to the next section. Hope you can help me out.

@Wpespresso 2 года назад

Are you using elementor pro? Do you have a header template ?

@maknae2135 2 года назад

@@Wpespresso Yes Elementor pro, also use header template

@maknae2135 2 года назад

@@Wpespresso Hi thank you, already solved, yeah its the header template problem haha, as I made the header in elementor full width while the page is elementor canvas, so I did add another header tht appears as another section hehe.

@Wpespresso 2 года назад

Cool happy you solved! 😊😊😊

@richardabrahams4753 3 месяца назад

Hi I know this was a few years ago.. the Dynamic content for Elimentor plugin is not showing up. Is it part of the Dynamic Content for Elementor now? which is a yearly subscription? is there an alternative ? thanks for anyone who replies...

@Wpespresso 3 месяца назад

Actually there are many other solutions, first of all depends on what you use, elementor or bricks, with bricks you don’t need any extra plugin, for elementor you can use a plugin or you can do it by using the snap scroll. I may do a new tutorial for this as there is better ways

@richardabrahams4753 3 месяца назад

awesome, thanks!, please do@@Wpespresso

@abdellatifmashhour8408 7 дней назад

Can you please explain how to do with snap scroll @@Wpespresso

@pakin9314 2 года назад

Is there any alternative free plugin to get the page scroll option?

@Wpespresso 2 года назад

For now I did not find a good free alternative, this feature is present in most elementor paid plugins

@roc_kstark 2 года назад

its necesary elementor pro?

@Wpespresso 2 года назад

Not necessary but if you want to build an entire website is better to have it, as Elementor pro allow you to add menus, footers, headers and templates and many more things. Hope is useful :)

@PresentTrendProduction 2 года назад

Can I look the website from bottom to top??

@Wpespresso Год назад

Yes sure it works in both directions :)

@googleinc6033 Год назад

Why I dont have the Page Scroll option in mine?

@Wpespresso Год назад

Could you share a screenshot? You should have it

@oe-pm6bz 9 месяцев назад

hi, same i dont have it

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

Hi ! I couldn´t find this Dynamic content for elementor anymore . Anybody have a solution for this ?

@Wpespresso 5 месяцев назад

Hello, what you could not find ?

@cliqueimarketing 5 месяцев назад

The plugin is not avaiable at the site for download anymore.

@zxczzvzfeadfa3415 3 месяца назад

hey i dont really want to watch the whole video where is the point where you show how to make the section scroll snap? I've tried looking through cant find

@Wpespresso 3 месяца назад

Hello, actually I suggest to speed up the video. I’m planning to make a new version for bricks maybe that could be useful ?

@Umar-Ztx Месяц назад

He takes 39 minutes to show the scroll effect 🤣🤣🤣🤣 The person who need the scroll effect, they knows how to design the page, Just waste of time.

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

unecessary lenghy video

@Wpespresso 5 месяцев назад

You are right I will try to make them shorter next time, thanks for the feedback! 😄

@pawe430 Год назад

@WP Espresso I send you email, because I using this plugin but my website always broking and I cant create this smoothier scroll too like you have. At me is very fast and I prefer a little slower.

@Wpespresso Год назад

Hey thanks for commenting, what you mean is very fast? You need to decrease speed ?

@SamueleMarin 2 месяца назад