You won't believe WordPress can do this!

Фильм және анимация

5 incredible Pro web design effects that are easy with WordPress 🔥
If you use any of these techniques please please please share your work 👍
If you would like to see more of this type of video please hit the 👍 button
👉 FREE THEMES www.pootlepress.com/free-word...
👉 Hire Me: www.pootlepress.com/wordpress...
👉 Stay in touch with WordPress news: www.pootlepress.com/sign-up-t...
👉 Pro WordPress Tutorials : clubpootle.com/
👉 Sponsor my KZread channel www.pootlepress.com/youtube-v...
Timeline
0:00 - Intro
0:25 - Demo
1:30 - The Magical Parallax
4:14 - The Scroll Snap
5:28 - The Font Reverse
6:00 - The Animation
6:15 - The Rick Roll
7:20 - Responsive
7:40 - Cats Cameo
Video links
CSS code for Scroll Snap - www.pootlepress.com/2024/02/h...
Free Twentig plugin - wordpress.org/plugins/twentig/
Hi everyone!
In today's video, you'll discover 👇
-The most stunning visual effect I've ever created with WordPress.
-Step-by-step instructions to recreate it in just 5 minutes, without any coding or plugins.
Recently, I've been deep diving with the core Blocks and stumbled upon some really cool tricks that I can't wait to share with you. It's amazing what you can achieve with just the core WordPress cover block and a sprinkle of creativity. I found these effects by playing around-some on purpose and some by happy accident.
In this video, I'll walk you through how to create these stunning visual effects yourself. From creating a sense of depth with parallax backgrounds that make your pages come alive, to smooth transitions that guide your visitors through your site, it's all surprisingly simple once you know how.
We'll dive into making animations that can add a playful or professional touch to your site and even how to pull off a fun Rickroll effect. Plus, I'll introduce you to some cool new tools that have made these designs even easier to achieve.
Just a heads up, though-while these effects look great on most devices, iPhones have a bit of a quirk. But don't worry, I've got a workaround for that too.
I hope you find them useful. Feel free to drop any thoughts or questions in the comments below 👍
Jamie

Пікірлер: 154

  • @DiegoPereyra
    @DiegoPereyra5 ай бұрын

    Love your videos man, they are beautiful... Great astounding uses of the cover block, beautiful designs. Have a great day... And feed the cats...!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Diego, a lot of love and hard work went into this video so it's great to read your comment 👍

  • @behthiansu
    @behthiansu5 ай бұрын

    You made a technical tutorial guide into an art piece, the music, the ambience! Nice!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thank you so much 😊

  • @pmmueller
    @pmmueller5 ай бұрын

    It looks beautiful, it's fun to watch, it's full of brilliant ideas and it's well presented. This is better than almost all television shows I've seen lately. And it's shorter 🤗

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thank you so much Peter - I thought you would like this one 😊

  • @derek-hanson
    @derek-hanson5 ай бұрын

    I literally had been playing these types of scenarios in my mind but hadn’t spent the time to play around with it. I love that layering of the mountains and the sky background ❤

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Derek 🙏 Let me know if you come up with anything new - i'd love to share

  • @comartse
    @comartse5 ай бұрын

    Great show of what is possible by using the settings creatively. Gives both reflection and inspiration in using the standard blocks. Thank you!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks for watching Cay

  • @Rbog17
    @Rbog175 ай бұрын

    Fantastic. Well done! Keep it coming.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    More to come!

  • @DarrinRich
    @DarrinRich5 ай бұрын

    That was supercool. Love it!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Glad you liked it!

  • @jdccool
    @jdccool4 ай бұрын

    Every video, I mean EVERY VIDEO, always has something engaging, creative and useful in them. Thank you, Jamie.

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Thank you so much 😊

  • @SeanClarke
    @SeanClarke5 ай бұрын

    Wonderful Jamie!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Sean 🙏 I’m really proud of this one, so it’s great to hear from you.

  • @elliottrichmondwp
    @elliottrichmondwp5 ай бұрын

    Absolutely blown away with this creativity with just a couple of simple blocks, amazing content Jamie ❤

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Elliot 👍

  • @mikestottuk
    @mikestottuk5 ай бұрын

    The first effect is great and very Disney like. Keep up the awesome work Jamie.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Mike 👍

  • @CodingIsFun
    @CodingIsFun5 ай бұрын

    Great video! Thanks for sharing!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    👍

  • @PaalJoachimRomdahl
    @PaalJoachimRomdahl5 ай бұрын

    Very cool! Thank you for exploring various fun possibilities in Gutenberg, Jamie!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks Paal

  • @raptorcreate
    @raptorcreate5 ай бұрын

    these were amazing to watch. good job ;)

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thank you 🙏

  • @o_konstantine
    @o_konstantine5 ай бұрын

    Thank You for this tips

  • @jamiewp

    @jamiewp

    5 ай бұрын

    My pleasure 😊

  • @MartinMcLoughlinNo1
    @MartinMcLoughlinNo15 ай бұрын

    Thanks for sharing this very useful info.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks for watching Martin

  • @e.rohner5704
    @e.rohner57045 ай бұрын

    Thank you once again! Good to see someone playing with Wordpress!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    👍🙏

  • @maldonadodani
    @maldonadodani4 ай бұрын

    Really creative. Great work. Thanks for sharing

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Thanks Daniel

  • @Tech-Dev
    @Tech-Dev5 ай бұрын

    Cheers. Absolutely Brill.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thank you 👍

  • @StefanoFerro
    @StefanoFerro5 ай бұрын

    Just wow. You really are a master

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Stefano - these were so much fun to explore and bring to you ❤

  • @bquerry
    @bquerry5 ай бұрын

    Fantastic!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks Bill

  • @AndoverIT
    @AndoverIT5 ай бұрын

    Wow! These are brilliant Jamie! I was expecting a ton of plugins to have to do these!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks 🙏 its fun to push the boundaries of what’s possible with core WordPress - i will try to do more of these

  • @AndoverIT

    @AndoverIT

    5 ай бұрын

    @@jamiewp Please! Great instructions on them as well - easy to follow. Going to have to have a play 🙂

  • @KaiBuskirk
    @KaiBuskirk5 ай бұрын

    Epic! Love the Vibe!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Kai - hope all is well with you

  • @nailakhalid956
    @nailakhalid9565 ай бұрын

    That's awesome Jamie Will try these❤

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Cool, please share a link when you do, i'd love to see what you come up with ❤

  • @nailakhalid956

    @nailakhalid956

    5 ай бұрын

    @@jamiewp sure I will share

  • @smarthelpguides
    @smarthelpguides5 ай бұрын

    wow. Thank you!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    ❤️

  • @FreeMaverick
    @FreeMaverickАй бұрын

    Thank you for such an amazing idea and tutorial

  • @jamiewp

    @jamiewp

    Ай бұрын

    🙏👍

  • @yasershahian3134
    @yasershahian31345 ай бұрын

    Just Amazing

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Yaser 🙏

  • @CMSAssociation
    @CMSAssociation5 ай бұрын

    You stud. This rocks.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    😀

  • @CattieCoyle
    @CattieCoyle5 ай бұрын

    So cool! I have so many ideas now that I don't even know where to begin!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    😊

  • @paulroos8517
    @paulroos85175 ай бұрын

    Again, thanks.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks Paul

  • @nw10design
    @nw10design5 ай бұрын

    Great stuff, Jamie! I was working on a research lab client site and was contemplating how to do a home page banner with a looping video (a rotating enzyme animation with a fixed background color) in a left column and some caption text in a right column. This is pretty straightforward if you use a full-width cover block (with the video's fixed background color so that the video seamlessly blends) and, within that, two columns where the left column contains another cover block with the looping video as its background and the right column containing the caption text. Your layered, full-height, full-width covers had not occurred to me as an enhanced parallax display technique. Indeed, in your beautiful starfield/mountains example, the cover block's background starfield image could be replaced with a looping starfield video which would produce a pretty interesting parallax + video motion effect. Covers within covers! You sir, are a stone cold genius.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    I love the idea of adding video into the mix ❤ Thanks for the great ideas...time to start playing again 💪

  • @celinedaumesnil7329
    @celinedaumesnil73295 ай бұрын

    J’adore ❤

  • @jamiewp

    @jamiewp

    5 ай бұрын

    ❤️

  • @nubiancenter5918
    @nubiancenter59185 ай бұрын

    What a beautiful. video, you R great , thank you nave a good day

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thank you ❤

  • @morizanova
    @morizanova5 ай бұрын

    This will be awesome for storyteller

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Absolutely 👍

  • @akhenatontubba9950
    @akhenatontubba99505 ай бұрын

    Teşekkürler çok güzel bir paylaşım.Manuel olarak altyazı eklediğiniz için de ayrıca teşekkür ederim

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Rica ederim, benim için bir zevkti. 👍

  • @michaelolubi-neye3497
    @michaelolubi-neye34972 ай бұрын

    I wish I could like over and over and over again…

  • @jamiewp

    @jamiewp

    2 ай бұрын

    Thank you Michael 😃 Maybe send it round to some friends 😉

  • @tomcha75
    @tomcha755 ай бұрын

    Mind blown

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Great to hear 😀

  • @visualmodo
    @visualmodo5 ай бұрын

    Truly good video =DD

  • @jamiewp

    @jamiewp

    5 ай бұрын

    👍

  • @perseuslegend8580
    @perseuslegend85802 ай бұрын

    Thanks for another great video, Jamie! I was taking inspiration from your examples to build a fullscreen slider by using the Cover block, to no avail. If you'll ever want to give it a try and share your results, that would be amazing.

  • @perseuslegend8580

    @perseuslegend8580

    2 ай бұрын

    In the meantime, I found a plugin that does that, I thought to share it here: Gutenslider. Still, if there were a way to do it with built-in blocks, it would be nice :)

  • @jamiewp

    @jamiewp

    2 ай бұрын

    Hi, did you try with this free plugin kzread.info/dash/bejne/nWFkj8WJktWsoNY.htmlsi=qVjBKSYNDAt3E9T6

  • @MichaelWilliams-lo3ix
    @MichaelWilliams-lo3ix5 ай бұрын

    Awesome

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks Michael

  • @mr_kingout
    @mr_kingout5 ай бұрын

    Awesome transition I am from India

  • @jamiewp

    @jamiewp

    5 ай бұрын

    I ❤india, thank you for watching

  • @UpperValleyWeb
    @UpperValleyWeb5 ай бұрын

    WOW! 🎉

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks for watching

  • @ManuelHernandez-en3xy
    @ManuelHernandez-en3xy5 ай бұрын

    Jamie, would you also please include in your videos how they look on mobile? 😢 sometimes they don't looks as good as pc.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    I mentioned that at the end of the video 👍

  • @sergeserge5843
    @sergeserge58435 ай бұрын

    Wonderful 👍 One thing though makes me reluctant to implement these designs. The picture with transparency has to be PNG. They weigh quite a lot 😞

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Have you tried using tinypng to compress them? That gives great results.

  • @PaulMcCannWebBuilder

    @PaulMcCannWebBuilder

    5 ай бұрын

    Webp does support transparency, with very good browser support. Search for PNG to Webp tools to convert and preserve the alpha channel and you could save more than half of the image file size. Also images like the one used in this demo could be created as SVGs (Adobe Illustrator's AI tool can create similar mountains as SVGs) and depending on detail, could be comparably tiny.

  • @Gilleswi
    @GilleswiАй бұрын

    This is amazing! Where did you get these Images for the magical parallax effect?

  • @jamiewp

    @jamiewp

    Ай бұрын

    Thank you - they were generated using Midjourney (alpha)

  • @enezar
    @enezar5 ай бұрын

    Wow

  • @jamiewp

    @jamiewp

    5 ай бұрын

  • @sinnombre5466
    @sinnombre54665 ай бұрын

    this is exactly how i want to style a site , almost. I'm trying to do it via horizontal scrolling, but all the plugins I've attempted so far hide the most useful features behind pay wall : ( I'm cheap )

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Great to hear 👍💪

  • @PuchoWebSolutions
    @PuchoWebSolutions4 ай бұрын

    Hello from New York City! But how did you make a full page background image under the cover block? Any clues appreciated. Thank you for good video.

  • @jamiewp

    @jamiewp

    4 ай бұрын

    The Cover Block lets you add a background image , and then you make it full width and full height. All those settings come by default with the Cover Block on the floating toolbar 👍

  • @PuchoWebSolutions

    @PuchoWebSolutions

    4 ай бұрын

    Saw your video on Cover Block, but please follow up that video explaining how to simply configure a uniform body background image for all pages at a website using the cover block. Do you suggest putting the cover block first in the list view or in the header block? From a frustrated full site editor in NYC. Thank you. @@jamiewp

  • @SeanClarke
    @SeanClarke5 ай бұрын

    Could you do this from left to right? And could you do more than two layers, with slightly different scroll speeds to create even more of a parallax effect?

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Hi Sean, you read my mind - that's on my list for next week 😀

  • @SeanClarke

    @SeanClarke

    5 ай бұрын

    @@jamiewp I'll be looking forward to seeing how you achieve that. Thanks!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    @@SeanClarke 👍

  • @journeyeu
    @journeyeu5 ай бұрын

    Does it impact the loading speed

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Not if you optimise your images 👍

  • @balakrishnampatil1
    @balakrishnampatil15 ай бұрын

    1000th like 😊

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thank you ❤

  • @onkelzaufsendung-dervideop2943
    @onkelzaufsendung-dervideop29435 ай бұрын

    Amazing. How can i make my sticke header (menu) transparent by scrolling ? I cant find videos

  • @jamiewp

    @jamiewp

    5 ай бұрын

    That needs a little javascript - i’ll try to put a tutorial together 👍

  • @onkelzaufsendung-dervideop2943

    @onkelzaufsendung-dervideop2943

    5 ай бұрын

    That would be so amazing. Using the 2024 theme and no plugins. Thanks!!!!

  • @RoKIncorporated

    @RoKIncorporated

    5 ай бұрын

    @@jamiewp when can i expect it?

  • @jamiewp

    @jamiewp

    5 ай бұрын

    @@RoKIncorporated sorry not for a while - i have a pretty long list of videos first

  • @sofiapaladino5172
    @sofiapaladino51723 күн бұрын

    how does it react in responsive mode?

  • @broizzo
    @broizzo5 ай бұрын

    Hi Jamie, do you know why a wordpress page is overflow horizontally even I've set the page to 100% width/wide?

  • @jamiewp

    @jamiewp

    5 ай бұрын

    What theme are you using?

  • @brianmorris6466
    @brianmorris6466Ай бұрын

    I tried this and it looks beautiful but I wound up with double scroll bars on the right hand side. Any ideas on how to fix?

  • @brianmorris6466

    @brianmorris6466

    Ай бұрын

    Nevermind, it's because of the wordpress wp-admin-bar, I'm just going to leave it.

  • @CarlMadsen
    @CarlMadsen5 ай бұрын

    I think the british have a word for this: BRILLIANT!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thank you Carl 😊

  • @kimblagg8090
    @kimblagg80905 ай бұрын

    I don't have the option to change the padding for the Cover in your instructions. The last option I have is Dimensions.

  • @jamiewp

    @jamiewp

    4 ай бұрын

    It might be your theme - what theme are you using?

  • @randbaldwin
    @randbaldwin5 ай бұрын

    👍

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Rand

  • @ohia5654
    @ohia56543 ай бұрын

    Hey there. How are these preforming for you on mobile? I'm finding that the fixed setting isn't working.

  • @michou53123
    @michou5312322 күн бұрын

    I love all your ideas and videos and copy a lot of it. But there is one thing that always happen no matter which wp version I used or which pictures - as soon as I fix the background this picture will be distorted and the left and the right side gets cropped. Tried the font thing and instead of 10 letters and a margin I got six of them in giant size. What am I missing?

  • @jamiewp

    @jamiewp

    22 күн бұрын

    Have you tried setting the aspect ratio?

  • @michou53123

    @michou53123

    22 күн бұрын

    @@jamiewp I kept the original but also tried the other options - it made no difference to the distortiont. But right now it seems my installation is completely out of order. Will have to cry and yell and work tonight - yay :D

  • @gaganjotsingh2579
    @gaganjotsingh25794 ай бұрын

    ❤❤❤

  • @jamiewp

    @jamiewp

    4 ай бұрын

    🙏

  • @gaganjotsingh2579

    @gaganjotsingh2579

    4 ай бұрын

    @@jamiewp sir please create some videos related to woocommerce with block themes

  • @jamiewp

    @jamiewp

    4 ай бұрын

    @@gaganjotsingh2579 Yes planning as we speak

  • @vaughanprint
    @vaughanprint5 ай бұрын

    Excellent… But, is there any CSS we can add to remove the cheesy Andrew Loyd Weber backing track? 😮 Seriously though, many useful design concepts here.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks (i was going for a Harry Potter vibe in the first effect)

  • @vaughanprint

    @vaughanprint

    5 ай бұрын

    @@jamiewp Ah yes Harry Potter effect... in that case somebody needs to create CSS for more volume. I'm sure some wizard will come up with it eventually.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    @@vaughanprint 😅

  • @VaibhavShewale
    @VaibhavShewale5 ай бұрын

    so, can we do in elementor?

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Probably but this method doesn’t require any plugins 👍

  • @dodatroda
    @dodatroda5 ай бұрын

    Gutenberg? Do you mean the Block Editor?

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Yup 👍

  • @user-tl8ho8bh7w
    @user-tl8ho8bh7w5 ай бұрын

    I have a question for you, I would be very happy if you answer, Thank you in advance, what is the difference between group block and column block? and what are their equivalents as css code? *** I have a question for you, I would be very happy if you answer it, Thank you in advance, what is the difference between a group block and a column block?Dec. and what are their equivalents as css code?

  • @ChristianPeper
    @ChristianPeper4 ай бұрын

    💻

  • @opusprime6
    @opusprime627 күн бұрын

    Scroll snap!! Love that one... thanks Jamie.

  • @jamiewp

    @jamiewp

    25 күн бұрын

    Yup it's cool 😎

  • @maxziebell4013
    @maxziebell40135 ай бұрын

    Me: uninstalling GSAP 😊 … no seriously great!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thank you Max - spread the word 🙏

  • @gazrobbo
    @gazrobbo5 ай бұрын

    I worry about the size of your cats, with all these "likes"

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Gary 👍

  • @techtipsuk
    @techtipsuk5 ай бұрын

    Bet it’s not so beautiful on mobile.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Yup check the end of the video 👍

Келесі