"Create a Sticky Vertical Menu Site in 30 Minutes - WordPress Gutenberg Tutorial"
Vložit
- čas přidán 30. 07. 2024
- Can I recreate the www.jamespopsys.com/ squarespace website in 30 minutes using WordPress Gutenberg? #rapidwebsites
👉 One Day Websites: www.pootlepress.com/our-wordp...
👉 Instant Websites 🔥 www.pootlepress.com/instant-w...
👉 My WordPress Gutenberg plugins: www.pootlepress.com/wordpress... 🔥
👉 Sign up for my newsletter: www.pootlepress.com/sign-up-t...
👉 My courses: www.pootlepress.com/our-wordp...
👉 Become a member: clubpootle.com/
👉 Contact me at: jamie@pootlepress.com
Timeline
0:00 - Intro
2:00 - Designing the home page
3:40 - Design the vertical menu
5:00 - Using the Gutenberg Navigation Block
7:30 - Using the query loop block to create a gallery
9:25 - How to create sticky navigation menu
12:10 - Create the single post page layout - Věda a technologie
Finally something not about Ai !!
😬
So far I've encountered two of your Gutenberg tutorials and found them both very educational and hella helpful! You always give just the right amount of info (in this case about the sticky navbar) to make it easy to solve for a particular situation even if it's not identical to the one you're demonstrating. Thanks !
Can that’s great to hear 👍
Thank you. This was amazing/awesome.
Thanks Jamie. This is really cool. The sticky menu on the left, I really love that. Within the sticky container block, say below the menu one could also add an eye-catching link to a "contact us" or a CTA landing page.
Yup, you could add any type of block in there 👍
Excellent, Jamie! Thank you, so much.
My pleasure - glad it was useful :)
I've been looking for something on sidebar menus for a while now. This is perfect thank you!
Cool, 👍
That really is a nice site. Now to go through and play this video at half speed so I can actually keep up. Thanks, as always Jamie.
😀😀 did you see the option in youtube to slow down videos (i use this a lot when watching guitar videos)
Amazing! I am a newbie and you have made my life easier, thanks and best wishes
great to hear
Another great Video Thanks Jamie. It illustrates how easy it is to do some great things. I've ditched the Query loop in favour of a product called POSTX (they do other products) and there are many things the Query loop doesn't do especially when you want to filter using Tags etc which is where the standard Query loops falls down badly. POSTX also has many more formatting option which is something the standard Query loop lacks.
tks Stu - fyi the standard query loop lets you filter by Tags and Categories ;)
That explains it! I ran into the same issue with the sticky block in column.
Yup, it's a recent change apparently - huge shame. Hopefully, it will come back.
If you could add another part - on how to do the masonry part would be awesome!
👍
Literally an awesome copy of the original Website... Jaime, you made my day! I had been trying to make a menu like this with different plugins, but now it is clearer. The problem I had with the plugins is that by default the menu customizer option does not appear, so I had to put several plugins until the option finally appeared because some plugins only work with items prior to the FSE. Now I'm wondering how can I put an icon for each menu item, please give me some idea? I don´t know how to add an Icon with Awesome font or should I use a menu icon plugin? Greetings and thanks a lot 🙏
i'll have a think
Really excellent content Jamie, thanks for this. The only issue is though, surely the query loop on the single post template isn't ideal? Will it not just default to the first image in the post set? So if you click on anything on the thumbnail page that isn't the first image it won't be very smooth UX as it won't display that image on the next page...just the first image of the set again but the URL will be correct.
Unless I'm missing something here?
I think if you select ‘inherit template’ it’s ok (but not 100% sure that’s how I got it working )
this video solved many of my problems. Thank you. One question: how did you "quickly" add that list of posts? Do you have a video on that subject? I am rebuilding a site and there are a ton of posts I would like to imports and add a featured images.
Figured it out. Used WP Export Import. Seems to have worked like a charm.
Nice Jamie - maybe using a lightbox instead of a single post page might be an idea too - I use Meow Lightbox...
Hi! I just discovered you channel! It’s great. I’m your new subscriber.
It’s possible to convert the query loop into an infinity scroll?
Thanks
Great question- I’ll do some digging
Hi Jamie, why I am getting this message in 6.1?
"This theme was built for the WordPress experimental full site editing feature. You need to install and activate the Gutenberg plugin to make it work."
But it didn't solve my issue even if I install Gutenberg plugin. This is only happening to 'blog' page and it uses page template of 'ONA' theme but I don't have an option to change template type either?
Thank you
Hi, it sounds like a theme issue - i would check with the team at Ona
@@jamiewp Thank you so much
Good video it’s impressive what FSE can do but the elegant “next & previous” sticky buttons on the left corner is what I wonder about and that is what you didn’t recreate! What a bummer! Any idea on how to do that?
Yes i couldn't work out an easy way to do that with the core query loop block (so i used the pagination block in the right hand column instead - will keep thinking on it though
@@jamiewp isn’t there some custom css to set the page numbers to “display: none” and somehow use some “absolute positioning” to move the remaining “previous/ next” to the left corner of the screen. I don’t know I just think that could be done but don’t know how. Any input?
what about i want to add sticky at top nav bar and footer?
Hi - do you want a sticky footer ?
Is sticky still not available forGutenbury menu?
Yes it is - but you need to put in a group block
Why do I have to use Wordfence if I already have server level protection + waf like BitNinja or imunify360?
You don't
Well this is a bug... I commented to another Wordpress video tutorial...anyway, keep up the good work! I follow all your videos :)
@@laurpixel i thought it was a bit odd 😉
This is helpful but I've noticed that using this sticky block causes some issues when viewing on mobile. I.e., the site title and menu end up on top of the posts as I scroll.
i think there might be option in the sticky block plugin not to stick on mobile (not 100% sure though)
@@jamiewp Just checked and you are correct. That fixed the problem. Thanks!
@@PhilipAllison 👍
Can you help me? I use elementor page builder but I do create blog posts using Gutenburg. I am going through and adding likr all of these spacer blocks for ends of paragraphs, before and after H1, H2, H3 tags, before and after images. Seems extremely tedious!
What is the RIGHT way to do this, or do I need to do this with every blog?
Also I havent even published the post yet so I'm sure once I look on Mobile it will give me an entirely new set of problems.
Please help! Best Practices?
It sounds like a theme issue - what theme are you using ?