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.
Last updated
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.
Last updated
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.
By default, you'll get the below design-
To configure the content of your Content Timeline block, switch to the ‘Content’ tab.
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.
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.
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.
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.
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 tab offer options to customize the horizontal and vertical spacing and also bottom margin for heading.
Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Date, Heading, and Content.
Under the Colors tab, color options are available for Background, Heading, Content, and Date.
Opacity - Adjust the opacity of the background of the tiles.
