Intro to Interactions - Bricks interactions and animations tutorial | WordPress Tutorial
HTML-код
- Опубликовано: 13 июн 2024
- Interactions, available since Bricks 1.6, let you bind certain user or browser events (e.g. click, mouse hover, content loaded, etc.) to trigger specific actions like show/hide an element or popup, add/remove/toggle CSS classes or HTML attributes, start animations, load more query loop results, etc.
Join this channel to get access to perks:
/ @designwithcracka
Bricks Builder | WordPress | Tutorial
#wordpress #bricksbuilder #bricks
FACEBOOK GROUP: / designwithcracka
FOLLOW ON TWITTER: / udoroessien
GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS
geary.co/inner-circle/ref/1/
GET AUTOMATIC.CSS - A time saving utility class for WordPress websites
automaticcss.com/ref/37/
--------------------------------------------------------------
GET MOTION.PAGE - Interact & animate any WordPress site
motion.page/go/dwc/
--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder
recoda.me/workspace-store?via...
--------------------------------------------------------------
GET YABE WEBFONT - Custom fonts management and self-host Google Fonts with seamless WordPress page builders integration
webfont.yabe.land/?ref=11
--------------------------------------------------------------
Get Breakdance - A record breaking visual builder for WordPress
breakdance.com/ref/50/
--------------------------------------------------------------
GET 20% OFF HOSTING PLAN FROM HOSTINGER
hostinger.com/?referralcode=1...
DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================
BOOK A 1-HOUR CONSULATION
calendly.com/designwithcracka...
=============================================
HIRE ME: udoroessien@gmail.com
=============================================
The best int-tutorial, thanks a lot man keep doing this excelent tutorials
thank you, I can say this is the best tutorial to learn Interactions in bricks builder
As much likes as you like dear Cracka.!
After watching 10 of your videos back to back ...I say THANK YOU.!!
Im an old school designer (code only..) and I will buy this editor just because you show as all those features and tricks.!!
Ive tried Pinegrow but it was a little cluncky.. this one seems to be is waaay better.!
Holy crap you just saved me so much time and frustration with your little trick at 26:33. I always forget to create classes before styling anything at all, especially for layout stuff like grids 😅😅. THANK YOU
Bricks needs to have a "Copy Interaction" feature.
Needs a copy condition too
@@dave1790 good point, I wonder, is this already on the ideaboard or should we suggest it.
If you assign interactions to classes, there shouldn't be a need to.
Really nice, now I understand Bricks Interactions. Thank you 😊
Greta tutorial however i always get so frustrated when i get to a section where a paid pluggin etc is needed. It would be super helpful to show a breakdown on how to do it manually at some stages :)
a little bit hard for a newbi, but i can copy the codes completely and get the same result, that's good enough. Thanks for your great job! Salute
Hi thank you, i missed these kind of tutorials
[SOLVED] I chose as CSS selector body and that works!
Hi Cracka, this is such a great tutorial. Cant wait to learn more about interactions in general. One thing, I am creating an interaction that changes the font. Instead of giving a class to all the fonts I want to change (which are all 😅), is there a possibility to change the body font-family? Or how would I approach that?
Thank you, I was really waiting for this video, you make very good videos, I can't stop watching them.
Thank you!
I can definitely see where "complex" interactions will require some thought to get everything working properly.
Loved it. Want more of these :)
Great work. Videos are so valuable!
Excellent work, thanks!
Thank you so much Cracka. 🎉
love this animation
Really good interesting tutorial Cracka really enjoyed recreating that.
Thank You!
the best
thank you, amazing
Loved this... keep them coming. Also could Join soon
Thanks!! ❤
Wow, thank you
Wooow, awesome!!!!
Thank you so much! You are a Crack - a 💪🏼
Udoro, I'm building version of this, but I'm swapping background images on the section and not just changing the background color in the section. I've got the background images swapping just fine, but I cannot figure out or find a way to make the fade transitions happen with background images in the section's background when I hover the boxes in my grid. Do you know of a way I can create fade transitions on background images in the section rather than colors?
now you have new types of actions like start animation can you explain that
Really intersting video from start to finish. My question is: How would you make interaction work inside a query loop ?
Targeting data attributes is the best way for now.
Nice turorial. Is there a way you can hook this up with woocommerce such that the "Grab it now" button sends the right product to the back end depending on the color chosen?
I believe with the right code, it's possible. But not with Interactions only.
Hi Cracka, around 33.18 you have chosen the 'value' by colour ie Blue, Orange ,Green. What if you want to use a hex colour or if you use ACSS and want to choose say a 10% transparent colour from the Primary - how would you do this, please?
Damn, should have watched the video for a further 30 seconds - answered!
Keep up with the great work
👍
Nice! Is there a way to disable animation image only for mobile for example ? I do not see any responsive option in the interaction panel from Bricks :/
Bricks Interaction doesn’t have responsive settings.
u would add conditionals.. which is in the bricks menu, same row as the interactions button.
I personally would make this a template, then duplicate it, this allows you to have a template for mobile and one for screens.. with their own independent settings. This way it's modular and you can tweak one without affecting the other, should you want to make adjustments.. especially in the future.
Great work, only not working ...don't know why?
So is Bricks your favorite 2023 page builder bro?
I have no favorites, but I like Bricks, too.
Did you ever do the Login video?
nope... will try to do that as soon as I can
How come you didn’t create a modifier class for the different background colors, instead of using id levels?
Modifier class weren't necessary in this case, and I didn't use id level, the colors were applied to the class and data attribute selectors (which acts as a modifier in this case). It's also okay to apply to id levels as long as you're not using the same component more than once on the website.
Coming from Elementor, which one would you guys recommend Bricks, Breakdance or Oxygen?
Bricks 👍
@@odinaka_joshuaThanks for the reply, why is that?
@@jhonnatanr I think is more powerful. Im using bricks since last 6 months and Im very happy. Also it have LTD :)
@@esquedm I appreciate the reply, I agree with the LTD. I think I’ll go with bricks also but I can’t find the scroll animation option, I might be missing it or might have to use CSS.
@@jhonnatanr do you mean the element animation when enter in viewport? Bricks handle this in the way of "Interactions": a powerful way of infinite possibilities (animate on scroll included)
I tried your link to the inner circle before the weekend but it did not work with paypal. i got an error message. It works directly from the main site, so there is possibly something wrong with the setup with paypal. Just in case you have not found out already.
(You make very good videos so I thoght I would support as I assume it is an affiliate link).
Thanks I'll check it out. Much appreciated!
Big image should also be as img, background image is semantically incorrect
Background images are not semantically incorrect if you’re not using it as a semantic element. There are already three images there which are sufficient for semantic purpose, the large image is just for preview.
Is it possible to make it in Oxygen?
Oxygen doesn’t have Interactions. Except via JavaScript.
I'm not a fan of putting custom css in those different css panels vs simply creating a single external stylesheet.. but good tutorial.
External Stylesheet is the most ideal I would agree. But I write them there first to avoid going back and forth, then move the CSS to external stylesheet.
It’s me or it’s 1000 times simpler to do this in Breakdance ?