POWER Sec Timeline Module

Intro to Title

The smaller text above the title; can be left blank to hide on the page.

Title

The main heading for the section; can be left blank to hide on the page.

Title - Header Type

Choice of H1, H2, H3, or H4. This is how Google will determine the heading type. This does not control the formatting of the font, there is a separate setting under Style → Title Size to determine how the heading will display.

Description

You can add any amount of body text here or it can be left blank to hide on the page.

Timeline

Add items to the timeline to create milestones.

Each step in the timeline is automatically positioned on the left and then right to create the staggered layout.

Timeline → Title

Add a Title to the milestone, such as the year and event name.

Timeline → Description

Use the rich text editor to add a description of the milestone.

Timeline → Image

Option to add an image to the milestone, can be left blank if no image desired.

Timeline → Alt text

Add a description of the image to use as alt text for accessibility and SEO.

Timeline → Image Position

Choice of Bottom, Center, Left, Right, and Top.

Determines the focal point of the image within the milestone boxed element.

Timeline →  Animation → Animation Type

Set to Default to inherit the global animation style with the option to change to None or any of the animation styles.

Timeline →  Animation → Delay

Value from 0 to 3000, must be set in 50 ms increments.

Layout → Intro Width

This allows you to control the width of the text, with two choices: Narrow or Default.

The module is set to "Narrow" when you add it to the page (this was the original layout prior to adding this choice as a setting). Narrow limits the width of the section text (intro to title, title, and description) within the section.

"Default" allows the text to fill the width of the module; the width is dependent on whether the section is set to "content width" or "full width" in the section settings.

Layout → Centered

By default, the section text (intro to title, title, and description) and milestone boxes are centered. If you want the module to be left-aligned, you can uncheck this box.

Layout → Timeline Content Centered

Center the content within the Timeline item/milestone box.

Layout → Padding Top and Padding Bottom

Choice of Standard, None, Small, Medium, Large, or First Section with Header. Refer to Settings that apply to all Section Modules for more details about these choices.

Style → Color Scheme

Choice of Light or Dark.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

Style → Intro Title Style - Text

The Default uses the text style from the Theme Settings based on the color scheme selected.

You can override the Theme Settings by choosing Color or Gradient and completing the corresponding color settings.

Style → Intro Title Style - Background

The Default is transparent, where the text is displayed directly on the background for the module.

You can apply a background Color or Gradient to the text to give the appearance of a highlight behind the text.

Style → Intro Title Style - Border Radius

When a background color or gradient is applied, you will also have the option to configure the Border Radius in pixels.

If not set, the default Border Radius from your Theme Settings will apply.

Style →  Title Style

The Default uses the text style from the Theme Settings based on the color scheme selected.

You can override the Theme Settings by choosing Color or Gradient and completing the corresponding color settings.

Style →  Title Size

The Default is set to match what you chose for Title Header-Type, what Google sees from an SEO perspective. This setting gives you the option to change the Title Size to H1, H2, H3, H4, H5, or H6 so that the text will be styled based on your Theme Settings for the corresponding header tag chosen here.

Style →  Overwrite Box Colors

Option to change the box color for the "Standard" layout. 

The Box Color is the color of the box below the image (not the hover color).

Style →  Overwrite Box Color → Color Scheme

Choice of Light or Dark.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

Style →  Overwrite Box Color → Custom Box Background Color

Option to change the default Light or Dark color to a different color using the Hex value.

Option to control the opacity of the color on a scale of 0 to 100%.

Style → Background

Choice of Background Color, Background Image/Video, Background Gradient, or Transparent. Refer to Settings that apply to all Section Modules for more details about these choices.

Style → Shape Divider

Optional Shape Divider(s) can be added to the top or bottom of this module. Refer to Settings for configuring Shape Dividers for more details about these choices.

Animation

Checkbox to turn on/off Animate on Scroll. Turning off here will only apply to this section, to turn animation off globally refer to Theme Options for Animations.

Animation → Section

Ability to change the Animation Type and Delay for the Section. 

Animation → Intro to Title

Ability to change the Animation Type and Delay for the Intro to Title.

Animation → Title

Ability to change the Animation Type and Delay for the Title.

Animation → Description

Ability to change the Animation Type and Delay for the Description.

Anchor Link ID

Set an anchor link for the module. Can be used to create a link directly to that section on the page and/or to include in an on-page menu (like Sticky Sub-Menu) to allow users to jump to that section without scrolling.

Easily add an anchor link to this section, for full instructions refer to Setting up Anchor Links.

Custom Class

Ability to add a Custom Class to use in the child.css for individual customizations.

See full instructions for setting a Custom Class for Section Modules.