- learnwithstudiohart.com/course/foundations
Design Foundations
Examples
Still images first, players on request.
Each example uses one of the three layouts. Thumbnails, titles, and durations are sample content.
- northfieldcoffee.co.uk/watch
Watch & brew
[ Layout: Grid ] [ Columns, Large: 3 ] [ Sources: YouTube, Vimeo ]
Example 01
A grid of brand films
Four tiles, each a still image with a play button, title, and duration you enter. Nothing heavier loads until a visitor picks one.
- makersummit.org/2026/talks
Maker Summit 2026 talks
[ Layout: Thumbnail slider ] [ Sources: YouTube, Vimeo, self-hosted ] [ Custom thumbnails ]
Example 02
A single scrolling row
The thumbnail slider keeps a talk series to one tidy line. The partly hidden tile at the edge tells visitors there is more to scroll.
Example 03
What loads when the page opens
The same six videos, two ways. A standard embed creates a full player for each one straight away. Video Gallery shows a still image and waits.
Standard embeds
6 video players loaded on page open
Video Gallery
0 players loaded until play
[ Privacy first ]
YouTube videos play from youtube-nocookie.com. If Avada’s privacy consent is switched on for your site, embeds stay blocked until the visitor accepts it. Only one video plays at a time anywhere on the page.
See it working on a real Avada site.
What you can build
Video-heavy pages that still open quickly.
Module 2: Avada Builder basics
Course and tutorial libraries
Put a whole module of lessons on one page in a grid. Learners scan the titles and durations, and only the lesson they choose starts loading.
A brand film with a thumbnail strip
Feature one main video at the top of a product or brand page, with shorter clips lined up beneath it in the slider.
Webinar replays and talk series
A playlist keeps past sessions in order beside the main player, each labeled with its running time so viewers can plan.
Features
What comes with it.
Click to play
Each video is a still thumbnail until clicked. No player loads before that.
YouTube, Vimeo, self-hosted
Mix all three sources in the same gallery.
Privacy-enhanced YouTube
Uses the no-cookie domain and respects Avada privacy consent.
One video at a time
Starting a video stops any other video playing on the page.
Thumbnails three ways
Automatic for YouTube, cached for Vimeo, or your own image for any video.
Title and duration badge
Each video shows its title and a duration you type in.
Grid or slider
A grid of 2 to 6 columns per screen size, or one scrollable row.
Playlist layout
Main player with an up-next list left or right, previous and next, and a mobile stack or collapsible bar.
Styling controls
Title color with hover, title overlay, play button, and navigation arrows.
Works the Avada way
One parent element, one child per video.
Paste a link or pick a file for each video, then choose the layout once for the set.
[ ]
Avada Builder
Add one video item per video. URL and title accept Avada Dynamic Data.
[ ]
Conditional rendering
Show the gallery only to the visitors Avada’s logic conditions allow.
[ ]
Avada Live
Swap between grid, slider, and playlist and see the result on the page.
[ ]
Live option updates
Typography, overlay, arrows, and margins and padding per breakpoint update as you edit.
FAQ
Video Gallery questions
Related elements
Fancy Filterable Gallery
Photos sorted by category
Filter buttons, grid or masonry, and a lightbox for the images on screen.
Fancy Image Scroller
Full-length screenshots in motion
A fixed frame that scrolls through a tall or wide image on hover or in view.
Fancy PDF Viewer
Documents that stay on the page
Brochures and manuals in an embedded viewer that works the same on every device.