Looking for a way to add TikTok Elementor feeds to your site?
As a popular page builder, Elementor makes it easy to create beautiful sites without coding. But if you want to make your site more engaging, you can display TikTok videos on your site.
But manually embedding TikTok feeds in Elementor can be tough — especially if you’re not used to coding.
The solution? We’ll show you the easiest way of embedding TikTok feeds on your website.
Before that, let’s see how TikTok Elementor feeds can help your business.
Or you can click here and skip directly to the tutorial.
Why Display Elementor TikTok Feeds?
Elementor is a popular website builder plugin that lets users create engaging sites to promote their brand online.
And if you purchase Elementor addons, you can get more features for your Elementor site. But even without premium addons, there’s an easy way to boost your site’s engagement.
You can simply embed TikTok videos on your Elementor site and keep people on your site for longer.
What’s more, showing an Elementor TikTok feed can help you:
- Boost your online following by converting your website traffic into new TikTok followers.
- Get more sales by embedding video testimonials from TikTok on your product pages.
- Showcase interesting TikTok videos on your website to boost your engagement.
- Embed fresh social media content with relevant keywords and get better SEO for your site.
As you can see, TikTok Elementor feed can be a great tool when it comes to promoting your business online.
With that out of the way, let’s look at the easiest way to embed TikTok feeds on your site.
Easiest Way to Embed Elementor TikTok Feeds
For TikTok, there are 2 ways of embedding video feeds on your Elementor site:
- Manual Way: Generate embed code for each TikTok video, tweak the code, and then insert it into your website
- Automatic Way: Get a WordPress plugin to automatically embed TikTok video feeds on your site for you
With the manual way, embedding TikTok feeds can end up being time consuming and complicated. You’re dealing with a lot of TikTok embed codes and going back and forth between different sites after all.
Plus, the videos will still retain TikTok’s official look. That means your TikTok video feeds can even clash with the design you picked for your Elementor site.
For a simpler way, you can use a social media aggregator like TikTok Feed Pro.
TikTok Feed Pro makes it easier than ever before to create, customize, and embed TikTok feeds in WordPress.
In fact, you can follow a guided flow that’ll take you through the whole process and prepare your TikTok feed in just minutes.
The best part? You can do all that with ease, even if you’re new to WordPress — no need for HTML, CSS, or any kind of code.
What’s more, all the TikTok feeds you create will automatically inherit your website’s design and look beautiful right out of the box.
On top of that, you get a visual customizer to design your TikTok feeds in detail. You even get a live preview to track all of your changes in real time.
As a bonus, the plugin has been designed to be lightweight and fast. This means you can embed as many TikTok videos as you want and your site will load as fast as ever.
With a faster website, your Elementor site can get better SEO and rank high in search engine results.
Ready to add TikTok feeds to your site? Get your copy of TikTok Feed Pro today!
Now, let’s go ahead and see how you can use the plugin to embed TikTok feeds in WordPress.
How to Embed Elementor TikTok Feed in WordPress
To embed TikTok feeds on your Elementor site, you can simply follow the step-by-step guide below.
Let’s get started!
Step 1: Download the TikTok Feed Pro Plugin
First, grab your copy of the TikTok Feed Pro plugin here before installing and activating it on your website.
Not sure how? You can just take a look at our beginner’s guide on how to install WordPress plugins.
After the plugin is ready, it’s time to move on to step 2 where you create a new TikTok feed.
Step 2: Create a New TikTok Feed
By following the plugin’s guided flow, you can create a new TikTok feed with ease.
To get started, open the TikTok Feed » All Feeds menu from your dashboard and then hit the Add New button.
Just like that, you’ll have a new TikTok feed. In the next step, you can connect it to your account and start displaying your videos.
Step 3: Connect Your TikTok Account
Ready to connect your TikTok account to your new feed.
First, click on the Add Source button to get started.
Next, you can click on the Connect with TikTok button.
Doing that will open https://www.tiktok.com/ on your web browser.
From here, you can give the plugin read-only access to your TikTok account. TikTok Feed Pro can only use this access to view your info and won’t be able to make any changes.
Just click on the Authorize button to give the access.
Now, the plugin will send you back to your website so you can confirm this account as the source for your feed.
To do that, just select the account and then click on Next.
Now, you can move on to step 4 and customize how your TikTok feed looks.
Step 4: Customize Your TikTok Video Feed
TikTok Feed Pro will then ask you to choose from different pre-built templates. Each template has a unique design and you can import it for your site instantly.
To continue, select a feed template here and click on Next.
Next, the plugin will open your feed in the visual customizer. From here, you can use the options on the left to edit your header, layout buttons, video elements, and more.
On the right, you have a real-time preview of your TikTok feed for easy and accurate customization.
To get started, you can change the feed layout using this customizer.
First, click on the Layout option on the left.
The plugin will then let you choose from 4 layouts for your feed:
- Grid: Use rows and columns to display tons of TikTok videos at once
- List: Make each video clear by displaying a single column of TikTok content
- Masonry: Keep the original proportions of your videos and show them in multiple columns
- Carousel: Make your website more interactive with a carousel slider of your videos
After you select your layout, click on Save to keep the changes.
Next, you can click on Customize to return to the main customization options again.
From here, you can set up a header that’ll appear above your TikTok feed.
Select the Header option on the left to get started.
On the top left, you can find the option to Enable or Disable a header.
Next, you can use checkboxes to show or hide different parts of your header:
- Profile Picture
- Name
- Username
- Description
- Stats
- Button
After you’re happy with your header, click on Save to continue.
You can even customize each of these header elements in detail from here.
For this tutorial, we’ll go ahead and customize the Profie Picture element.
From there, you can set the Size of your profile picture using the option at the top.
You can even set the margins and padding to change how the picture is positioned.
Finally, click on Save once you’re happy with how your profile picture looks.
As you can see, TikTok Feed Pro makes it super easy to customize how your video feeds look. Using the remaining options, you can set your button design, video elements, filters, and more.
After that, remember to click on Save to confirm your changes.
Finally, you can embed the TikTok video feed on your Elementor site in the next step.
Step 5: Add TikTok Feed to Elementor
Finally, you can go ahead and embed this TikTok feed on your Elementor site. And the best part is that you can do this directly from the visual customizer.
You can hit the Embed button at the top to get started.
Doing that opens a popup with all the ways to embed TikTok feeds on your site. You can add your TikTok videos to a page, sidebar, footer, or copy the shortcode.
For now, you can click on Copy to continue.
Next, you can create an Elementor page to show your TikTok video feed.
First, open the Pages » Add New menu from your dashboard, and then click on Edit with Elementor.
Want to show TikTok videos on a post instead? The plugin has you covered.
Just open the Posts » Add New menu instead. There, you can click on the Edit with Elementor button.
After that, you’ll see your page or post open in the Elementor editor.
On the left, you can find the various Elementor widgets that you can use to add new content. And on the right, you can find a live preview of your page or post.
Now, use the search bar on the top left to look for the “shortcode” widget.
Just like that, you’ll be able to see the Shortcode widget in the search results below.
You can then use drag-and-drop to place the Shortcode widget into your Elementor page or post.
Doing that will open the options for the shortcode widget on the left.
There, look for the Enter your shortcode field and then simply paste your shortcode from earlier.
All you have to do now is click on Publish and your TikTok feed will be online for everyone to see.
As you can see, this plugin lets you embed Elementor TikTok feeds free of hassle. You can just open this Elementor page or post to see how your TikTok videos look.
And there you have it!
Just like that, you can embed TikTok video feeds on your WordPress Elementor website. With TikTok Feed Pro, you’ll have an easy time and it requires absolutely no coding at all.
All it takes is a few simple clicks and you can start engaging your visitors, boosting your TikTok following, and growing your business.
Ready to embed TikTok feeds? Get TikTok Feed Pro for your site today!
Want more social media content on your Elementor site? Check out our guide on how to embed social feed widgets on your website.
Found this helpful? You can follow us on Twitter and Facebook for more social media marketing tips and tricks.
