Timeline

Once covered what this module does and the terminology that we use, we will explain how to create a timeline.

First, we will cover the timeline design and how to style all the timeline events.

Later, we will see how to create and style a single event.

Content Tab > Timeline > Scroll Animation

Enable this field if you want to animate the timeline when scrolling in order to better show the progress.

This field is responsive. If enabled, a new fields will appear in the design tab to style the line scroll color.

Content Tab > Cards > Card Location

This is one of the most important fields, since it controls how the cards are displayed.

This field comes with responsive options (you can set a different location for desktop, tablet and mobile). As always, we recommend that you follow a mobile-first approach when designing a Divi element.

These are the available options:

Alternate

The timeline line is always in the middle in this design. The card and the label will be displayed beside the line.

The card position will alternate. For example, if the card is being displayed at the left of the timeline line for an event, the card will be displayed at the right of the line for the next event.

The label will be displayed opposite the card.

This is the default option.

Right

Select this option if you want the card to be always displayed at the right of the timeline line.

Unlike the alternate and center option, you will be able to change the line position (from the design tab, Markers toggle, Offset field).

The label will be displayed inside the card.

Center

Here both the timeline line and the cards will be centered.

The label will be displayed inside the card.

Left

Select this option if you want the card to be always displayed at the left of the timeline line.

Like the right option and unlike the alternate and center option, you will be able to change the line position (from the design tab, Markers toggle, Offset field).

The label will be displayed inside the card.

Content Tab > Cards > Show Arrow

Here you can choose whether the cards should display an arrow or not. If enabled, new fields will appear to style the arrow.

All the arrow fields comes with responsive options as well.

Design Tab > Timeline > Line Color

This responsive field will allow you to change the timeline line color.

Design Tab > Timeline > Line Width

This responsive field will allow you to change the line width instead.

Design Tab > Labels > Background Color

This responsive field will allow you to add a background color to the labels.

Design Tab > Labels > Alignment

This controls how the labels is aligned within either the card (left, right and center locations).

This field won’t be available when the card position is alternate.

Design Tab > Labels > Font Fields

Next, we will be able to custom the labels font styles, such as the font family, font weight, text color, etc.

Design Tab > Labels > Label Margin & Padding

Here you can add either margin or padding to the label. You may want to add some padding if you previously added a background color for the labels. Likewise, you may want to adjust the labels position by using the margin field.

Design Tab > Box Shadow > Labels

Here we offer several options to highlight the labels with a shadow.

Design Tab > Markers > Container Width

This field controls how much space should be reserved for the marker. Increasing this value will incresase the distance with the cards and labels. You might also need to incresase this value when you want to use markers larger than usual.

Default is 100px, which should be OK for most cases. You can either set a different value for all devices, set different values to different devices or leave it as is.

Design Tab > Markers > Background Color

This fields is self-explanatory and do what it says: change the markers background color. 

Like most of the fields in the DonDivi Builder, you will have the ability to choose differerent values (background color here) for different devices.

Design Tab > Markers > Offset

This field is available if the card position is leff or right. It will allow you to move the line width the markers. More specifically, it defines the distance between the lef/right side of the module and the timeline line.

This field is also device responsive and the default value is 0.

Design Tab > Markers > Border and Padding

Finally, we offer fields to add a custom border, as well as set the border radius and the markers padding.

Design Tab > Box Shadow > Markers

Here we offer several options to highlight the markers with a shadow.

Design Tab > Cards > Background Color

The card fields in the design tab, like the labels and marker ones, are pretty straightforward and easy to understand.

This one sets the card background color. Of course, and as you can already imagine,  it comes with responsive options. 

Design Tab > Cards > Width

You may want to reduce the cards width. if so, this is your field. Default is 100%.

Design Tab > Cards > Arrow Color & Width

These responsive fields will appear if the cards are displaying arrows and will let you set the color and width for the arrows. 

Design Tab > Cards > Border and Padding

Finally, we offer fields to add a custom border, as well as set the border radius and the cards padding.

Design Tab > Box Shadow > Cards

Here we offer several options to highlight the cards with a shadow.

Event

You can create a new event by clicking Add New Event. A new modal called Event Settings will appear where you will be able to customize the timeline event.

Let’s go over now the fields that will allow you to customize the event elements.

Content Tab > Label

Here you can enter the event label. This text will appear both in the timeline and in the module events list.

You can style the label in the design tab, by using the fields that are located in the Label toggle.

Advanced Tab > Custom CSS > Label

Additionaly, you can enter here some custom CSS that will be applied to the label.

Content Tab > Timeline > Marker

Here you can choose whether the marker should display content or not.

You can place either an icon, an image or text inside the marker.

If you choose to display content, new fields will be appear in the design tab to style the marker content. They will be available either in the Marker Text toggle if the marker is displaying text, or in the Marker Image & Icon toggle, if the marker is displaying an image or icon.

Default is none.

Advanced Tab > Custom CSS > Marker

Additionaly, you can enter here some custom CSS that will be applied to the marker.

Content Tab > Content > Card

These fields will allow you to add custom content to your cards. We cover them here.

Advanced Tab > Custom CSS > Card

Additionaly, you can enter here some custom CSS that will be applied to the card.

Card

These fields will allow you to add and style the card custom content.

Content Tab > Card > Image/Icon

You can choose here whether an image or icon should be displayed in your card.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Card Image & Icon will appear in the design tab (which we will document later).

Content Tab > Card > Title

This field, that comes with responsive options too, will allow you to display a title to your card.

The responsive options will let you choose different titles for different devices. You can even choose which devices should display a title!

Also, you can enter a URL in the Title Link URL field in case you want the title opens a destination URL. You will be able to also choose whether the URL should be opened in the same tab or not.

Content Tab > Card > Body

Here you can add the main content. This field offers responsive options too, which is very cool and helpful when we want to display fewer text in smallest devices.

You can even choose which devices should display the body!

Content Tab > Card > Button

Add a text here if you want to display a button. This will be the button text.

This field, same as all the custom content fields, comes also with responsive options. Meaning that you can choose different content for different devices. You can even choose which devices should display a button!

Note: You need to enter a URL in the Button Link URL field so that the button is displayed.

Design Tab > Card Image & Icon > Icon Color

This responsive field will allow you to set a custom color for the icon.

Design Tab > Card Image & Icon > Image/Icon Width

This responsive field will allow you to set a custom size for the image or icon. Default is 50px if you selected an icon and auto in case you are displaying an image.

Design Tab > Card Image & Icon > Image/Icon Placement

This responsive field will allow you to choose whether the image or icon should be displayed above the tile, body and button (default) or should be placed at the left.

Design Tab > Card Image & Icon > Image/Icon Alignment

This field will align your image or icon to the left, right or center when you are displaying the image or icon above your content. Otherwise, it will vertically align the image or icon.

This field, same as all the custom content fields, comes with responsive options.

Design Tab > Card Image & Icon > Image/Icon Offset

This responsive field will allow you to set the distance between the image (or icon) and the content (title, body and button).

The default offset is 20px.

Note: In case the label is being displayed inside the card, this offset will be applied to the label as well. Remember that you can use the label margin & padding fields to customize the label spacing.

Design Tab > Card Image & Icon > Image/Icon Margin & Padding

Finally, you can add some padding or margin to the icon or image.

Design Tab > Card Text

These fields will allow you to style the title and the body text. For the title you can choose the heading level.

For both of them (title and body) you will be able to style the font, font size, font color, letter spacing, etc.

Design Tab > Card Button

These toggle fields will allow you use custom styles for the button and will let you to align it to the left, right or center of your content.

Advanced Tab > Custom CSS > Card Image/Icon

Need further customization for the image (or icon)? Enter your custom CSS here.

Advanced Tab > Custom CSS > Card Title

Here you can enter additional CSS for the title.

Advanced Tab > Custom CSS > Card Body

Finally, you can enter additional CSS for the body as well.

Animation

You will be able to add animations to the card image or icon, as well as transition animations to the cards.

In order to add an animation, we offer the DonDivi custom effects in this module.

Card Image & Icon > Enter Effect

You can choose an effect here. If so, the image or icon will be animated when entering into the viewport.

Default is none, meaning that no DonDivi effects will run.

See all effects later in this section

Card Image & Icon > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Card Image & Icon > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Card Image & Icon > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.

Card Animation > Enter Effect

You can choose an enter effect here. In other words, you will be able to animate the card when it appears.

Default is none, meaning that no DonDivi effect will be applied.

These are the available enter effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Card Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Card Animation > Exit Effect

You can choose an exit effect here. In other words, you will be able to animate the card when it disappears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, no animation will run at all.

These are the available exit effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Card Animation > Exit Effect Animation Intensity

Here you can choose how subtle or aggressive your exit effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Card Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Card Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.