Timeline Module Overview - DiviFlash Docs

DiviFlash introduces the new Timeline module, which gives the user complete control over the module to create a diverse timeline for their webpage. We have made the module very simple to use, but we did not cut back on the features.

Upon selecting this module, users will find the Timeline Settings box on their screen along with a default timeline design.

The default timeline will have four basic elements:

Blurb
Date
Line
Marker

The users can customize these elements from the options provided in the timeline settings.

In this documentation, we aim to introduce our users to the new addition of our plugin, DiviFlash.

Timeline Items

In the Timeline Settings box, you will first see the number of items in the timeline. Each item represents a set of elements, for example, one item comprises one blurb, one marker, and one date.

Add New Item

By default, you will get some items in your timeline. If you wish to add more, you can do so by clicking on the “Add New Item” button. Or, you can also click on the duplicate icon on the left side of the item bar.

Upon clicking on the “Add New Item” button, it will take you to the Timeline Item Settings.

Timeline Item Settings – Content

In the content tab, you will have the following sections-

Content

Inside the content section, you will have the option to edit the title, subtitle, and the content of the blurb.

Media

In the media sections, you have the option to enable or disable media, choose the media type (image or icon), add an image or icon, and add alt text to the image, if chosen.

Button

After the Media, you will see the button section. This is where you can add a button to your blurb if you want to. Initially, the button is disabled, but once you enable it, it gives you options to further customize it.

You can edit the Button Text, add a URL to the button, and choose if the URL will open in a new tab or in the same window. Also, there’s an option to add a button icon, which is disabled by default. Once enabled, it lets you choose the icon and its placement.

Date

Up next is the Date section, where you can edit the content of the date element. It’s divided into two sections: Title and Subtitle. The subtitle is usually the date and the title will be a text of your choice.

In both cases, you can edit the title and subtitle and choose the H tag for the text.

Marker

The Marker section is where you can change the icon of the marker. It is automatically set to a ‘+’, but you can change it to whatever you like from here. You can use a different icon, text, or image, or leave it blank.

It also has the option to set a different marker for mobile devices. You can enable the “Mobile Marker Icon” to avail of that.

Custom Positions

This is where you customize the position of the elements. Along the with elements, it also lets you change the position of the blurb and date arrows.

Link

The whole item can be attached to a link in this section.

Background

This section allows you to customize the entire item by adding a background color, gradient, image, video, pattern, or mask.

Admin Label

For easy identification, you can give the admin label a name of your choice instead of mirroring the module’s name.

Timeline Item Settings – Design

The design tab is focused on the design of the items, so it gives you these options-

Blurb Style

In the Blurb Style section, you will see three different sets of background options: Background color, Gradient Background, and Background Image.

Background

Background Color: You can add a background color to the blurb.
Padding: You can increase or decrease the background size.
Rounded Corners: This option lets you give the blurb corners a rounded shape.
Border Styles: Allows you to change the width, style, and color of the borders.

Box Shadow: You can add a shadow to the blurb. Once you choose a shadow to add, further customization options to adjust the position, color, and intensity of the shadow.

Background Gradient

Use a Background Gradient: Enable or disable the option to add a background gradient.
Select Color: Once the Background Gradient option is enabled, you can select two colors to create a gradient.
Gradient Type: You can choose between a linear or radial gradient.
Gradient Direction: Change the direction of the background gradient.
Start Position: Choose where the gradient will start.
End Position: Choose where the gradient will end.
Place Gradient Above Background Image: If there is a background image, it lets you place the gradient over the image.

The rest of the options are about customizing the border, which has been discussed in the Background section.

Background Image

Add Background Image: You can upload a background image for the Blurb.
Background Image Size: Choose how the background image will appear.

Background Image Position: Choose where the background image will show.

Background Image Repeat: Choose if the background image will be repeated and how.

Other options pertain to customizing the border, as explained in the Background section.

Title

In the Title section, the first few options are for adding and customizing the title background. These options are the same as the background options described in the Blurb Style section. The next options are-

Title Tag: This lets you change the H tag of the title.

Margin: Add margins around the title.
Padding: Add paddings around the title.
Font: Choose the title font from a variety of font options.
Font Weight: Change the weight of the font, from Light to Ultra Bold.

Font Style: Change how the font looks, which includes Italic, Uppercase, Title Case, Underline, and Strikethrough.
Text Alignment: Choose the alignment of the title text.
Text Color: Choose the font color.
Text Size: Adjust the size of the font.
Letter Spacing: Adjust the spacing between the letters.
Line Height: Adjust the line of the title text.
Text Shadow: Add a shadow to the title text.

The rest of the options are for customizing the border of the Title. The functionalities of these options are the same as we have mentioned before in the Blurb Style section.