Twitter Feed Widget Tutorial

Intro

Elementor Twitter feed widget gives you the ability to embed Twitter feed into your page through Elementor Page Builder. This widget is a part of Premium Addons PRO.

Twitter is one of the major social media networks with many influential people and organizations use it as a way to communicate, and share their ideas and opinions on a wide variety of topics, from science to humor, from politics to entertainment. You can find that almost every major organization is using Twitter, so using the Elementor Twitter Feed Widget can be a good way to share these tweets from Twitter into your pages seamlessly. As Elementor Twitter Feed widget automates most of the process for you, allowing you to provide a better insight on any specific topic with minimum effort.

Elementor Twitter Feed Widget Video Tutorial

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Elementor Twitter Feed Widget
Elementor Twitter Feed Widget

Click here to check Premium Twitter Feed Widget demo.

Key Features

Content

  • Access Credentials
  • Accounts
  • Layout
  • Profile Header
  • Tweets Settings
  • Carousel

1. Access Credentials

First, you will need to create an app on Twitter for Developers to get the Consumer Key & Consumer Secret Key required to retrieve feed from the Twitter platform.

Elementor Twitter Feed Access Credentials
Twitter Feed Widget for Elementor Access Credentials [Consumer Key, Consumer Secret Key]

2. Accounts

  • Accounts: You can retrieve tweets from more than one account, you just have to get the name of the account and write it with the following sign [@] at the beginning, for instance, @BarackObama, or @leap13themes.
  • Hashtags: You can specify which hashtags to get tweets from, you just need to write the name of the hashtag plus [#] the hash sign, for instance, #Elementor, #WordPress, #Photoshop, etc.
Premium Twitter Feed for Elementor Account
Elementor Twitter Feed Widget Accounts Settings in Elementor [ Accounts, Hashtags ]
Elementor Twitter Feed Widget Layout
Photoshop Account ID Represented Using Elementor Twitter Feed Widget

3. Layout

  • Style: Select the layout style that will be used to display the tweets. There are two available styles: List style, and Grid style.
  • Equal Height: Enable this option to make all tweets boxes take the same height.
  • Tweets/Row: Select how many tweets per row.
  • Direction: Allows you to set the direction for thumbnail, and other tweets info about the authors from Left to Right (LTR), or Right to Left (RTL).
  • Content Alignment: Adjust alignment for tweets content to be displayed Left, Center, Right, or Justified.
Twitter Feed Widget for Elementor Layout Settings
Twitter Feed Widget for Elementor Layout Settings

4. Profile Header

  • Enable Profile Header: Enable/disable profile header.
  • Show Cover Photo: Show/hide the header photo for twitter accounts.
  • Height: Set the height for header photo.
  • Show Author Details: Show/hide author name, username and profile picture.
  • Display: Display author details in inline or block.
  • Show User Data: Show/hide user data tweets, following and followers count.
  • Show Follow Button: Show/hide follow button for this user.
  • Vertical Alignment: Align twitter follow button vertically: top, middle and bottom.
Twitter Feed Widget for Elementor Profile Header Settings
Twitter Feed Widget for Elementor Profile Header Settings

4. Tweets Settings

  • Tweets/Account: Set how many tweets will be shown for each account, the default is 2.
  • Tweet length: Set how many characters of tweets text to show (default is 150 characters).
  • Show tweet media: Enable/disable displaying media (videos and images).
  • Show Avatar: Show or hide the author’s avatar (thumbnail image).
  • Show Profile Name: Show or hide the author’s name.
  • Show Date: Show or hide the date the shows when the tweets were published.
  • Show Feed Content: Show or hide tweets content.
  • Show Read More Button: Show or hide the read more button on tweets.
  • Show Twitter Icon: Show or hide Twitter icon on the tweets.
  • Show Tweet Information: Show or hide tweets information: comment, retweets and likes count.
Premium Elementor Twitter Feed Advanced Settings
Showing Twitter Feed Widget’s Advanced Settings
Elementor Twitter Feed Widget Settings Tab
Advanced Settings Demo [2] of Elementor Twitter Feed

5. Carousel

  • Carousel: Enable/disable showing twitter feed in a carousel. You will be able to control the following option if the Carousel is enabled.
    • Autoplay: Enable/disable the autoplay of tweets carousel.
    • Autoplay Speed: Set the autoplay speed.
    • Arrow Position: Adjust the position of carousel arrows.
Twitter Feed for Elementor Carousel Options
Twitter Feed Carousel Settings [Carousel, AutoPlay, Autoplay Speed, Arrows Position]

Style

  • Header Profile Picture
  • Author Header
  • User Data
  • Follow Button
  • Header Container
  • Tweet Box
  • Content
  • Avatar
  • Twitter Icon
  • Author
  • Date
  • Tweet Information
  • Carousel
  • Container

1. Header Profile Picture

  • Size: Set the size of profile picture.
  • Border Type: Set a border type for header profile picture in Twitter Feed Elementor Widget. Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove
  • Width: Set border width.
  • Color: Choose a color for your border.
  • Border Radius: Set Border Radius for header profile picture using pixels (PX), percentage(%), or em(EM). Higher border-radius means a more circular border.
  • Box Shadow: Set shadow for header profile picture. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin: Creates space around the header profile picture, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
Header Profile Style in Elementor Twitter Widget
Header Profile Style in Elementor Twitter Widget

2. Author Header

  • Name Typography: Set the font style for Twitter account name.
    • Font Family: Select a font family.
    • Size: Set font size.
    • Weight: Select font-weight.
    • Transform: Select the font transform.
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set font line-height.
    • Letter-Spacing: Set font letter-spacing.
  • Username Typography: Set the font style for Twitter account username.
    • Font Family: Select a font family.
    • Size: Set font size.
    • Weight: Select font-weight.
    • Transform: Select the font transform.
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set font line-height.
    • Letter-Spacing: Set font letter-spacing.
  • Name Color: Pick a color for Twitter account name in normal and on hover mode.
  • Username Color: Pick a color for Twitter account username in normal and on hover mode.
  • Space Between Names: Set the spaces between Twitter account name and username.
  • Margin: Creates space around author header in Pixel (px), Em (em), or Percentage (%).
Author Header Style in Elementor Twitter Widget
Author Header Style in Elementor Twitter Widget

3. User Data

  • Typography: Set the font style for user data.
    • Font Family: Select a font family.
    • Size: Set font size.
    • Weight: Select font-weight.
    • Transform: Select the font transform.
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set font line-height.
    • Letter-Spacing: Set font letter-spacing.
  • Text Color: Pick a color for user data text.
  • Count Color: Set a color for user data numbers.
  • Space Between Data: Set space between user data.
  • Margin: Creates space around author user data in Pixel (px), Em (em), or Percentage (%).
User Data Style in Elementor Twitter Widget
User Data Style in Elementor Twitter Widget

4. Follow Button

  • Typography: Set the font style for follow button text.
    • Font Family: Select a font family.
    • Size: Set font size.
    • Weight: Select font-weight.
    • Transform: Select the font transform.
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set font line-height.
    • Letter-Spacing: Set font letter-spacing.
  • Text Color: Pick a color for follow button text in normal and on mouse hover.
  • Background Color: Pick a color for follow button background in normal and on mouse hover.
  • Box Shadow: Set box shadow for Twitter follow button. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Border Type: Set a border type for follow button in Twitter Feed Elementor Widget. Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove.
  • Width: Set border width.
  • Color: Choose a color for the border.
  • Border Radius: Set Border Radius for follow button using pixels (PX), percentage(%), or em(EM). Higher border-radius means a more circular border.
  • Margin: Creates space around the follow button, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around the follow button, inside of any defined margins and/or borders. You can set Tweet Box Padding in Pixel (px), Em (em), or Percentage (%).
Follow Button Style in Elementor Twitter Widget
Follow Button Style in Elementor Twitter Widget

5. Header Container

  • Background Color: Pick a color for Twitter header container background.
  • Border Type: Set a border type for Twitter header container in Twitter Feed Elementor Widget. Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove.
  • Width: Set border width.
  • Color: Choose a color for the border.
  • Border Radius: Set Border Radius for Twitter header container using pixels (PX), percentage(%), or em(EM). Higher border-radius means a more circular border.
  • Margin: Creates space around the Twitter header container, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around the Twitter header container, inside of any defined margins and/or borders. You can set Tweet Box Padding in Pixel (px), Em (em), or Percentage (%).
Header Container Style in Elementor Twitter Widget
Header Container Style in Elementor Twitter Widget

6. Tweet Box

  • Background: Select a background color for Tweet Box.
  • Border Type: Set a border type for Tweet Box in Twitter Feed Elementor Widget. Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove.
  • Width: Set border width.
  • Color: Choose a color for your border.
  • Border Radius: Set Border Radius for Tweet Box using pixels (PX), percentage(%), or em(EM). Higher border-radius means a more circular border.
  • Box Shadow: Set box shadow for Twitter Feed box container. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin: Creates space around the Tweet Box, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around the Tweet Box, inside of any defined margins and/or borders. You can set Tweet Box Padding in Pixel (px), Em (em), or Percentage (%) Note* Padding does not accept negative values.

Same Exact Settings are in Both Normal and Hover in Tweet Box.

Elementor Twitter Feed Tweet Box Options
Twitter Feed Widget For Elementor, Tweet Box Styling Options [Normal, Hover]

7. Content

  • Typography: Set the font style for Twitter Feed content.
    • Font Family: Select a font family.
    • Size: Set font size.
    • Weight: Select font-weight.
    • Transform: Select the font transform.
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set font line-height.
    • Letter-Spacing: Set font letter-spacing.
  • Text Color: Set color for the Tweets content in Elementor Twitter Feed Widget.
  • Links Color: Set color for the links inside tweets in Elementor Twitter Feed Widget.
  • Links Hover Color: Set color when hover on links inside tweets in Elementor Twitter Feed Widget.
  • Margin
Read More Link
  • Color: Set a color for the Read More link.
  • Hover Color: Set a hover color for the Read More link.
  • Typography
  • Margin
  • Padding
Premium Twitter Feed For Elementor Readmore Option
Twitter Feed Widget for Elementor, Content Styling Options

8. Avatar

  • Size: Adjust the Avatar size of twitter thumbnails.
  • Border Type
    • Width
    • Color
  • Border Radius
  • Margin
Twitter Feed Widget For Elementor Avatar Options
Avatar Styling Settings in Elementor Twitter Feed Widget

9. Twitter Icon

  • Color
  • Size
  • Margin
Premium Twitter Feed Icon Options
Twitter Icon Styling Options Included in Twitter Feed Widget for Elementor
Elementor Premium Twitter Feed Widget Options
Twitter Icon Styling Demo [Color: Shade of Cyan, Size: 25px]

10. Author

  • Color
  • Hover Color
  • Typography
  • Margin
Author Options for Elementor Twitter Feed Widget
Author Settings in Twitter Feed Widget for Elementor

11. Date

  • Color
  • Typography
  • Margin
Twitter Feed For Elementor Date Options
Twitter Feed Widget, Date Styling Settings

12. Tweet Information

  • Color: Pick a color for tweet information: comments, retweets and likes.
  • Hover Color: Set on hover color on tweet information.
  • Typography: Set the font style for tweet information.
    • Font Family: Select a font family.
    • Size: Set font size.
    • Weight: Select font-weight.
    • Transform: Select the font transform.
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set font line-height.
    • Letter-Spacing: Set font letter-spacing.
  • Size: Set the size of tweet information in px, em and percentage.
  • Space Between Data: Set space between tweet information items.
  • Margin: Creates space around the tweets information items in Pixel (px), Em (em), or Percentage (%).
Tweet Information Style in Elementor Twitter Widget
Tweet Information Style in Elementor Twitter Widget

13. Carousel

  • Arrow Color: Set the colors for the carousel arrows.
  • Size: Set the size for the carousel arrows.
  • Background Color: Set a background color for the carousel arrows.
  • Border: Set a border for the carousel arrows.
  • Padding: Set a padding for the carousel arrows.
Elementor Twitter Feed Widget Carousel Style
Elementor Twitter Widget Carousel Style

14. Container

  • Background: Set a background color for the container.
  • Border Type
  • Border Radius
  • Box Shadow: Set box shadow for Twitter Feed box container. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin
  • Padding
Premium Twitter Feed Widget Container Styling Options
The Available Styling Options for Container Box in Premium Twitter Feed fo Elementor

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.