Gallery Element

Create beautiful video galleries with playlist or slider layouts that sync with Vimeo folders.

Free Feature

The Gallery element is available in the free version of Vimeify. The Slider layout is a Pro feature.

Overview

The Gallery element allows you to create curated video collections with two layout options: Playlist (free) and Slider (Pro). Galleries can be manually curated or automatically sync with Vimeo folders.

Key Features:

Two gallery types: Selection and Folder Sync
Two display styles: Playlist (free) and Slider (Pro)
Automatic folder synchronization
Manual video selection
Responsive layouts
Available in all builders

Gallery Types

Selection Gallery

Manually curated video collections with full control over selection and order.

Features:

Choose specific videos
Control display order
Mix videos from different folders
Static (doesn't auto-update)

Best For:

Featured video collections
Curated playlists
Specific topic collections
Landing page showcases

Folder Sync Gallery

Automatically syncs with a Vimeo folder, keeping content up-to-date.

Features:

Auto-syncs every 10 minutes
Videos update automatically
Order matches Vimeo folder
Always current content

Best For:

Dynamic content collections
Auto-updating video libraries
Client video portals
Continuously updated content

Display Styles

Playlist Style (Free)

Vertical layout with main player and video list sidebar.

Features:

Large main player
Thumbnail list with titles
Click to play different video
Scrollable video list
Shows video duration

Best For:

Course modules
Tutorial series
Video documentation
Sequential content

Slider Style (Pro)

Horizontal carousel with navigation arrows and dots.

Features:

Autoplay option
Navigation arrows
Pagination dots
Swipe support
Transition effects

Best For:

Homepage highlights
Portfolio showcases
Featured content
Visual presentations

Block Editor (Gutenberg)

Adding a Gallery Block

Edit your page or post
Click (+) to add a new block
Search for "Vimeify Gallery"
Click to add the block
Click Select Gallery in the sidebar
Choose your gallery from the list
Select display style (Playlist or Slider)
Customize settings
Publish or update your page

Block Settings

Content Settings:

Gallery Selection: Choose from existing galleries
Display Style: Playlist or Slider (Pro)
Autoplay: Auto-play first video
Loop: Restart after last video

Playlist Settings (when using Playlist style):

Thumbnail position (left/right)
Thumbnail size
Show/hide titles
Show/hide duration

Slider Settings (when using Slider style - Pro):

Autoplay slider
Transition speed
Show/hide navigation arrows
Show/hide pagination dots
Slides per view
Slide spacing

Styling:

Gallery width and alignment
Custom CSS classes
Spacing options

Shortcode

Use the gallery shortcode to display galleries anywhere.

Basic Usage

[vimeify_gallery id="123"]

Available Parameters

Parameter	Description	Default	Example
`id`	Gallery ID (required)	-	`id="123"`
`style`	Display style	playlist	`style="slider"`
`autoplay`	Auto-play videos	false	`autoplay="true"`
`loop`	Loop playback	false	`loop="true"`
`arrows`	Show nav arrows (slider)	true	`arrows="false"`
`dots`	Show pagination (slider)	true	`dots="false"`
`speed`	Transition speed (slider)	300	`speed="500"`

Examples

Simple Playlist:

[vimeify_gallery id="123"]

Slider Gallery (Pro):

[vimeify_gallery id="123" style="slider" arrows="true" dots="true"]

Autoplay Playlist:

[vimeify_gallery id="123" style="playlist" autoplay="true"]

Auto-Advancing Slider (Pro):

[vimeify_gallery id="123" style="slider" autoplay="true" speed="500"]

Elementor Widget

Open Elementor editor
Search for "Vimeify Gallery" in widgets panel
Drag widget to your section
Select gallery from dropdown
Choose display style
Customize settings in Content tab
Style in Style tab
Update to publish

Content Tab

Gallery Selection:

Choose gallery from dropdown
Preview selected gallery
Gallery information

Display Settings:

Style: Playlist or Slider (Pro)
Autoplay: Auto-play first video
Loop: Continuous playback

Playlist Options (Playlist style):

Thumbnail position
Thumbnail size
Show/hide video titles
Show/hide duration

Slider Options (Slider style - Pro):

Autoplay slider
Autoplay speed
Transition speed
Navigation arrows
Pagination dots
Slides per view

Style Tab

Gallery Container:

Background and spacing
Border and radius
Shadow effects

Video Items:

Item spacing
Thumbnail styling
Hover effects

Navigation (Slider):

Arrow style and color
Arrow size and position
Hover states

Pagination Dots (Slider):

Dot size and color
Active dot style
Spacing and position

Player (Playlist):

Main player styling
Thumbnail list styling
Active video highlight

Advanced Tab

Layout:

Custom CSS ID/classes
Z-index control

Responsive:

Device-specific settings
Hide on devices

Bricks Builder

Adding a Gallery Element

Open Bricks builder
Click (+) to add element
Search for "Vimeify Gallery"
Add element to canvas
Select gallery
Choose display style
Style using Bricks controls
Save page

Element Settings

Content Tab

Gallery Configuration:

Select gallery
Choose display style (Playlist/Slider)
Configure playback options

Playlist Settings:

Thumbnail layout
Show/hide elements
Active state styling

Slider Settings (Pro):

Autoplay configuration
Navigation options
Transition settings

Style Tab

Use Bricks styling for:

Gallery Container:

Layout and spacing
Background and borders
Shadow and effects

Playlist Layout (Playlist style):

Player area styling
Thumbnail list styling
Active video highlight
Scroll behavior

Slider Layout (Slider style - Pro):

Slide styling
Navigation styling
Pagination styling
Transition effects

Advanced Tab

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

Creating Galleries

Creating a Selection Gallery

Navigate to Vimeify → Galleries
Click Add New
Enter gallery title
Select Gallery Type: Selection Gallery
Click Add Videos button
Select videos from library
Drag to reorder videos
Click Publish

Creating a Folder Sync Gallery

Navigate to Vimeify → Galleries
Click Add New
Enter gallery title
Select Gallery Type: Folder Sync Gallery
Choose Vimeo folder from dropdown
Set sync options
Click Publish

Sync Notes:

Syncs every 10 minutes automatically
Videos added to folder appear in gallery
Videos removed from folder disappear from gallery
Order matches Vimeo folder order

Responsive Design

Galleries automatically adapt to different screen sizes:

Playlist Style:

Desktop: Side-by-side player and list
Tablet: Optimized column widths
Mobile: Stacked layout

Slider Style (Pro):

Desktop: Full-width slides
Tablet: Adjusted slide size
Mobile: Single slide view

Best Practices:

Test on multiple devices
Adjust thumbnail sizes for mobile
Consider hiding navigation on small screens
Use appropriate slide counts

Performance Tips

For Large Galleries:

Limit gallery size (10-30 videos recommended)
Use lazy loading for thumbnails
Enable caching
Consider pagination for very large collections

For Folder Sync Galleries:

Organize Vimeo folders efficiently
Limit folder size for performance
Use specific folders, not account-wide

Styling Tips

Custom Playlist Styling

Style the playlist layout.

CSS Example:

css

.vimeify-gallery-playlist {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.vimeify-playlist-item.active {
    background: #f0f7ff;
    border-left: 3px solid #2271b1;
}

Custom Slider Styling (Pro)

Style slider navigation and dots.

CSS Example:

css

.vimeify-slider-arrow {
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 15px;
}

.vimeify-slider-dot.active {
    background: #2271b1;
    width: 12px;
}

Upgrading to Pro for Slider

Want the Slider layout? Upgrade to Vimeify Pro:

✅ 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
Grid Element - Show videos in grid layouts (Pro)
Video Management - Organize your videos
Galleries Feature Guide - More about galleries

Gallery Element

Overview

Gallery Types

Selection Gallery

Folder Sync Gallery

Display Styles

Playlist Style (Free)

Slider Style (Pro)

Block Editor (Gutenberg)

Adding a Gallery Block

Block Settings

Shortcode

Basic Usage

Available Parameters

Examples

Elementor Widget

Adding a Gallery Widget

Widget Settings

Content Tab

Style Tab

Advanced Tab

Bricks Builder

Adding a Gallery Element

Element Settings

Content Tab

Style Tab

Advanced Tab

Creating Galleries

Creating a Selection Gallery

Creating a Folder Sync Gallery

Responsive Design

Performance Tips

Styling Tips

Custom Playlist Styling

Custom Slider Styling (Pro)

Upgrading to Pro for Slider

Next Steps

Gallery Element ​

Overview ​

Gallery Types ​

Selection Gallery ​

Folder Sync Gallery ​

Display Styles ​

Playlist Style (Free) ​

Slider Style (Pro) ​

Block Editor (Gutenberg) ​

Adding a Gallery Block ​

Block Settings ​

Shortcode ​

Basic Usage ​

Available Parameters ​

Examples ​

Elementor Widget ​

Adding a Gallery Widget ​

Widget Settings ​

Content Tab ​

Style Tab ​

Advanced Tab ​

Bricks Builder ​

Adding a Gallery Element ​

Element Settings ​

Content Tab ​

Style Tab ​

Advanced Tab ​

Creating Galleries ​

Creating a Selection Gallery ​

Creating a Folder Sync Gallery ​

Responsive Design ​

Performance Tips ​

Styling Tips ​

Custom Playlist Styling ​

Custom Slider Styling (Pro) ​

Upgrading to Pro for Slider ​

Next Steps ​

Gallery Element

Overview

Gallery Types

Selection Gallery

Folder Sync Gallery

Display Styles

Playlist Style (Free)

Slider Style (Pro)

Block Editor (Gutenberg)

Adding a Gallery Block

Block Settings

Shortcode

Basic Usage

Available Parameters

Examples

Elementor Widget

Adding a Gallery Widget

Widget Settings

Content Tab

Style Tab

Advanced Tab

Bricks Builder

Adding a Gallery Element

Element Settings

Content Tab

Style Tab

Advanced Tab

Creating Galleries

Creating a Selection Gallery

Creating a Folder Sync Gallery

Responsive Design

Performance Tips

Styling Tips

Custom Playlist Styling

Custom Slider Styling (Pro)

Upgrading to Pro for Slider

Next Steps