/ Documentation /Blocks/Post Timeline

Post Timeline

Key Features –

Timeline are great medium to show events. Post Timeline allows choosing CPTs and displays them in the timeline. IIt provides an option to select available post types – posts, pages, media or any CPT you have. It provides an option to select posts by category/tag and set order for them. It also offers predefined controls for every part of the post like Featured Image, Excerpt, Author etc.

Key Features –

  • Option to Choose Post type (posts, pages, media, CPT) to display
  • Taxonomy controls for category, tags
  • Order posts by title or date
  • Layout (Center, Left, Right )
  • Featured image position and size
  • Show/ Hide post meta like Author, Date, Comment, Excerpt, Read More Link
  • Icon selector and Connector customization
  • Color and Typography option for each part of the blog
  • Spacing options for posts

Choose Post Type and set Taxonomy

Under the Query tab, Post Type option allows choosing all available post types – posts, pages, media or any CPT you have. Taxonomy controls allow choosing posts according to categories or tags. Order by option allows ordering posts according to date or alphabetically dependent on the title.

post-timeline-cpt-taxonomy

Layout (Center, Left, Right )

Layout for the icon and a timeline card can be set to Center, Left, Right from Layout > Orientation. Arrow Alignment can be set vertically top, bottom or center with respect to timeline card.

post-timeline-layout

Featured image position and size

Featured image can be set at the top of the post content or as a background for the post content. Under the Image tab, Featured image position and size can be managed.

post-timeline-image

Show/ Hide post meta

Under the Content tab, the options are available to hide post meta settings like Author, Date, Comment, Excerpt, Read More Link.

post-timeline-content

Icon selector and Connector customization

The icon for timeline item can be set from Connector tab. You get around 1400 icons to choose from. It also has the option to manage the size for the icon.
Connector includes the icon, its background, border and a line that joins two icons. Under the Connector tab, you get the option to select the icon, its background size, a border width around icon background and a connector width.

Connector Color Settings tab provides two sub-tabs for Normal and Focus colors for the icon, border, background colors.

post-timeline-connector

Color and Typography option for each part of the blog

Under Timeline Item and Color Settings tab, options for font size and colors are available.

Spacing options for posts

Space can be managed for timeline items from Spacing tab.

Under the Layout tab, according to the layout, you can choose to stack the timeline items at responsive devices with ‘Stack on’ option.

P.S. – For Custom Post Types make sure the show_in_rest parameter is set to true. For both, custom post type and custom taxonomies.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.