EN
Searching...

Timeline Section

This timeline section enables users to display project milestones and tasks in a chronological sequence.

This is particularly beneficial for highlighting project progress, illustrating application processes, showcasing achievements such as awards, and offering other customizable options.

It provides a structured and visually appealing way to present information in a timeline format, enhancing user experience and engagement.

In this article:

Add Section to your Page

  • A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
  • On your page, click on the blue + icon to add a New Section to your page.

  • You will now see the section categories on the left side.
  • Click on the Timeline tab (1) where you can choose from different layouts of the timeline (2) section.
  • The section will now be added to the page. Click on Save (3) button to keep the changes.

Add and Edit List Items

Add list item

Once you have added the section:

  • Click on the Edit Timeline (1) button to open the List Item Panel.

  • Click on the Add Item (2) button to add a new list item.
  • You can choose to Duplicate or Delete (3) the list items.
  • Specify a Headline (4) for the timeline section.

Edit List Item

Click on the list item that you want to edit. It will open that particular List item’s editing options.

From here you can:

  • Upload / Remove Primary and Secondary Image (1)
    You can upload a Secondary Image along with the Primary Image for each list item. When a user hovers over the item, the secondary image will be displayed, replacing the primary image. Additionally, you can set the Image Accent Color, which will be displayed on image hover.
  • Add a Title (2), Subtitle (3), and Description (4) of the list item.
  • You may not find the option of subtitle and description in particular list items depending on the layout you choose.

Note

Before adding the description, check this article.

5. Action on Click – Title and Image

You can customize the click behavior of individual items in the Timeline section. Below are the available options:

  • Go to a Link
    Selecting this option opens the Link Builder, allowing you to add a hyperlink to this item. The link can direct users to another page within your website or an external URL. Know more about Link Builder.
  • Open in Lightbox
    This option displays the item in an enlarged Lightbox view when clicked. In this mode, the Subtitle and Description associated with the item will not appear in the grid view but will be visible in Lightbox mode.
  • No Action
    Choose this option to make the item unclickable. When selected, clicking on the item will not trigger any action.

6. Open Link in New Window: Set the Link to open in a new tab or in the same tab. This will only be visible when Go to a Link option is selected under the Action on Click menu.

7. Buttons & Links: Add any type of Link to the list item. You can add a Button/Image link/Social Icon/Text Link. Learn more.

8. Card Style Override

You can override the global card style settings from the section’s Style Settings and customize each item’s card individually in the Timeline section. This allows you to apply unique styles to different list items for better customization.

Learn more about Cards option in dynamic section.

9. Shape Style Override

Use the Override option to assign a different shape to each image individually within the Timeline section, giving you greater control over the visual style of every item. Learn more about Shape Mask.

10. Save: After making the customizations, save the changes.

Sequence List Items

Manage Elements of Timeline Section

Timeline section includes an Elements tab that allows you to manage the visibility of various elements within the section with ease. Using simple toggle switches, you can enable or disable specific elements without having to delete or modify the elements themselves.

  • Click on the Edit Timeline (1) button.

  • Choose the Elements (2) tab.
  • After making the changes, hit the Save (3) button.

Section Options

  1. Show Headline: Enable or disable the visibility of the headline for the Timeline section.
  2. Show Buttons: Control whether buttons are displayed at the section level.

Items Options

  1. Show Image: Toggle the visibility of the images.
  2. Show Title: Control whether the title is displayed.
  3. Show Subtitle: Enable or disable subtitles.
  4. Show Description: Manage the visibility of item descriptions.
  5. Show Buttons: Decide if buttons for individual items should be shown.

Change Section Layout

  • Click on the Edit Timeline button to open the section editing panel.
  • Choose the Layout tab.
  • From here, you can easily change the layout of the section even after adding it to the page.

While changing the layout, you will see the section-related layouts on the top.

Apart from these, you also have the option to choose a layout from other sections under the More Layouts heading.

Style Options

  • Click on Edit Image List button.
  • Choose the Style (1) tab.
  • Change the Style for the section elements and Save (2) your changes.

You will have multiple style options for the section: 

  1. Display Options
  2. Alignment
  3. Text Size
  4. Spacing
  5. Section Headline
  6. Timeline Style Options
  7. Images Options
  8. Shape Mask
  9. Image Hover Options
  10. Image Border
  11. Card Options
  12. Shadow Options
  13. Buttons & Links

Display Option

  1. Specify the Space Between Rows of the list items.

Alignment

  1. Align the Text Horizontally in the section. You can set them to be left, right or center aligned.
  2. Align the Content Vertically in the section. You can set them to be top, center and bottom aligned.
  3. Choose the Content Order i.e., the images of the list items to be displayed first or the associated text.

Text Size

  1. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles. 
  2. Set the Title font style for the list items of the section.
  3. Set the Subtitle font style for the list items of the section.
  4. Set the default Description font style for the list items of the section.

Spacing

  1. Specify the Image Width for list items.
  2. Specify the Space below Section Headline in px.
  3. Specify the Space Above images of the list items (in %).
  4. Specify the Space Around the Divider horizontally of the list items (in %).
  5. Specify the Space below the titles of the list items (in %).
  6. Specify the Space below the Subtitles of the list items (in %).

Section Headline

Timeline Style Options

Images

Shape Mask

Image Hover

Image Border

Cards

Shadow

Buttons & Links

 

 

  1. Item Style Options
  2. Image Options
  3. Shape Mask
  4. Image Border Options
  5. Image Hover Options
  6. Size and Space Options
  7. Section Styling Options
  8. Text Options
  9. Cards Options
  10. Shadow Options
  11. Buttons & Links

Item Style Options

  1. Specify the Space Between Rows of the list items.
  2. Choose the Content Order i.e., the images of the list items to be displayed first or the associated text.
  3. Align the Content Horizontally in the Image List. You can set them to be left, right or center aligned.
  4. Align the Content Vertically in the Image List. You can set them to be top, center and bottom aligned.

Image Options

  1. Choose the Image Crop for the list items. You can set the images as Square, Circle, Horizontal, Portrait, and Original.
  2. Choose to have a common corner radius or different corner radius for each side of the list items and set a number (in px) for the Corner Radius of the list item images. Know more.

Shape Mask

  1. Shape Mask: Enable this toggle to apply a shape mask to the image in the Timeline section. Once enabled, the selected shape will visually clip the image into that form.
  2. Select Shape: Choose from various predefined shapes to apply to your image. This allows you to creatively stylize your content by displaying image in a unique form like rounded, diamond, drop, etc.

Notes

  • Shape Mask option is layout-dependent – It may not appear under layouts where text like title or subtitle is displayed over the image.
  • The Stretch setting depends on multiple factors – including Image Size, Alignment, and Crop settings defined under the Style tab.
  • If Image Crop is set to Original, the image’s actual dimensions will determine whether it gets stretched vertically or horizontally.

Image Border Options

  1. You can enable border around the images in the section. From the dropdown, choose a Style for the border.
  2. Specify the width of the border. If it is set to 0, then the border will not appear. You also have the option to set the border width individually for each side of the image.
  3. Select the Border Color from color picker.
  4. Determine the border width for mobile devices, aligning it with the width chosen for desktop.

Image Hover Options

  1. Choose the Image Hover Color to be the accent color or to be specified. If you have chosen the accent color, then specify the opacity.
  2. If you have chosen the specify color option then set the Base hover color and opacity for the list items.
  3. Choose to Animate the list item images on hover by clicking on Yes. Check this feature on a live page.
  4. Choose an Animation Style for images when the cursor is hovered over them.

Size and Space Options

  1. Specify the Image Width for list items.
  2. Specify the Space Below Section Headline in px.
  3. Specify the Space Above Images of the list items (in %).
  4. Specify the Space Around Divider of the list items horizontally (in %).
  5. Specify the Space Below the Titles of the list items (in %).
  6. Specify the Space Below Subtitles of the list items (in %).

Section Styling Options

  1. Enable this if you prefer every second item in the section to be on the Alternate (opposite) side.
  2. Select the Direction of the items.
  3. Specify the Divider Line Width for the section.
  4. Specify the Base Line (background) Color for the Divider.
  5. Specify the Active Line (highlighted) Color for the Divider.

Text Options

  1. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles. 
  2. Set the Title font style for the list items of the section.
  3. Set the Subtitle font style for the list items of the section.
  4. Set the default Description font style for the list items of the section.

Cards Options

Shadow Options

  1. Display – Choose to show the shadow behind the list items always or on hover only.
  2. Style – Choose from existing presets or create a custom shadow.
    In case you have chosen the Custom option, then visit this Box Shadow Generator to create a custom shadow. Finally, copy and paste the box shadow CSS.
  3. In case you have chosen the presets option, then Choose Shadow Styles from the dropdown.

Buttons & Links

  1. See how to manage the styling of Buttons & Links.
  2. Save all the style changes.

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us