Effect 04 Isotope
An Isotope-powered grid with group filter navigation and "load more on scroll/click", plus per-breakpoint column counts. Ideal for portfolios, product grids and image walls with lots of content.
Live Demo
Visit the official demo page to see it in action.
Data Fields
| Field | Description |
|---|---|
| Title | Item title |
| Description | Rich text summary (shown on hover or in the lightbox) |
| Featured Image | Item image |
| Link | Target URL |
| Group | Filter category — the front end builds filter buttons from groups |
Item form (Field Manager) screenshot:
Effect Settings
Loading & paging
| Parameter | Description |
|---|---|
| First Screen Number | Items loaded initially (default 6) |
| Load Display Number | Items appended per "load more" (default 3) |
| Loaded Data | On Scroll (auto-load) or On Click (button) |
| Scroll Show Max Page | Max pages for scroll loading (default 3) |
Responsive columns
| Parameter | Description |
|---|---|
| Large Desktop / Desktop / Small Desktop / Tablet / Mobile / Small Mobile Items | Items per row per breakpoint (default 6/5/4/3/2/1) |
| Item Spacing | Spacing between items in pixels |
Filter navigation
| Parameter | Description |
|---|---|
| Display group | Show the group filter bar |
| Default Filter | Group selected by default |
| Display All / All Text | Show the "All" button and its label (default All) |
| Filter Font Color / Accent Color | Filter text color and active accent (default #3b9cf7) |
Load more button
| Parameter | Description |
|---|---|
| More Text | Button label (default MORE) |
| More Bg Color / Hover Bg Color | Button background and hover color |
Title / Description / Effect / Border / Other
| Parameter | Description |
|---|---|
| Same as Carousel | Text, hover icons, border and background parameters match Effect 03 Carousel |
Related
- Effect Options — configure this effect's theme and parameters
- Effect Overview — all effects
- Adding Items — add items for this effect
- All Items — manage items