{"id":4516,"date":"2024-12-18T14:31:42","date_gmt":"2024-12-18T19:31:42","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4516"},"modified":"2025-01-09T10:48:06","modified_gmt":"2025-01-09T15:48:06","slug":"timeline-block","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-2-design-block-mastery\/timeline-block\/","title":{"rendered":"Timeline Block"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Timeline Block\n <\/h1>\n \n \n \n\n

Module 2.5 \u2013 Mastery: Design Blocks: Timeline<\/p>\n\n\n\n

\n
Examples: Timeline Block<\/a><\/div>\n<\/div>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n\n
\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Step-by-Step\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Try it Out\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The Timeline Block<\/strong> allows you to organize content in a vertical timeline format. This is perfect for showcasing the history of your department, program, or any chronological sequence of events.<\/p>\n\n\n\n

Each timeline entry displays a date<\/strong> on the left, while the right side can include a title (heading)<\/strong>, text<\/strong>, and an optional button<\/strong> for added functionality. It’s an engaging way to present a visual story or detailed progression.<\/p>\n\n\n\n

Step-by-Step<\/h2>\n\n\n\n

1.<\/strong> Add the Timeline block using the block menu.<\/a><\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

2<\/strong>. Enter a date or an aside, by clicking in the text area at the left. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3.<\/strong> Add a title and text on the right text by typing in the provided areas.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can also make a list or button by adding either block using the block inserter menu.<\/p>\n\n\n\n

4. <\/strong>Add a second timeline item: Select the entire block<\/em><\/strong> by clicking the timeline icon at the top left. (*Note<\/em><\/strong>: this won’t work if you only have an individual timeline item selected)<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

Click the blue plus sign at the bottom right.<\/p>\n\n\n\n

\"Click<\/figure>\n\n\n\n

Video Tutorial<\/h2>\n\n\n\n