Streaming live at 10am (PST)

[TUTORIAL] Using Isotope and MixItUp plugins with Webflow


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

http://filtering-plugins.webflow.io

For look it “from inside” go here https://webflow.com/website/Isotope-and-MixItUp-with-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).


CSS/CMS Content Filter
Portfolio With Sorting Fuction
Is it possible to filter results live as a CMS feature?
Members community gallery dynamic filtering question
Show content based on filter / keyword tag user clicks on
Property search in a website
Problem with MixItUp plugin
Isotope Filter + Webflow CMS - HELP?
Isotope Search & Filter + Webflow CMS
Adding Custom Attributes to Webflow CMS List Items
Setting CMS item to filter to text on page
Changing Collection List Item Class Independantly
Search form in portfolio web site
CMS - Change background image based on collection term
Search functionality available?
Need help implementing a site search with collection items
Visible/Clickable Filter Switch
#2

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


#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


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


#10

Thank you so much @sabanna :smile:


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


#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 :smile:


#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. :smile:


#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