How to Use Kadence Blocks Lottie Animations in WordPress [New Kadence Blocks Tutorial]
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- In this video, you will learn how to use the Lottie Animation Block in Kadence to add some personality and engagement opportunities to your website designs. The Lottie Animation Block is the latest Block addition to the Kadence Blocks Plugin and is available in the Free and Pro versions of Kadence Blocks. This in-depth tutorial will cover 4 awesome ways to use the Lottie Animation Block to enhance your website built with WordPress and Kadence. Enjoy!
Timestamps:
0:00 How to Use Lottie Animations in WordPress With Kadence
00:56 Overview of Lottie Animations Use Cases
3:42 How to Install Kadence Theme, Kadence Blocks, Kadence Starter Templates
7:51 Kadence Lottie Animation Block Options & Settings
13:40 How to use the Lottie Animation Block on a Contact Page
22:23 How to use the Lottie Animation Block on a Thank You Page
31:29 How to create an Animated Button Trigger with the Lottie Animation Block
39:23 How to Create a Modal Popup
47:49 How to link a Popup to the Animated Button
56:49 How to create a custom 404 page with Lottie Animation
1:03:39 Conclusion & Thank you!
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Kadence Theme Pro Addon - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Domain & Hosting by Siteground: cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #kadence #kadencepro #kadencetutorials #Lottie Animations
![🔥[NEW TUTORIAL] How to Create Pricing Tables in WordPress with Kadence Blocks🔥](http://i.ytimg.com/vi/nGQMfAChHe0/mqdefault.jpg)
![🔥[NEW TUTORIAL] How to Create Pricing Tables in WordPress with Kadence Blocks🔥](/img/tr.png)
You have the best content on Kadence, thank you so much!
You're very welcome! Thank you!
Awesome tutorial 😊
Thank you very much. This channel is awesome and it definitely will grow bigger and bigger just keep going this informative content.
Thank you! I appreciate you watching!
Very useful video. Thank you Clifton! Waiting for more videos with Kadence Theme + Kadence Blocks.
Love your videos, Clifton!
Glad you like them! Thank you!
thank you so much, i learned a lots from you 🎉
Thank you very much! I appreciate you watching!
Great to see back. Going to check what you've got for us, Thanks again,
Thank you!
Thanks for the How-to Tutorial, Clifton Well Done!
Thank you Peter!
Thanks a lot. Your tutorial was very interesting. I will apply all I learned. Thanks
Thank you very much!!!
Thank you!
You are very welcome Robin!
Beautiful man with a beautiful voice ❤.
Thank you so much!
Great video Clifton thank you. Great voice for narrating! Very easy to listen to and follow.
Thank you so much Paul! I appreciate you watching!
Thank you so much Clifton.
You make everything so simple and easy to follow and show reasons why and how you do something. You give in-depth explanations to concepts; show how to make corrections and necessary adjustments to items, and makes it so easy for one to replicate exactly what you have done.
Oh man, you teaching is great!
Thank you so much for today’s lesson. You are a gem, very unique!
Finished with today’s lesson and I’m going over and over your previous videos to reinforce what you have taught already.
It’s worth the time and effort. Thanks!
Thank you so much Charlie! So happy to hear that you are able to replicate what I teach. It is the greatest compliment. Thank you and I appreciate you watching my videos!
@@CliftonWP Thanks Brother. You are a great and wonderful teacher.
Fantastic work, as always Clifton! I haven’t watched the iThemes training on this topic yet and now I don’t need to. I’d rather watch your video. 👍
Thank you David! Enjoy the video!
That's a cool feature
Thank you very much Clifton. You make everything very simple and that's a great advantage in you. But I have a question: Will this affect the speed of the site?
Thank you! Lottie files are extremely lightweight and will not impact the speed of your site any more than a well-optimized image would. They are actually smaller than JPG and PNGs. Overall the speed impact will be non-existent.
Hi, I am loving your videos. They are well put together, I wanted to ask you have you done a video on just creating a Blog Site from start to finish. I looked for another way to contact you but could not find anything, so I will wait to see if you get back to me thanks in advance.
Could you please make a video about, Drop Shadow under bottom row of Sticky Header in Kadence? I tried some Additional CSS code but not working.
What screen recording and video editing tool do you use. Looks great
Thank you Joie! I use camtasia for everything. 🙂
Hi. Thanks for the great video! Was wondering how you were able to enter negative margin values. I don't seem to have that option. Only a slider and choices of "XXS, XS, Small, etc".
Thank you Jeffrey, In the same area were you have the clamp values (XS, S, SM, etc) this is a toggle that allows you to enter custom values. Toggle it on and you will be able to enter negative margins. I hope that helps!
@@CliftonWP Yes that works. Thank you!
hello, how to add order detail on thankyou page?and set the customized page as thankyou page? bro
Hi Clifton, when you offer clients use of your unlimited kadence block key, do you stipulate that you're not responsible if, for example, Kadence goes bust and or ceases operations for whatever reason?
Thanks Daniel. Great question. My contracts have indemnification clauses that deal with this, however my only responsibility is that at the time of delivery of the project that I have delivered a fully functioning and viable website. Future issues, regardless of the issue will require billing for a new project.
I tried this, but all the links in my footer is no longer clickable because it has been overlaid on top by the row of the fixed elements. Do you have to set Z index ?
Where have you been Clifton?
No video??
Hey Clifton!
Iam stuck doing my website do you by any chance have a mail i can contact you own.
Good content keep it up
I hope you can answear as fast as possible.
Just followed all steps but lottie does not appears, i put a kadence icon and it shows. I cant see what i am missing
Thank you Siso, do you have a link I can see?
I'm sorry off topic, but I'm having a whale of a time resolving a Header issue. I want the text on the left and Hamburger menu on the right to line up with edges of the Slider below it. When I set the correct padding for the Tablet the padding for the phone is no good and visa versa. I cannot find a way to set them separately in the Customizer. Kadence Theme Pro Kadence Blocks Pro... Ive tried Tech support and they haven't come up with a solution
Thanks, Tom, is there a way I can visually see what you are describing? Do you have a link you can share? 🙂
@@CliftonWP …is there a way to privately share it ?
@@tomfraser3086 email me at clifton@cliftonwp.com
@@CliftonWP ....Ten thousand thank you's I've sent you an email
@@tomfraser3086 You are welcome! Received and replied. 🙂
Clifton, please we are missing you. It's two months now and can't bear it any more. I know it takes time to put things together, but please try. Missing you greatly.
Thank you Charlie, I know it's been sometime 🙂, I promise it will be worth it. I'm working on some good tutorials for you. Thank you for your patience and I appreciate you!!!!
@@CliftonWP Thanks for the promise and assurance. I will patiently wait. Thank you for responding.
dear ，miss your new video
Thanks Robin🙂I'm working on some videos. I'l be releasing some within the next few days. Thanks for your patience my friend!
@@CliftonWP Miss you too
We Need Kadence FSE
Thank you Kai! Can you elaborate on what you mean by Kadence FSE?
Kadence Full Site Editing I guess.. I think he's asking for a complete website tutorial about Gutenberg FSE with Kadence theme.
Hello Clifton is there any chance I could contact you.
Hey clifton sent you an email hope you can answear it as fast as possible.
Hey!
I really need to contact you do you have any email i can contact you on.