Explore Elementor TikTok Feed widget by Premium Addons for WordPress sites in this tutorial. With video previews, auto-play options, and easy access to account info, follow, and share buttons, this widget opens exciting possibilities. Whether you’re an experienced developer or new to WordPress, learn how to seamlessly integrate TikTok feeds into your site.

Excited to see Elementor TikTok Feed widget in action? Visit our Demo Page to experience the dynamic integration firsthand.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Premium Addons Pro is required for:
  • Filter by ID and Exclude by ID.
  • Load More Button.
  • Pro Skins.
  • Autoplay First Video and Autoplay On Hover.
  • Profile Header.
• Make sure that this widget is enabled so you can find it in the Elementor editor.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Elementor TikTok Feed Settings

Start by dragging & dropping TikTok Feed widget into your Elementor editor.

Key Features

• Access Credentials.
• Query.
• General Settings.
• Feed Settings.
• Video Settings.
• Profile Header.
• Carousel.

Access Credentials

You need to log in to your TikTok account first to have the access token to give the needed permission to the plugin to preview your pins and boards.

• Access Credentials: Log in to your TikTok account.
• Refresh Cached Data Once Every: Select the duration to refresh the feed cached data.

Query

Please note that Filter By ID and Exclude By ID option requires Premium Addons PRO installed and activated on your website.

• Scheme: You may select between Dark/Light scheme.
• Videos: Enable videos to show your TikTok videos.
  • Filter By ID.
  • Order By Date.
  • Exclude IDs.

General Settings

Please note that Load More Button option requires Premium Addons PRO installed and activated on your website.

• Layout: You may select between Grid or Masonry layout.
• Number of Columns: You may select the number of columns from 1 to 6 columns.
• Video Per Page: Set the number of videos per page.
• Loading Animation: Select the animation between Slide Up, Slide Down, Slide Left, or Slide Right.
• Spacing: Set the spacing between your TikTok videos.
• Load More Button: Enable the load more button.
• Videos On Load More: Set the number of videos on load.
• Load More Text: Add load more button text.

Feed Settings

Please note that Banner and On Slide options require Premium Addons PRO installed and activated on your website.

• Skin: You may select the skin of the feed between either Card, Banner, or Slide.
• TikTok Icon: Enable to show TikTok icon on the videos.
• Icon Size: Set TikTok icon size.
• Username: Enable to show your username.
• Description: Enable to show video description.
• Description Length (Word): You may set the number of words for the video description.
• PostFix: Select the read more option for the video description between dots or links.
• Date: Enable to show the video publish date.
• Like Count: Enable to show the video’s like count.
• Comments Count: Enable to show the video’s comment count.
• View Count: Enable to show the video’s view count.
• Share Button: Enable to show share button

Video Settings

Please note that Autoplay First Video and Autoplay On Hover options require Premium Addons PRO installed and activated on your website.

• Video Height: Set the height of your videos.
• Object Fit: Set the object fit to be default, Fill, Cover, or Contain.
• Autoplay All Videos: Enable to auto play all your visible videos.
• Mute Videos: Enable to mute all your videos.
• Loop Videos: Enable to loop videos playing.
• On Click: Select the on click action between redirect to TikTok, play video, or lightbox.

Profile Header

Please note that Profile Header option requires Premium Addons PRO installed and activated on your website.

• Profile Header: Enable to show your TikTok profile info as a header of the widget.
• Avatar: Enable to show your TikTok profile picture.
• Username: Enable to show the follow button.
• Verify Icon: Enable to shows the verified icon only if the account is verified.
• Follow Button: Enable to show the follow button.
• Icon Size: Set the icon size on the follow button.
• Spacing: Set the spacing between the icon and the text on the follow button.
• Biography: Enable to show the account Bio.
• Following Count: Enable to show your following count.
• Follower Count: Enable to show your follower count.
• Likes Count: Enable to show likes count.
• Display Options
  • Display: Set the display to be inline or block.
  • Biography Alignment: Set the biography text alignment.
  • Biography Order: Set the biography order to be before or after the count.

Carousel

• Enable Carousel.
• Auto Play: enable to auto-play the photos as in the carousel.
• Slides To Scroll: Set how many slides to show in one scroll.
• Transition Speed: Set the speed of the carousel animation in milliseconds (ms).
• Center Mode: Enables a centered view for one of the slides with partial next/previous slides.
  • Slides’ Spacing: set a spacing value in pixels [when Center Mode is enabled], so you can set how much partial view from the next/previous slides should appear.
• Navigation Dots: Enable the navigation dots for the carousel.
• Navigation Arrows: Enable the navigation arrows for the carousel.
• Arrows Position: Set the arrows’ position in pixels or em.

Style

• Video Style.
• Feed Info.
• Feed Box.
• Carousel Arrows.
• Profile Header.
• Feeds Container.

Video Style

• CSS Filters: You can also customize video style further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation, and Hue.
• Hover CSS Filters: You can also customize the video further by selecting one of the available hover filters: Blur, Brightness, Contrast, Saturation, and Hue.
• Box Shadow: Set a shadow for the video and adjust its settings.
• Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor TikTok Feed video.
• Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok Feed video.

Feed Info

• Username
  • Typography: Adjust font settings.
  • Color: Select the text color for the username.
  • Margin: Creates a space around the username in Elementor TikTok Feed Widget, outside of any defined borders.
• Date
  • Typography: Adjust font settings.
  • Color: Select the date color for the date.
  • Username/Date Margin: Creates a space around username and date in Elementor TikTok Feed Widget, outside of any defined borders.
• Description
  • Typography: Adjust description font settings.
  • Color: Select the description color for the description.
  • Margin: Creates a space around the description in Elementor TikTok Feed Widget, outside of any defined borders.
  • Padding: Creates space around the description in Elementor TikTok Feed Widget, inside of any defined borders.
• TikTok Icon
  • Color: Select the color for the TikTok icon.
  • Background Color: Select the TikTok icon background color.
  • Border Radius: Insert border-radius values.
  • Margin: Creates a space around TikTok icon in Elementor TikTok Feed Widget, outside of any defined borders.
  • Padding: Creates space around TikTok icon in Elementor TikTok Feed Widget, inside of any defined borders.
• Counters
  • Typography: Adjust counters font settings.
  • Icon Size: Set the counter icon size.
  • Color: Select the counters’ font color.
  • Icon Color: Select the color for the counters icon.
  • Text Shadow: Set the text-shadow type for the counters.
  • Background Type: Pick the background for Elementor TikTok Feed counters.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor TikTok Feed counters.
  • Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok feed box.
  • Padding: Creates space inside Elementor TikTok Feed counters.
  • Margin: Creates a space around Elementor TikTok Feed counters, outside of any defined borders.
  • Spacing: Set the spacings between counters.
  • Icon Spacing: Set the spacing between the counters’ icon and the numbers.

Feed Box

• Box Shadow: Set a shadow for the feed box and adjust its settings.
• Background Type: Pick the background for Elementor TikTok feed box.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor TikTok feed box.
• Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok feed box.
• Padding: Creates space inside Elementor TikTok feed box.

Lightbox

• Background Color: Pick a background color for the lightbox background.
• Close Icon Color: Set close icon color.
• Close Icon Hover Color: Pick a color for the close icon color on hover.

Profile Header

• Username
  • Typography: Adjust font settings.
  • Color: Select the Profile header’s username color.
• Profile Picture
  • Size: Set the size of the profile picture.
  • Box Shadow: Add a shadow around the container. Select the color and the following settings:
    • Horizontal Position.
    • Vertical Position.
    • Blur.
    • Spread.
    • Position: Outline or Inset.
  • Background Type: Pick the background for Elementor TikTok profile header.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor TikTok profile picture.
  • Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok profile picture.
  • Padding: Creates space inside Elementor TikTok profile picture.

• Follow Button
  • Typography: Adjust font settings.
  • Box Shadow: Set a shadow for the follow button and adjust its settings.
  • Background Type: Pick the background for Elementor TikTok follow button.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor TikTok follow button.
  • Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok feed box.
  • Padding: Creates space inside Elementor TikTok feed box.
• Biography
  • Typography: Adjust font settings.
  • Color: Select the description color for the follow button.
  • Margin: Creates a space around the description in Elementor TikTok Feed Widget follow button, outside of any defined borders.

• Counters
  • Typography: Adjust font settings.
  • Color: Select counters color.
  • Background Type: Pick the background for Elementor TikTok Feed profile header counters.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Select from different border types, as well as the color and width of the border on each side of Elementor TTikTok Feed profile header counters.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor TikTok Feed profile header counters.
  • Inner Spacing: Add Inner spacing of counters.
  • Margin: Creates a space around the counters in Elementor TikTok Feed profile header counter, outside of any defined borders.
  • Padding: Creates space around the counters in Elementor TikTok Feed profile header counter, inside of any defined borders.
• Container
  • Box Shadow: Set a shadow for the container and adjust its settings.
  • Background Type: Pick the background for Elementor TikTok Feed profile header container.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set the background using gradient colors.
  • Color: Set background color.
  • Image: Upload an image or select one from the media library.
  • Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor TikTok Feed profile header container.
  • Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok Feed profile header container.
  • Margin: Creates a space around the description in Elementor TikTok Feed profile header container, outside of any defined borders.
  • Padding: Creates space inside Elementor TikTok Feed profile header container.

Carousel Arrows

• Color: set the color of carousel arrow icons.
• Size: set the size of arrow icons for different devices. So, you can set a specific size for each screen view (Desktop, Tablet, and Mobile).
• Background Color: Select Elementor TikTok Feed carousel arrows’ background color.
• Border Radius: Insert border-radius values.
• Padding: Creates space around TikTok Feed carousel arrows in Elementor TikTok Feed Widget, inside of any defined borders.

Share Button

• Icon Size: Set the counter icon size.
• Typography: Adjust counters font settings.
• Background Color: Set the share button background color.
• Icon Spacing: Set the spacing between the counters’ icon and the numbers.
• Icon Color: Select the color for the share button icon on both Normal and Hover states.
• Text Color: Set the text color for the share button on both Normal and Hover states.
• Border Type: Select from different border types, as well as the color and width of the border on each side of Elementor TikTok Feed share button.
• Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok share button.
• Margin: Creates a space around Elementor TikTok Feed share button, outside of any defined borders.
• Padding: Creates space inside Elementor TikTok Feed share button.

Share Links

• Menu Background Color: Set the share link background color.
• Typography: Adjust share link font settings.
• Icon Size: Set the share link icon size.
• Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok share links.
• Icon Spacing: Set the spacing between the share link icon and the numbers.
• Vertical Spacing: Set the vertical spacing of the share link.
• Text Color: Set the text color for the share link on both Normal and Hover states.

Feed Container

• Box Shadow: Set a shadow for the feed container and adjust its settings.
• Background Type: Pick the background for Elementor TikTok feed container.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor TikTok feed container.
• Border Radius: Increasing the border radius will add circular corners to the Elementor TikTok feed container.
• Padding: Creates space inside Elementor TikTok feed container.
• Margin: Creates a space around the description in Elementor TikTok Feed Widget feed container, outside of any defined borders

Conclusion

In conclusion, Elementor TikTok Feed widget by Premium Addons is for WordPress websites. Seamlessly integrating TikTok content, it adds a dynamic edge and visual appeal. With real-time updates and customization options, it keeps your site engaging and on-trend. Embrace the widget to effortlessly fuse the viral power of TikTok with your site’s personality, giving your online presence a fresh and captivating boost. Elevate your website with the Elementor TikTok Feed widget and harness the full potential of social media synergy.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.