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 V35 released on December 21st 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-mm_faq-2
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 / CHAT BOT

POWER Sec Values Module

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

icon-module-sec-values

SEC VALUES

Visually represent your values with a text overlay.

values-3-column-layout-example

Page Speed Impact

LOW

Very minimal impact to page load speed, the code for this module has been optimized to limit resources needed on page load.

MEDIUM

An image or video background also impacts page performance.

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

What image size is best for the Values module?

For the Full Width layout, we recommend 810px x 1,060px and the same size can be used for the Boxed layout.

Module Options

Helpful Links: Settings that apply to all Section Modules and Settings for Theme Styles.

Value

This is where you will add the items that appear in the module.

sec-values-module-settings

When you hover over the preset item, you will see two icons appear for actions you can take: edit and clone.

Additionally, there is a + Add link above the first item where additional items can be added.

Value Item(s) → Title

Option to add a Title, visible on the box front and on hover above the description text.

value-title-and-description

Value Item(s) → Description

Option to add a Description that is visible when the user hovers over the value item. The description uses a rich-text editor so you can format the text as you'd like.

Value Item(s) → Background Image

The image that displays for the value background.

values-module-background-image

Value Item(s) → Style → Background Image Position

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

value-item-style-settings

Value Item(s) → Style → Overwrite Hover Colors

Option to overwrite the colors for the hover color of the Box Overlay and the Box Text.

This overwrites theme and module colors at the item level.

Use the module style settings ↓ to overwrite all of the items to be the same color, overwriting the theme's default color.

Value Item(s) → Animation

You can also override the default animation settings at the item level.

accordion-item-animation-settings

Slider

See Values Slider in Action

Slider-use-slider

Slider → Use Slider?

Checkbox to activate the slider functionality.

Note: Slider not working for related posts filter.

Slider → Number of visible items

The default is 3 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. 

This setting will overwrite the setting Number of Posts to Show under Layout.

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 post preview, 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.

Layout → Full Width

Checkbox to set the module to Full Width (default) or uncheck for boxed layout.

values-module-layout-options

Layout → Centered

By default, the module text 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 → Background Image Position

Choice of Bottom, Center, Left, Right, or Top as the default for all Item(s) in the module.

Style →  Overwrite Hover Colors

Option to overwrite the theme default color (brand primary color) at the module level.

Style →  Overwrite Box Color → On Hover - Box Overlay

Define the Box Overlay color by the color hex code or use HubSpot’s color picker. Additionally, the opacity of the overlay color can be configured.

Style →  Overwrite Box Color → On Hover - Box Text

Define the Box Text color by the color hex code or use HubSpot’s color picker. Additionally, the opacity of the overlay color can be configured.

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.

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. 

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

VALUES 3 COLUMN FULL WIDTH

values-full-width-example

Layout 

Full Width

Value Item → Background Image

810px x 1060px

Value Item → Style → Background Image Position

Center

VALUES 3 COLUMN BOXED

values-boxed-layout

Layout 

Boxed (uncheck Full Width)

Value Item → Background Image

810px x 1060px

Value Item → Style → Background Image Position

Center

Examples

orange-pegs-values-module-power-theme-example
candor-website-values-module-example
realclever-values-module-theme-example
allen-interactions-mission-value-culture-example
HOP-values-module-power-theme-example
altaskifer-visjon-module-example
configura-company-values-module-example
noova-values-example

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.