Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V28 released on March 23rd 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

POWER Sec Steps Module

How to configure the Sec Steps module for POWER Pro theme in HubSpot

icon-module-sec-steps

SEC STEPS

Add clear steps for your website visitors to follow using numbers, icons, images or text only, plus add a button to add a link.

steps-module-layout-with-numbers-example

Page Speed Impact

LOW

The module has very little impact on page speed because the images are lazy loaded by default.

MEDIUM

If used above the fold (is in viewport), loading images will increase page load time.

TIPS

Convert images to WebP where possible to meet criteria to serve images in next-gen format.

To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).

FAQ

How do I change the number of columns for the Sec Steps module?

The layout updates dynamically based on the number of steps you have to be 2, 3, or 4 columns.

Module Options

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.

Step

Edit, Clone, or Add Steps - must include at least one step, edit the default to get started.

sec-step-module-add-step-setting

Step → Title

Add a Title for the Step. Leave blank if you don't want a Step Title.

sec-step-title-description-settings

Step → Description

Add a Description for the Step. Leave blank if you don't want a Step Description.

Step → Icon (for icon-layout)

Add an Icon for the Step, used for the Icon layout only.

step-icon-image-upload-setting

Step → Image (for image-layout)

Add an Image for the Step, used for the Image layout only. Can be an SVG if you want to use a custom icon.

Step → Image → Alt text

Add alt text for your image.

Step → Image → Width + Height

Set the dimensions for the width and height of your image.

Step → Button Type

Option to configure a Button for the Step. Choice of None, Button, or CTA.

Step → Button Type → CTA

When CTA is chosen, the option to Choose CTA is available which opens the HubSpot CTA sidebar where you can choose an existing CTA or create a new CTA.

Step → Button Type → Button

When Button is chosen, additional settings are available to configure the button.

Step → Button Type → Button → Button Title

Button Title is the text that will appear on the button

Step → Button Type → Button → Button Link

The Button Link dropdown allows you to choose the type of link to include for the button: External, Content, File, Email Address, or Blog

Based on your selection, you can either add the URL or email address or choose the page, file, or blog post.

Step → Button Type → Button → Open in New Window

There is a toggle to allow you to open the link in a new window. The default is set to open in the same window/tab.

Tip: If your link is leaving your website, it is recommended to open it in a new window.

Step → Button Type → Button → Link Type

There is a check box for "No Follow" which allows you to indicate that the link is not associated with your website. This setting has SEO implications if used incorrectly.

Step → Animation

Ability to change the Animation Type and Delay for the individual Step. 

Layout → Choose Layout

There are four layout options available: Step Counter, Icon, Image, and Text Only.

step-module-layout-settings

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-intro-width-settings

Layout → Centered

By default, the section text (intro to title, title, and description) is left-aligned. If you want the text to be centered, you can check this 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 Step Title Color

Option to change the Step Title color. 

overwrite-step-title-color-module-settings

Style → Step CTA/Button Style

Option to choose any of the button styles configured in your theme settings including:

  • Solid Primary
  • Solid Regular
  • Solid Regular for Primary Background
  • Border Primary
  • Border Regular
  • Link
  • Link Back
  • Custom 01
  • Custom 02
  • Custom 03
  • Custom 04

Style → Step CTA/Button Size

Ability to override the default size of the CTA with choices for Regular, Long, Full Width, Small, and Large.

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.

Slider

See Steps Slider in Action

The Slider settings are located above the Layout section, when clicked it will open these settings to activate the slider.

Slider-use-slider

Slider → Use Slider?

Checkbox to activate the slider functionality.

Slider → Number of visible items

The default is 2 and can be changed as low as 1 and as high as you would like, but the number you choose will impact the layout of the slider within the module. 

Slider → Number of items to slide

The default is 1 and we don't recommend making this number higher than the number of visible items.

This provides the flexibility to slide a single step, or multiple, with each slider transition.

Slider → Transition Option

Choice of Manual, Autoplay, or Continuous. The default is Autoplay.

If Manual is selected, the slider can be activated by using the arrow keys on the keyboard, clicking the arrows, or clicking the bullet points below the slider (depending on what settings are activated).

Slider → Transition Time

Add the Time in Milliseconds for the transition time. Applies to Autoplay or Continuous options.

Slider → Transition Effect

Sets the effect to Slide.

Slider → Autoplay - Interval Timeout

Add the Time in Milliseconds for the timeout. Applies to Autoplay or Continuous options.

Slider → Navigation - Arrows

Checkbox to activate the arrows on the left and right of the slider for navigation.

Slider → Navigation - Bullets

Checkbox to activate the bullets below the slider for navigation.

Slider → Keyboard Control

Checkbox to activate control of the slider via the arrow keys on the keyboard for navigation.

Only works if the slider is visible (in the browser viewport).

This setting is recommended for Accessibility.

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.

Is in Viewport?

Performance setting to determine how the CSS is loaded for the module.

section-module-anchor-link-id-custom-class-is-in-viewport

If the module is at the top of the page and located within the viewport of the browser, check this option to ensure the CSS loads on page load.

If the module is outside of the viewport, especially on mobile, uncheck this box so the CSS loads asynchronously.

Learn more about this setting as it relates to Page Speed and Core Vitals.

Configurations

Layout with Numbers

steps-layout-with-numbers

Steps

4 Steps added

Layout Choose Layout

Step Counter

Layout Centered

Checked

Style Color Scheme

Light

 

Layout with Images

steps-layout-with-images

Steps

4 Steps added

Layout Choose Layout

Images

Layout Centered

Checked

Style Color Scheme

Light

 

Layout with Icons

steps-layout-with-icons

Steps

4 Steps added

Layout Choose Layout

Icons

Layout Centered

Checked

Style Color Scheme

Light

 

Layout without Titles

steps-layout-without-titles

Steps

4 Steps added, Title = Blank

Layout Choose Layout

Step Counter

Layout Centered

Checked

Style Color Scheme

Light

 

Layout Text Only

steps-layout-text-only

Steps

4 Steps added, Title = Blank

Layout Choose Layout

Text Only

Layout Centered

Checked

Style Color Scheme

Light

 

Layout with Buttons

steps-layout-with-buttons

Steps

4 Steps added with Button configured for each step

Layout Choose Layout

Step Counter

Layout Centered

Checked

Style Color Scheme

Light

 

Three Column Layout

steps-three-column-layout

Steps

3 Steps added

Layout Choose Layout

Step Counter

Layout Centered

Checked

Style Color Scheme

Light

 

Two Column Layout

steps-two-column-layout

Steps

2 Steps added

Layout Choose Layout

Step Counter

Layout Centered

Checked

Style Color Scheme

Light

 

Examples

showell-sec-steps-example
ander-sec-steps-example
retorio-sec-steps-example
tropical-hub-sec-steps-example
spot-on-sciences-sec-steps-example
oneday-sec-steps-module-example
orange-pegs-section-steps-module
netrics-sec-steps-layout
omapaja-steps-layout-with-links
quintas-energy-steps-layout

DESIGN SOMETHING COOL WITH THIS POWER MODULE?

Share it with us!

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.