WordPress page transitions just got a whole lot more magical! No plugins, no coding, just pure Gutenberg genius. Watch as the images and text seamlessly blend together, creating a mesmerizing effect as you scroll. It’s like a disappearing act, but for your website! So cool, right? 😎🔮🪄
The Inspiration and the Experiment 🌈
[Music] a big thank you to GoDaddy for sponsoring this video GoDaddy managed WordPress hosting is a great way to quickly create and host your WordPress site go to bitly jwp to get 30% off your managed WordPress hosting today last week when I was recreating the apple.com website in 30 minutes Link in description below if you want to see that tutorial I stumbled across this amazing effect and it got me thinking would this be possible just using core WordPress Gutenberg blocks with no plugins and no coding or css and this is what I came up [Music] with but then I thought could we take this one step further and I came up with this
Getting Started with Core Gutenberg Blocks 🚀
So today I’m going to show you how to do this on your own sites no CSS, no coding, no plugins, just core Gutenberg blocks. To make this as easy to follow as possible, I’ve split my screen in two with the original design on the left and the one I’m about to recreate on the right. It’s just a matter of strategically using cover blocks and a hint of magic to achieve these stunning transitions.
Creating the Magical Transitions ✨
If I click on the list view up here you can see that the entire page is just made up out of cover blocks and also a sprinkling of magic which I’m going to talk you through. The simplicity of using cover blocks and making adjustments to features like opacity and background fixing allows for seamless transitions that captivate the viewers.
Crafting the Elegant Graduation Effect 🎓
Now we come to this section down here we start to see this lovely graduation where we merge and Fade Into the the next image that again is pretty straightforward what we’re going to do again click on the list View and we’re going to duplicate that block once more now we just need to delete the title in that block here now we need to add this graduation we’re going to use the overlay that comes with the cover block so we’re going to select the cover block itself again use the list view if that’s easier for you come across to the Stars option here and we want to click on overlay then we want to click on gradient now we can actually set the gradient of our overlay so we want to choose an angle of 180 and we want to go from basically fully transparent at the top like so so you’ve got these two sliders this top one here is the color slider this bottom one is transparency so we really want the first Color Picker here which is going to be the top one to be completely transparent as you can see we’ve got a bit of graduation on it but it’s pretty much transparent then the bottom one we’re going to set here as black and we want to set that one to be pretty much opaque so we’re going to choose over here like so and that means that that graduation now will start to fade down the other thing you must do is change your overlay opacity which is here because we set that to n before so we want to slide that now to maximum opacity and you can see now we’ve got this fantastic graduation that’s coming from transparent at the top to completely black at the bottom so that’s done now
| Angle | Color | Transparency |
|---|---|---|
| 180 | Black | Opaque |
Optimizing for Mobile View 📱
There is an issue when you set a background image to a cover block on a mobile it’ll look like it’s zooming in let me show you the problem as I squish the screen over on the right here to emulate viewing this on a mobile and then scroll down you you’ll see my text looks like it’s cropping because it’s set as the background image to the cover block the solution is to hide that block on mobile on this page on the left I’ve installed the block visibility plugin and I’m hiding those blocks on a mobile and you’ll see as I scroll up we’ve still have these lovely transitions between hero sections but we don’t have the issue with the background image if you want to try this on your own site then I put a link to a oneclick website in the description below click on that it’ll fire you up a brand new website and you can literally go in and copy the block that I’ve built using these pages and then paste them onto your site and just replace the text and the images and bingo you’ll have this amazing cool effect on any of your pages that you wish I hope you enjoyed this one if you did if you can give it a thumbs up down below now it would be amazing because it makes a huge huge it really does make a huge difference in terms of how many people get to see this video and also every time you do hit that like button our cats get a little [Music] treat [Music] if you want to see more videos just like this hit that subscribe button down below and you’ll be notified every time I release a new one keep well and I’ll see you soon bye for now
Key Takeaways 🚀
- Creating captivating transitions with core Gutenberg blocks
- Utilizing overlays and opacity for magical effects
- Optimizing for mobile responsiveness
- Encouraging experimentation and creativity in web design
Conclusion:
The possibilities within Gutenberg for creating visually stunning and engaging page transitions are endless. By leveraging core blocks and making strategic adjustments, you can elevate your design to a whole new level. The key is to embrace experimentation and let your creativity flow. With these techniques, you can truly create magical experiences for your website visitors.
Remember, the sky’s the limit with Gutenberg! 🎨
