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-
%20(1).png?alt=media&token=4d0f1611-f734-43f4-ae30-c0abbd872aad)
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.
%20(2).png?alt=media&token=48f1e245-6494-4109-841e-7f918678cad7)
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.
%20(1).png?alt=media&token=4b27ebf1-c107-4df1-b0bd-336ff9bef23b)
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.
%20(1).png?alt=media&token=947caade-e05a-4fa4-9aab-7f319d4dc4e7)
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.
%20(1).png?alt=media&token=5467b249-89ff-4756-b145-1a93c5f25ee8)
Connector Color Settings – Select the colors of Line, Icon, Background & Border of the connector for Normal and Focus states.
%20(1).png?alt=media&token=a49c9f1c-eefd-4a2a-af0d-e1cc067c937a)
Spacing #
Spacing tab offer options to customize the horizontal and vertical spacing and also bottom margin for heading.
%20(1).png?alt=media&token=58c0607e-2a79-422d-9689-991ec14f49af)
Typography #
Under the Typography tab, options for font family, font size, font–weight, and line-height are available for Date, Heading, and Content.
%20(1).png?alt=media&token=292dd352-f9a1-4b0b-ba91-804273d2b244)
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.
