BEST METHOD (Elementor Pro – Recommended)
🔹 Step 1: Add a Section
- Add a full-width section
- Content width:
1200–1300px - Background color: light beige / off-white (like the example)
🔹 Step 2: Add Heading
Add a Heading widget:
From HubSpot’s video library
- Alignment: Center
- Font: Serif or elegant (Playfair Display / Georgia style)
- Margin bottom: 40–60px
🔹 Step 3: Add Media Carousel
Add Media Carousel widget (Elementor Pro)
Settings:
- Skin: Default
- Slides to show:
3 - Slides to scroll:
1 - Image size: Large
- Aspect ratio: 16:9
- Space between: 20–30px
🔹 Step 4: Add Video + Thumbnail
For each slide:
- Media Type: Video
- Source: YouTube / Vimeo / Self-hosted
- Upload custom thumbnail image
- Enable:
- Overlay
- Play icon
This matches HubSpot’s style.
🔹 Step 5: Add Video Meta (Title + Time)
Below the carousel, use custom HTML inside each slide OR use this trick 👇
Option A (Simple):
- Put title text inside thumbnail image
- Or add text below using caption
Option B (Professional – Recommended):
Use Loop Item (Elementor Pro):
- Video thumbnail
- Title
- Duration (⏱ 10 min watch)
- Date
Step 6: Navigation Styling
Carousel Settings → Navigation
- Arrows: Show
- Position: Outside
- Size: Large
- Color: Black or dark gray
- Dots: Show (bottom center)
This matches the uploaded UI.
