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.