Intro to Interactions - Bricks interactions and animations tutorial | WordPress Tutorial

[@1anchit]

Made it quite quick! I normally take an hour to make these hero sections :P

[@pankam7800]

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.!

[@amrfarrouh]

thank you, I can say this is the best tutorial to learn Interactions in bricks builder

[@grasshopperweb]

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

[@lionelchow1971]

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

[@lunaccodesign]

Great explanations. I'm in the newest and super css is enabled (not sure if that matters at all) but I couldn't get this to work with the data at all. I'd see it being added and it still wouldn't apply the color. But I did it fine with classes instead. Little note about copying interactions if you're using BEM or any naming convention what I do is create the interaction and test all on class level, then duplicate the block and clone the class and rename to the 2nd position, remove the 1st, and just make the little name changes. This is also great if that interaction would be repeated elsewhere on the website and you can re-use. Or again grab that class and clone to repurpose.

[@estaciondediseno]

The best int-tutorial, thanks a lot man keep doing this excelent tutorials

[@philipplunch8526]

Really nice, now I understand Bricks Interactions. Thank you 😊

[@odinaka_joshua]

Bricks needs to have a "Copy Interaction" feature.

[@dave1790]

Needs a copy condition too

[@odinaka_joshua]

@@dave1790 good point, I wonder, is this already on the ideaboard or should we suggest it.

[@AutomaticCSS]

If you assign interactions to classes, there shouldn't be a need to.

[@mehdimoradi603]

Hi thank you, i missed these kind of tutorials

[@victor.design]

Thank you, I was really waiting for this video, you make very good videos, I can't stop watching them.

[@DesignwithCracka]

Thank you!

[@PhilippBremer]

[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?

[@Justin-Bamforth]

Really good interesting tutorial Cracka really enjoyed recreating that.

[@kirstylouise2354]

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 :)

[@davidwalls2304]

I can definitely see where "complex" interactions will require some thought to get everything working properly.

[@zdenekholy2634]

Thank you Cracka ... great video & very helpfull. THANK YOU

[@rubengarciajr]

love this animation

[@hosseinkhanmohammadi4770]

Thank you so much Cracka. 🎉

[@emmanuelkuebutornye9584]

Loved it. Want more of these :)

[@YasienSarlie]

Loved this... keep them coming. Also could Join soon

[@visualmodo]

Excellent work, thanks!

[@jasonmichael7800]

Great work. Videos are so valuable!

[@mazhar_khan_786]

Thank You!

[@LudovicCharlier]

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 :/

[@DesignwithCracka]

Bricks Interaction doesn’t have responsive settings.

[@BGdev305]

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.

[@cabolove89]

the best thank you, amazing

[@5andermail]

Wow, thank you

[@ei5705]

Thanks!! ❤

[@NicolasHeinen]

Really intersting video from start to finish. My question is: How would you make interaction work inside a query loop ?

[@DesignwithCracka]

Targeting data attributes is the best way for now.

[@stewtech]

Did you ever do the Login video?

[@DesignwithCracka]

nope... will try to do that as soon as I can

[@DjLITO]

Wooow, awesome!!!!

[@SamiWithS]

now you have new types of actions like start animation can you explain that

[@raygringo]

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?

[@jhonnatanr]

Coming from Elementor, which one would you guys recommend Bricks, Breakdance or Oxygen?

[@odinaka_joshua]

Bricks 👍

[@jhonnatanr]

@@odinaka_joshuaThanks for the reply, why is that?

[@esquedm]

@@jhonnatanr I think is more powerful. Im using bricks since last 6 months and Im very happy. Also it have LTD :)

[@jhonnatanr]

@@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.

[@esquedm]

@@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)

[@mafiasalesman]

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?

[@DesignwithCracka]

I believe with the right code, it's possible. But not with Interactions only.

[@filmgenius2]

How come you didn’t create a modifier class for the different background colors, instead of using id levels?

[@DesignwithCracka]

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.

[@thewebstylist]

So is Bricks your favorite 2023 page builder bro?

[@DesignwithCracka]

I have no favorites, but I like Bricks, too.

[@Sebasweb_]

Thank you so much! You are a Crack - a 💪🏼

[@ViewMeUK]

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?

[@ViewMeUK]

Damn, should have watched the video for a further 30 seconds - answered! Keep up with the great work 👍

[@kristapsvilcans]

Is it possible to make it in Oxygen?

[@DesignwithCracka]

Oxygen doesn’t have Interactions. Except via JavaScript.

[@felipelinssen]

Great work, only not working ...don't know why?

[@rodgeirbr1695]

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).

[@DesignwithCracka]

Thanks I'll check it out. Much appreciated!

[@malikqatagan8977]

Big image should also be as img, background image is semantically incorrect

[@DesignwithCracka]

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.

[@BGdev305]

I'm not a fan of putting custom css in those different css panels vs simply creating a single external stylesheet.. but good tutorial.

[@DesignwithCracka]

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.

[@carlosp.1846]

It’s me or it’s 1000 times simpler to do this in Breakdance ?