[TUTORIAL] Using Isotope and MixItUp plugins with Webflow

Community resources Webflow Tips
1

**UPDATE:**

Since the MixitUp released a new version of their plugin MixitUp3 I started a new series of the tutorials. Please, check up a new tutorial on http://mixitup-webflow-tutorial.webflow.io

________________________________________________________________

Here is step-by-step tutorial how to use jQuery filtering plugins with Webflow.

For look it “from inside” go here Isotope and MixItUp with Webflow - Webflow

Site has not only examples, but text of tutorials.

Thanks to @Mogeek, who made it first and helped me find out, that all custom jQuery code should be added in the Footer part.

Use your mind and Webflow for rule the world :wink:

Regards,
Anna.

UPDATE:

For use with CMS, see new tutorial (link found in last post of this thread).

15 Likes
2

Awesome job @Sabanna! Thanks for putting these together for everybody :wink:

1 Like
3

:blush: Glad I can help.
I am planning to put there one more plugin. Just need some brake. All this code stuff blow my mind lol :smiley:

4

Awesome thanks, very helpful :grinning:

1 Like
5

Always welcome :innocent: Just drop of jQuerry which make Webflow even more powerful :wink:

6

@sabanna can you tell me what I am doing wrong with this Isotope test. I followed your tutorial but for some reason the sort will not work for me.

7

Hello @Aksaunders,
this plugin works only on published site and will not do anything in Webflow preview mode.

If it doesn’t work on published site, then I will need a link to that too.

Regards,
Anna

8

@sabanna the published site can be seen here. Thanks for taking a look. I’m probably missing something obvious.

9

Could you please tell me where to add the custom css for the last step? Do I add it right to the page setting underneath the script that I added?

Also, I notice that there is a little message at the bottom of the Before body tag
Its says "custom code is not validated incorect code may cause this page to not render properly. I am wondering if I did something wrong or if that is just a caution message?

1 Like
10

Thank you so much @sabanna :smile:

1 Like
11

Yes, you can add CSS code in the custom code area of the page, where will be this filtering.

It is warning, it means that you are responsible for code you put there, Webflow will not fix mistakes automatically.

Good luck with using this plugins, feel free to ask if you will need a help.

Cheers,
Anna

12

You are welcome :smiley: Glad if it will be useful.

1 Like
13

Hey @sabanna, the mixitup demo isn’t working for me, Isotope is.
On both Safari and Chrome.

Edit: Seems to be working now.
Thanks for the tutorial!

14

Glad you figured it out. You are welcome.

15

Hi @sabanna !
Thank you for this great tutorial.
Would you have an ideas for using isotope or Mixitup within the CMS?

16

Hi @dam, I will try and let you know if it works the same with dynamic items :slight_smile:

1 Like
17

Hi @sabanna,
I followed your tutorial and got great results with regular divs, but I would like to use this with dynamic items. However, when I assign a class to one item div, it assigns it to all. That, of course, prevents assigning any filtering class.

Have you figured out a way to make this work with dymamic content?

Thanks for your help!
Cheryl

18

Hello Cheryl (@ctotty),
Unfortunately no, I didn’t. With structure that we have in Webflow CMS I hink there will be needed some changes in jQuerry code :confused:

19

Okay. Thanks! I appreciate all the good info you post here. :slight_smile:

1 Like
20

For those, who tried this tutorial and wasn’t able to make it work, I want to apologize. :pensive:

Tonight I found couple mistakes in tutorial text, which would mess up everything if you followed tutorial word by word, thanks @webdes.

Mistakes fixed, tutorial updated.

Regards,
Anna