Timeline

Create an attractive Vertical Layout to showcase your blog posts in a tiled manner using the EAE - Timeline Widget. You can use the timeline widget to display the content from the post or to display some custom events.

Content

Skins

Timeline - Skin

  • 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 to manually enter data of specific event. Where as Post allows to pick content dynamically from the blogs and custom post types.

  • Custom Timeline

    When selecting Custom option in Source.

    Timeline - Timeline

    Timeline Click on the ADD Item button to add an event to the Timeline.

  • Items: Add the items individually here.

  • 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 suitable tittle to be displayed in the Card

  • Icon: Set an icon for each card in timeline.

  • Type: 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.

Post Timeline

When selecting Post option in Source, you get two more options Query and Post Element.

Timeline - Post Timeline

Query

Timeline - 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

Timeline - Element Heading

  • Show Title: Enable to display the title of posts in the Timeline cards Html Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or p.
  • Enable Link: Enble it to make the card clickable.
  • Open in New Tab: Choose Yes to open posts in a new tab.

Date

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

Featured Image

  • Show Image:: Enable to display the feature image of the post in 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.

Gobal Icon

Timeline - 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

Timeline - Style

Layout

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

Card

  • Alignment: Align the content inside the card to Left, Center, and Right
  • Padding: Set the padding of the card’s content
  • Alignment: Align the image inside the card to Left, Center, and Right.
  • Alternate Style: Enable it to display the cards in the alternate style
  • Size: Set the size of the image
  • Spacing: Adjust 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.
  • Title Color: Specify the color of the title for Normal, Hover and Active States
  • Content color: Choose the color of the content 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
  • BoxShadow: Set the box-shadow options around the cards

Date

  • Padding: Set the padding of the Date text
  • Margin: Set the margin
  • Color: Specify 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.
  • 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
  • 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