Grid Element (Pro)

Display videos in beautiful masonry or standard grid layouts with filtering and search capabilities.

Pro Feature

The Grid element requires Vimeify Pro. Get Pro →

Overview

The Grid element allows you to showcase videos in responsive grid layouts with advanced filtering, search, and sorting options. Perfect for portfolios, video libraries, and content hubs.

Key Features:

• Masonry and standard grid layouts
• Category/tag filtering
• Search functionality
• Load more & pagination
• Responsive columns
• Available in all builders (Gutenberg, Elementor, Bricks)

Block Editor (Gutenberg)

Adding a Grid Block

1. Edit your page or post
2. Click (+) to add a new block
3. Search for "Vimeify Grid"
4. Click to add the block
5. Configure grid settings in the sidebar
6. Customize layout and filters
7. Publish or update your page

Block Settings

Content Settings:

• Grid Source: All videos, category, or gallery
• Layout: Masonry or standard grid
• Columns: 2, 3, 4, or 5 columns (responsive)
• Per Page: Number of videos to show
• Order By: Date, title, or custom

Filter Options:

• Enable category filter
• Enable tag filter
• Enable search box
• Filter position (top/sidebar)

Display Options:

• Show/hide title
• Show/hide excerpt
• Show/hide duration
• Show/hide date
• Thumbnail size

Loading:

• Pagination style (load more, numbers, infinite scroll)
• Items per load

Styling:

• Grid gap/spacing
• Card styling
• Custom CSS classes

Shortcode

Use the grid shortcode to display video grids anywhere.

Basic Usage

[vimeify_videos_grid]

Available Parameters

Parameter	Description	Default	Example
layout	Grid layout type	masonry	layout="grid"
columns	Number of columns	3	columns="4"
category	Filter by category slug	-	category="tutorials"
gallery	Filter by gallery slug	-	gallery="featured"
per_page	Videos per page	12	per_page="20"
orderby	Sort field	date	orderby="title"
order	Sort direction	DESC	order="ASC"
filters	Enable filters	false	filters="true"
search	Enable search	false	search="true"
pagination	Pagination style	load_more	pagination="numbers"

Examples

Simple Grid:

[vimeify_videos_grid]

4-Column Masonry:

[vimeify_videos_grid layout="masonry" columns="4"]

With Filters and Search:

[vimeify_videos_grid filters="true" search="true"]

Category Grid:

[vimeify_videos_grid category="tutorials" columns="3" per_page="15"]

Infinite Scroll:

[vimeify_videos_grid pagination="infinite" per_page="12"]

Elementor Widget

Adding a Grid Widget

1. Open Elementor editor
2. Search for "Vimeify Grid" in widgets panel
3. Drag widget to your section
4. Configure grid settings in Content tab
5. Style the grid in Style tab
6. Update to publish

Widget Settings

Content Tab

Grid Configuration:

• Layout type (masonry/grid)
• Column count (responsive)
• Video source
• Videos per page

Filter Settings:

• Enable category filter
• Enable tag filter
• Enable search box
• Filter layout and position

Query Settings:

• Category selection
• Gallery selection
• Order by and direction
• Exclude videos

Style Tab

Grid Layout:

• Grid gap/spacing
• Column gap
• Row gap

Video Cards:

• Card background
• Card padding
• Card border/radius
• Card shadow
• Hover effects

Thumbnail:

• Aspect ratio
• Border radius
• Overlay color
• Hover overlay

Text Elements:

• Title typography
• Title color
• Excerpt typography
• Meta typography

Filters:

• Filter bar background
• Filter button styling
• Active filter state
• Search box styling

Pagination:

• Button styling
• Button hover state
• Alignment

Advanced Tab

Layout:

• Custom CSS ID/classes
• Z-index control

Motion Effects:

• Entrance animations
• Scroll effects

Responsive:

• Device-specific columns
• Hide on devices

Bricks Builder

Adding a Grid Element

1. Open Bricks builder
2. Click (+) to add element
3. Search for "Vimeify Grid"
4. Add element to canvas
5. Configure grid settings
6. Style using Bricks controls
7. Save page

Element Settings

Content Tab

Grid Setup:

• Layout type (masonry/grid)
• Responsive columns (desktop/tablet/mobile)
• Video source and filtering
• Items per page

Filter Configuration:

• Category filter options
• Tag filter options
• Search functionality
• Filter position and layout

Query Settings:

• Include/exclude categories
• Include/exclude videos
• Order and sorting

Style Tab

Use Bricks styling for:

Grid Container:

• Container width and spacing
• Background and borders
• Grid gap settings

Grid Items (Cards):

• Card layout and spacing
• Background and borders
• Shadow and effects
• Hover states

Thumbnail:

• Image ratio and sizing
• Border radius
• Overlay effects
• Play button styling

Typography:

• Title styling
• Excerpt styling
• Meta information styling
• Link colors

Filters:

• Filter bar styling
• Button design
• Active states
• Search input styling

Advanced Tab

Same options as other Bricks elements (Attributes, Conditions, Interactions, Responsive).

Grid Layouts

Masonry Layout

Masonry layout creates a Pinterest-style grid where items flow naturally based on their height.

Best For:

• Mixed aspect ratio videos
• Dynamic, organic feel
• Portfolio displays
• Visual-first presentations

Tips:

• Works best with 3-4 columns
• Let thumbnails maintain aspect ratio
• Use consistent card padding

Standard Grid

Standard grid layout creates uniform rows and columns with consistent heights.

Best For:

• Uniform video thumbnails
• Clean, organized appearance
• Professional displays
• Content-heavy layouts

Tips:

• Set consistent thumbnail aspect ratio
• Use 2-5 columns depending on screen size
• Align text elements for consistency

Filtering & Search

Category Filtering

Allow users to filter videos by category with one click.

Implementation:

• Enable category filter in settings
• Categories appear as buttons/dropdown
• Click to filter instantly
• Multiple categories selectable (optional)

Tag Filtering

Filter videos by tags for more granular organization.

Use Cases:

• Topic-based filtering
• Skill level filtering
• Feature-based filtering
• Format filtering

Search Functionality

Live search through video titles and descriptions.

Features:

• Instant search results
• Search as you type
• Highlight search terms
• No page reload

Combined Filters

Use category + tag + search together for powerful filtering.

Example:

Filter: Category: Tutorials
Filter: Tag: Advanced
Search: "WordPress"
Result: Advanced WordPress tutorials

Responsive Behavior

Grids automatically adjust columns based on screen size:

Desktop (>1200px): Full column count (3-5 columns) Tablet (768-1199px): Reduced columns (2-3 columns) Mobile (<768px): Single or double column

Custom Responsive:

Desktop: 4 columns
Tablet: 2 columns
Mobile: 1 column

Performance Optimization

Best Practices:

• Limit initial load to 12-24 videos
• Use load more or pagination
• Lazy load thumbnails
• Enable caching

Load More vs Pagination:

• Load More: Better UX, keeps context
• Pagination: Better for SEO, faster initial load
• Infinite Scroll: Best UX, may impact SEO

Styling Tips

Card Hover Effects

Add engaging hover effects to video cards.

CSS Example:

.vimeify-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

Overlay Effects

Add overlay with play button on hover.

CSS Example:

.vimeify-grid-item:hover .thumbnail-overlay {
    opacity: 1;
    background: rgba(0,0,0,0.6);
}

Filter Button Styling

Style active filter buttons.

CSS Example:

.vimeify-filter-button.active {
    background: #2271b1;
    color: white;
    font-weight: bold;
}

Pricing

Video Grids are included in all Vimeify Pro licenses:

• ✅ Single Site: $49/year
• ✅ 5-Site Pack: $99/year
• ✅ Developer: $199/year

Get Vimeify Pro →

Next Steps

• Video Element - Display single videos
• Table Element - Display videos in table format
• Gallery Element - Create video galleries
• Pro Overview - More Pro features
• Get Support - Need help?