Timeline

The Timeline in the Elementor Addon Elements is a versatile widget. It allows you to display your blog posts in a cool, organized way with different designs. You can also make it look just the way you like with various options. Plus, you can use it to show special events or information from your posts and categories. It’s a powerful way to present your content on your website.

Content

Skins

• Skin: Select from the different layout styles of the cards to display the Content in Timeline.
• Source: Select from Custom or Post. Custom lets you manually enter data of specific events. At the same time, Post allows picking content dynamically from the blogs and custom post types.

Timeline

Note: This is applicable when you select the Custom option as a Source.

Items

Content

• Date: Add information about the date or the timing of the event.
• Link: Set the URL for the button’s link. Set the link to either open in a new window or to add nofollow to the link.
• Title: Give a suitable title to be displayed on the Card
• Icon: Select the icon type like Custom Icon, Font Awesome icon, or text- select if you want to use the icon or the text to point as an icon for the Timeline card.
• Content: Provide more information about the event card in the timeline.

Media

• Choose Image: Upload an image for timeline.
• Image Resolution: Select the image resolution.

Style

Note: The following settings offer various styling options for each individual timeline style.

• Custom Card Style: Enable the option to apply the styling on custom card.
• Custom Image Style: Enable the option to apply the styling on custom image.
• Custom Icon Style: Enable the option to apply the styling on custom icon.

Query

• Source: Select from where the content will be retrieved and displayed. Options include Post, page, or Custom Post Types.

Category Filter

• Filter Mode: Include and exclude Categories accordingly.
• Categories: Select the name of the Category to be included or excluded. Multiple categories can be selected.

Tag Filters

• Filter Mode: Include and exclude Tags accordingly.
• Tags: Select the name of the tags to be included or excluded.

Format Filter

• Filter Mode: Enable to apply format filters.

Order & Limit:

• Order By: Set the order in which the posts will be displayed. Options include Date, Title, Menu Order, or Random.
• Order: DESC (descending) or ASC (ascending).
• Offest: Use this setting to skip over posts.
• PostCount: Sets the exact amount of posts displayed.

Post Element

Note: This is applicable when you select the Post option as Source.

Heading

• Show Title: Enable the option to display the title.
  • HTML Tag: Select the HTML tag for title.
  • Enable Link: Activate the option to add the link.
    • Open in New Tab: Enable the option to open the link in new tab.

Date

• Show Date: Displays the post-publishing date.
• Date Format: Select the format to display the date.

Featured Image

• Show Image: Enable displaying the post’s feature image in the timeline.

Excerpt

• Excerpt: Choose to show or hide the excerpt.
• Excerpt Length: Choose the length of the excerpt, setting the exact amount of words displayed.

Call To Action

• Call To Action: Show or hide the Read More button.
• Text: Customize the Read More text.

Global Icon

Give a default icon to all the timeline cards.

• Type: Choose the icon type like FontAwesome icon, image, or text to display.
• Icon: Select an icon from the FontAwesome library.
• View: Choose the default icon view or select Stacked or Framed.
• Shape: If Stacked or Framed is chosen, choose Circle or Square.

Style

Layout

• Alignment: Arrange the cards to the left, center, and right alignment types.
• Responsive Style: Make the Timeline layout responsive for Mobile and Tablet.
• Responsive Orientation: Set the Alignment for the responsive style like Left or Right.
• Horizontal Spacing: Set the horizontal spacing of the cards.
• Vertical Spacing: Set the vertical spacing of the cards.

Card

• Alignment: Align the content inside the card to the Left, Center, and Right
• Padding: Set the padding of the card’s content

Image

• Alignment: Align the image inside the card to Left, Center, and Right.
• Size: Set the size of the image
• Spacing: Adjust the space between the content block and the image.
• Radius: Set the roundness of the edges of the images
• Arrow Alignment: Define the alignment of the card arrows.
• Border Type: Select the border type.
• Title Color: Specify the color of the title for Normal, Hover, and Active States
• Content color: Choose the color for Normal, Hover, and Active States.
• Title Typography: Set the typography options for the Title.
• Content Typography: Set the typography options for the Content.
• Title Shadow: Add a shadow and blur to the title text.
• Content Shadow: Add a shadow and blur to the content.
• Background Color: Choose the background color of the timeline card. Normal, Hover, and Active States.
• Border Radius: Set the roundness of the border corners of the timeline cards
• Box Shadow: Set the box-shadow options around the cards.

Call To Action

• Text Color: Choose the Text color for Normal, Hover, and Focused States.
• Background Type: Set the background type for the call to action.
• Border Type: Set the Border type for the call to action.
• Border Radius: Set the roundness of the call to action border corners.
• Padding: Set the padding.
• Typography: Set the typography options for the call to action.

Date

• Padding: Set the padding of the Date text.
• Margin: Set the margin.
• Color: Specify the date color.
• Text Shadow: Add a shadow and blur to the Date text.
• Typography: Set the typography options for the Date.

Connector

• Color: Customize the color to apply for the connector.
• Progress Color: Set the preferable color to be shown when the progress moves on.
• Progress Offset: Set the offset.
• Thickness: Specify the width of the timeline line.

Icon

• Primary Color: Choose the primary color of the icon.
• Secondary Color: Choose the secondary color of the icon.
• Size: Set the size of the icon.
• Padding: Set the amount of padding around the icon.
• Rotate: Select the number of degrees to rotate the icon from 0 to 360.
• Border Style: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
• Border Width: Set the width of the icon border.
• Border Radius: Set the radius of the icon border to control corner roundness.

Check out the Demo page of Timeline.