Overview #
The TikTok Videos widget lets you showcase your TikTok content on any WordPress page built with Elementor. Display video thumbnails in a responsive slider or gallery grid, with automatic thumbnail fetching from TikTok and one-click bulk import to your media library for faster loading.
Getting Started #
- Open any page in Elementor Editor
- Search for “TikTok Videos” in the widget panel (under the PistonUI category)
- Drag the widget onto your page
- Add your TikTok video URLs in the TikTok Video List section
- Click “Import All TikTok Images” to download thumbnails to your media library
- Save the page
Layout Settings #
Display Mode #
Choose how your TikTok videos are displayed:
| Option | Description |
|---|---|
| Slider | Horizontal carousel powered by Owl Carousel. Supports autoplay, navigation arrows, dots, and responsive item counts. |
| Gallery Grid | CSS Grid layout with configurable columns and gap. Ideal for a static portfolio-style display. |
Gallery Grid Options #
(Visible when Display Mode is set to Gallery)
- Gallery Columns — Number of columns per row (1–8). Responsive controls for desktop, tablet, and mobile.
- Gallery Gap — Spacing between grid items (0–50px).
Slider Options #
(Visible when Display Mode is set to Slider)
| Setting | Description | Default |
|---|---|---|
| Show Navigation Arrows | Toggle left/right arrow buttons | On |
| Show Dots | Toggle pagination dots below the slider | Off |
| Autoplay | Automatically cycle through slides | On |
| Autoplay Speed | Time between slides in milliseconds (500–10,000) | 3000ms |
| Infinite Loop | Continuously loop through slides | On |
| Slider Gap | Space between slider items (0–50px) | 10px |
Responsive Items (Slider) #
Control how many items are visible at each breakpoint:
| Breakpoint | Label | Default |
|---|---|---|
| < 576px | Items (Mobile) | 1 |
| 576–767px | Items (Tablet Portrait) | 2 |
| 768–991px | Items (Tablet Landscape) | 3 |
| ≥ 992px | Items (Desktop) | 6 |
Shared Options #
- Item Height — Set a uniform height for all items (100–800px or 10–100vh). Images are cropped with
object-fit: coverto maintain aspect ratio. Default: 350px. - Image Size — Choose the WordPress image size used for thumbnails. Smaller sizes load faster.
| Size | Resolution | Best For |
|---|---|---|
| Thumbnail | 150×150 | Small grids, fast loading |
| Medium | 300×300 | Compact layouts |
| Medium Large | 768px wide | Most use cases (default) |
| Large | 1024px wide | Large displays |
| Full Size | Original upload | Maximum quality |
TikTok Video List #
Adding Videos #
Each item in the repeater has two fields:
- Thumbnail (optional) — Upload a custom image from your media library. This takes highest priority.
- TikTok URL — The full TikTok video URL (e.g.,
https://www.tiktok.com/@username/video/1234567890).
Thumbnail Priority #
The widget uses a smart fallback system for thumbnails:
- User-uploaded thumbnail — Manually uploaded image via the media control (highest priority)
- Imported image — Thumbnail imported via the bulk import button
- TikTok API — Automatically fetched from TikTok’s oEmbed API (slowest, used as fallback)
Bulk Import TikTok Images #
Instead of relying on the TikTok API for thumbnails on every page load (which is slow), you can import all thumbnails directly into your WordPress media library:
- Add your TikTok URLs to the repeater
- Click “Import All TikTok Images” at the top of the Video List section
- A progress bar shows the import status for each video
- Once complete, click “Save Now” to save the imported thumbnails
- Thumbnails are now served from your own server — much faster!
Tip: Imported images are stored in your WordPress Media Library with the alt text “TikTok Video Thumbnail”. You can find and manage them there at any time.
Style Tab #
Item Style #
- Border Radius — Round the corners of each video card. Supports px and %. Default: 10px (all corners).
- Hover Effect — Choose an animation when users hover over a video card:
- None — No effect
- Scale Up — Subtle zoom-in effect (default)
- Brighten — Increases brightness
- Shadow — Adds a drop shadow
Navigation Style #
(Visible when Slider mode + Navigation Arrows are enabled)
- Arrow Color — Color of the SVG chevron icons inside the navigation buttons. Default:
#ffffff. - Arrow Background — Background color of the circular navigation buttons. Default:
rgba(0,0,0,0.5). - Arrow Size — Diameter of the navigation buttons (20–60px). The icon scales proportionally. Default: 40px.
