Content Timeline

Content Timeline allows displaying historical events with vertical timeline items. The block contains various customization options; you can add a title, description, icon, date to the timeline items.

How To Add The Content Timeline Block

1. Open a page or a post and click on the plus icon to add a new block and look for the Content Timeline or you can search for it if it doesn’t pop up quickly for you.

2. By default, you'll get the below design-

How To Configure The Content Timeline Block

To configure the content of your Content Timeline block, switch to the ‘Content’ tab.

General

Number of Items - You can select the total number of items to display in a grid.

Orientation for the icon and a post grid can be set to Center, Left, Right from Orientation.

Arrow Alignment can be set vertically top, bottom, or center with respect to timeline card.

Stack - Select on what breakpoint the columns/tiles will stack.

Timeline Item

Heading tag - Select the HTML tag for heading as h1, h2, h3, h4, h5, h6.

Border Style - Select the border style of the tiles as Solid, Dotted, Dashed, Double, Groove, Inset, Outset, Ridge.

Border Width - Adjust the border width of the tiles in the timeline.

Border Radius - Adjust the border radius of the tiles in the timeline.

Border Color - Select the color for the border of the tiles in the timeline.

Padding - Space can be managed for the content of the grid from the Padding tab.

Date Settings

Display Post Date - Toggle button to display/hide the post date.

Date Format - Select the format of the post date from the multiple options.

Date Settings - Select the date to be displayed for each tile in the timeline.

How To Style The Content Timeline Block

Switch to the ‘Style’ tab to style all the elements of the Content Timeline block. You can customize ‘Connector’, 'Spacing' & ‘Color & Typography’ as per your preference.

Connector Settings

Select Icon - Select an icon to be displayed in the connector from multiple icons.

Icon Size -Adjust the size of the icon displayed in the connector.

Icon Background Size - Adjust the size of the background of the icon displayed in the connector.

Border Width - Adjust the width of the border surrounding the icon element in the connector.

Connector Width - Adjust the width of the connector bar in the timeline.

Connector Color Settings - Select the colors of Line, Icon, Background & Border of the connector for Normal and Focus states.

Spacing

Spacing tab offer options to customize the horizontal and vertical spacing and also bottom margin for heading.

Typography

Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Date, Heading, and Content.

Colors

Under the Colors tab, color options are available for Background, Heading, Content, and Date.

Opacity - Adjust the opacity of the background of the tiles.