Published on 08/02/2021
Help Article Plugins
Erica Manning
Leiout Developer

This article explains how to use the JavaScript library, Isotope. I will demonstrate using a menu plugin example. This library allows you to have multiple tabs or categories.


First, since we are using a plugin for this example, we need to add it to our page. Then we will add the HTML for the template/slide and wrapper. In this example, you need to create three templates for the three categories we are using. (Hint: It makes it easier when you name them).

Template/ Slide

Next, you can add the file, 'isotope.pkgd.min.js', which can be found here, to the files part of the plugin. After this, you can add the following code to the JS section of the plugin. 


You can also add CSS however you please. I will show the CSS code I added to this example below. 


Working Example

Lottie Animations

26, Feb 2023
Help Article
Navik Mega Menu

This article explains how to create and use the mega menu functionality in Leiout navigation menus.

20, Sep 2021
Help Article Design
Google Translate

This article explains how to install and use Google's translate javascript library and implement a b...

20, Sep 2021
Help Article
Mix Blend Mode

This help article explains the CSS mix-blend-mode property and how to incorporate it with hero image...

06, Aug 2021
Help Article Design