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 V25 released on August 18th 2022 – 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?
We have 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

FLEXIBLE THEME SETTINGS

How to modify the theme settings to customize your HubSpot website

pwr-icon-theme-options

THEME SETTINGS

Manage the style settings for all of your pages in one place to create a consistent look for your website. 

theme-settings-example

FAQ

I'm new to HubSpot and/or using Website Themes, help!?

Completing the HubSpot CMS for Marketers certification will help you understand the components used to build your website in CMS Hub!

Find all the resources we recommend for CMS Hub Basics.

Can I set up more than one brand in my account?

Once you have purchased the theme, you can setup up to 5 child themes that each have unique branding within the same account.

CMS Hub Enterprise users can setup up to 10 child themes.

Setting up a child theme is critical to ensure theme updates are applied, using a child theme is highly recommended whether you are using just one or more than one.

The font I need is not listed. How can I use it in my theme?

The theme accesses the Google Fonts library (browse available fonts) by default. If you are using Adobe Fonts (formerly Typekit), another online font service, or if you have licensed font files, these can be added to your child theme to override the theme settings.

You'll need to know the location of your fonts (either the font library URL or the font file URL from HubSpot files for each font) and which font will be the base font and which will be the accent font.

More detailed documentation coming soon for setting up Custom Fonts on your own, in the meantime, if you are not a developer or unable to make the updates on your own, please submit a ticket and we'll help with the setup. 

Setup Instructions

Theme Settings is the centralized location to edit all the global styles for your website.

There are two ways to access Theme Settings, depending on what you're working on, both are helpful to know how to find.

Settings  → Website → Themes → POWER x YOURCOMPANY child theme

If you're just getting started and haven't created any pages yet, you'll want to access from settings.

Page Editor  → Theme tab → Edit Theme Settings

If you're already building pages and need to make an adjustment, you can do so quickly and easily right from the page editor by clicking the Theme tab.

access-theme-settings


Setup Guide for Theme Settings

When you open Theme Settings, the initial page you see for POWER theme is our Setup Guide and provides you with an overview of how you can work with and modify theme settings. 

This template includes all the major page elements used in the theme so you can immediately see how your changes will look on your website.

Preview Pages in Theme Settings

At the top center of the page, there is an option for "View on" which gives you the ability to switch the page or template that you see to make it easier to preview how your changes impact your layouts for pages built with the theme you're working on or any of the POWER templates.

Here you have access to Published Pages, Draft Pages, and Templates (not including system templates).

theme-settings-preview-pages-templates


Theme Setting Organization

The options available for POWER theme are organized into design groups, each with sub-groupings to make it easy to find what you're looking for.

theme-setting-design-groups

The structure of POWER theme settings allows you to quickly adapt the theme for your brand and the flexibility to further refine the settings to adjust smaller details to reflect your brand style guide.

Every change you make is tracked and can be reset individually by clicking the reset icon for that item or group, or for the whole theme by clicking reset at the top.

reset-theme-settings

Basic Theme Setup

The quickest way to get the theme up and running is to make just two updates:

  1. Set your Brand Colors under Colors → Brand Colors
  2. Set your Base and Accent Fonts under Fonts → Basic Setup

Once you make these two updates, all of the styles will inherit these settings and you can start building pages. As you design starts to come to life, you can return to the theme settings to make further adjustments, like choosing a default form style or changing the corner radius for buttons.

Advanced Theme Setup

If you have a Brand Style Guide, you can work your way through each of the settings to make adjustments that align with your brand guideline. See Theme Options below for detailed documentation.

  HubSpot Knowledge Base edit theme settings

Theme Options

Colors
Colors → Brand Colors

The colors set here will define the default colors for your primary brand color as well as the necessary colors for light and dark schemes.

We recommend testing your color combinations for light and dark schemes using the Adobe Color Contrast Checker to ensure your color settings meet accessibility criteria.

theme-settings-brand-colors

Colors → POWER

With POWER, you can switch between light scheme and dark scheme in a single click.

These settings allow you to further refine the colors used for each color scheme, as well as additional options to change the style of POWER modules further.

Many modules also include the option to change the colors individually.

theme-settings-colors-power

Colors → POWER → Light Scheme

This is where you can overwrite the individual colors for use with light scheme.

theme-settings-color-light-scheme

Colors → POWER → Light Scheme → Background

light-scheme-background

Colors → POWER → Light Scheme → Text / Titles

Additional customization can be made for Titles within the modules. Text can also be changed in the rich text editor.

light-scheme-text-titles

Colors → POWER → Light Scheme → Link

Link settings are for plain text links only.

light-scheme-link

Colors → POWER → Light Scheme → Forms

The overwrites for Form colors were added by customer request, if there is an additional form property you would like to change from the default we're happy to help make the change via CSS and can include additional settings in a future release.

light-scheme-forms

Colors → POWER → Light Scheme → Lists

The shape of the bullet point can be defined under Styling → Lists.

light-scheme-lists

Colors → POWER → Light Scheme → Other

Option to change the default color for Social Icon Color for light scheme for all locations.

light-scheme-other

Colors → POWER → Dark Scheme

This is where you can overwrite the individual colors for use with dark scheme.

theme-settings-color-dark-scheme

Colors → POWER → Dark Scheme → Background

dark-scheme-background

Colors → POWER → Dark Scheme → Text / Titles

Additional customization can be made for Titles within the modules. Text can also be changed in the rich text editor.

dark-scheme-text-titles

Colors → POWER → Dark Scheme → Link

Link settings are for plain text links only.

dark-scheme-link

Colors → POWER → Dark Scheme → Forms

The overwrites for Form colors were added by customer request, if there is an additional form property you would like to change from the default we're happy to help make the change via CSS and can include additional settings in a future release.

dark-scheme-forms

Colors → POWER → Dark Scheme → Lists

The shape of the bullet point can be defined under Styling → Lists.

dark-scheme-lists

Colors → POWER → Boxed Elements

This color applies to all of the rectangular-shaped content elements used in various modules, such as the Image Boxes and Accordions.

color-boxed-elements

Colors → POWER → CTAs

color-CTAs

Modifying the colors for CTAs is best done using the Setup Guide template which includes each CTA style shown on light and dark schemes.

cta-styles

Colors → POWER → Navigation

color-navigation

Colors → POWER → Blog

Option to change the color for the background on the Blog Listing, Blog Post, and Blog Author templates/pages.

color-blog

Colors → HubSpot Default

These colors are applied to the default modules included with HubSpot, found in the Page Editor under "Common Modules" below the POWER theme modules.

color-hubspot-default

Colors → HubSpot Default → HTML

Option to change the Site Background, the part of your website visible outside of the page contents when not set to full width.

color-hubspot-default-html

Colors → HubSpot Default → HubSpot Forms Module

These colors are applied to the default form module included with HubSpot and do not apply to the POWER Sec Forms module.

color-hubspot-default-forms

Colors → HubSpot Default → Submit Button

These colors are applied to the submit button for the default form module included with HubSpot and do not apply to the POWER Sec Forms module.

color-hubspot-default-form-submit-button

Fonts
Fonts

The theme is designed to use two font families, a base font and an accent font. These fonts can be configured under Basic Setup. More granular settings can be configured under Formatting.

theme-settings-fonts

Fonts → Basic Setup

In addition to setting the base and accent fonts and weights, this is where you can set font-smoothing.

Font smoothing allows you to activate anti-aliasing which makes the font appear more eye-pleasing and softer. Try out what you like more with your selected font.

fonts-basic-setup

Fonts → Basic Setup → Base Font → Font Family

The Base Font is used as the primary font across all modules in the theme. Options for Font Family can be selected from Google Fonts via the dropdown. If your brand font is not available via Google Fonts, we have provided detailed instructions to add Custom Fonts to your theme designed for someone with code experience, if that's not you or someone on your team we recommend submitting a ticket and we will happily complete the setup for you.

base-font

Fonts → Basic Setup → Base Font → Font Weights

There are a few considerations you need to make when selecting Font Weights to include in your theme:

  • Verify the font weight you have selected is available for the font family chosen, if the font library does not have the weight, it will default to the backup font-weight.
  • Don't activate more weights than you plan on using, each font weight will add to the file size of your website which impacts page load speeds.
  • Review the Fonts → Formatting settings to modify which font weights are used where, and return here to deactivate any you don't plan on using.

font-weight-1
font-weight-2

Fonts → Basic Setup → Accent Font → Font Family

The Accent Font is used for Headings, Menu, CTAs, and other accent design elements across all modules in the theme.

accent-font

Fonts → Basic Setup → Accent Font → Font Weights

The same font weight options for Base Font are available for Accent font.

Fonts → Formatting

This is where you can refine the font styling to align with your brand guidelines. If you made changes to font weights, we recommend going through these settings to verify only the fonts you intend to use are selected.

theme-settings-fonts-formatting
fonts-formatting-2

Fonts → Formatting → Heading - H1 (and subsequent sections)

Fonts can be further defined using individual settings for Headings H1, H2, H3, H4, H5, H6, Body Text, Body Text - Blog Post, Paragraph, Section Module -Intro Title, Section Module - Description, Buttons, Header elements, Footer elements, and Form elements. 

Changes can be made to switch the Font Family from Accent to Base or vice versa, Font Size, Font Weight, Line Height, and Letter Spacing.

formatting-heading-h1

Fonts → Formatting → Heading - H1 (and subsequent sections) → Overwrite for Tablet/Mobile

Additional options are provided to overwrite the default scaling of fonts for Tablet and Mobile.

formatting-overwite-tablet-mobile

Fonts → Formatting → Header

The same options to overwrite the font styles are available for the Header elements, including Top Header, Header, Hamburger, Mega Menu, and Advanced Mega Menu.

It is best to modify these settings after the Header has been configured.

theme-settings-fonts-header-with-advanced-mega-menu

Fonts → Formatting → Header → Advanced Mega Menu

The same options to overwrite the font styles are available for the Advanced Mega Menu elements, including Text, Menu Titles, Menu, and Sub Mega Menu.

It is best to modify these settings after the Advanced Mega Menu has been configured.

theme-settings-fonts-header-advanced-mega-menu

Fonts → Formatting → Footer

The same options to overwrite the font styles are available for the Footer elements, including Text, Menu Titles, Menu, and Footer Legal - Text.

It is best to modify these settings after the Footer has been configured.

formatting-footer

Fonts → Formatting → Form

The same options to overwrite the font styles are available for Forms, including Labels, Help Texts, Inputs, Error Texts, and Legal Consent Texts.

formatting-form

Fonts → Formatting → Uppercase

The default design for POWER theme incorporates Uppercase elements. This gives you the option to add/remove the text transformation, allowing you the flexibility to use UPPERCASE, lowercase, or Title Case by manually typing the text in the formatting desired.

formatting-fonts-uppercase

Styling
Styling

This design group provides options to modify the default POWER styling to perfect the details for your website.

theme-settings-styling-v25

Styling → Corners

The style settings for corners will define how round your buttons, inputs, dropdowns, boxes, images, and checkboxes appear.

Defining the Base Border Radius will be the base size in pixels that all other settings inherit (except checkboxes, they can't be larger than 6 pixels or they would turn into radio buttons).

theme-settings-styling-corners

Styling → Buttons → Custom Styles

In addition to the default styles used for CTAs and Buttons, you can define up to 4 custom buttons.

custom-button-styles

Once defined, each of these button styles can be selected within POWER modules and also has a corresponding CSS class that can be used in rich text editors. 

Additional Settings for CTAs and Buttons.

Screen Shot 2022-07-30 at 1.53.27 PM

Styling → Buttons → Custom Styles → Custom Button 01-04

For each custom button, you can set the style for Text, Background, and Border.

For each of these options, you will have the option to configure the regular state and hover state for the button.

custom-button-style-settings

Styling → Buttons → Custom Styles → Custom Button 01-04 → Text

custom-button-text-colors

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Background Style

Custom Buttons can have a transparent background (none) or color, gradient, or glassmorphism background style.

custom-button-background-styles

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Background Hover Style

On hover, custom buttons can change to a color or gradient.

custom-button-background-hover-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Color

custom-button-background-color-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Gradient

custom-button-gradient-background-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Gradient → Background Gradient Direction

background-gradient-direction

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Glassmorphism

custom-button-glassmorphism-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Border

custom-button-border

border-style-colors

Styling → Buttons → Custom Styles → Custom Button 01-04 → Border → Border Style

border-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Border → Border Hover Style

Inherit will retain the settings for the regular state, or you can select another color.

border-hover-style

Styling → Menu Tags

The style settings for menu tags will define how menu tags and the pulsing dot appear.

There are four menu tags that can be configured as well as a Dot.

theme-settings-styling-menu-tags

Styling → Menu Tags → Menu Tag 01-04

For each menu tag, you can set the style for Text and Background colors.

menu-tag-settings

Styling → Menu Tags → Dot

For the dot, you can set color and visibility.

dot-settings

Styling → Menu Tags → Show behind Text?

The default for the dot is to be in the upper left of the menu item and when it pulses it is above the text.

Check the box for the option to show the dot behind the text instead.

Styling → Forms

Select the Input Field Style for your default form settings. This will be applied to all POWER Sec Form Modules, where you can override the default for individual modules/pages.

Preview Form Styles.

styling-forms-settings

Styling → Sliders

Modify the default styling for bullet points used for sliders used in the POWER Sec Images and POWER Sec Testimonials modules.

styling-sliders-settings

Styling → Sliders → Bullet Points

styling-slider-bullet-points

Styling → Slides → Bullet Points → Inactive Bullet Points

Inactive Bullet Points are the slides not currently shown.

slider-inactive-bullet-points

Styling → Sliders → Bullet Points → Active Bullet Points

The Active Bullet Point is for the slide currently visible/active.

slider-active-bullet-points

Styling → Lists → Bullet Points 

Modify the default styling for bullet points for unordered lists across all modules and rich text fields.

styling-lists-bullet-points-shape

There are 8 choices available for bullet point styles:

  1. Arrow
    bullet-point-style-arrow
  2. Arrow Thin
    bullet-point-style-arrow-thin
  3. Checkmark
    bullet-point-style-checkmark
  4. Checkmark Thin
    bullet-point-style-checkmark-thin
  5. Circle
    bullet-point-style-circle
  6. Circle Outline
    bullet-point-style-cirlce-outline
  7. Line
    bullet-point-style-line
  8. Square
    bullet-point-style-square
Styling → Text Highlights

The style settings for text highlights will define how the mark and em HTML tags appear.

There are two styles that can be configured, one for mark and one for em.

theme-settings-text-highlights

Styling → Text Highlights → Style 01

Style 01 applies to the mark HTML tag.

Check the box to Activate Style (otherwise the default HubSpot definition applies).

activate-style01

Styling → Text Highlights → Style 01 → Text Emphasis → Font Family

Inherit uses the pre-configured font family of the text element.

Option to change to Base or Accent font.

Styling → Text Highlights → Style 01 → Text Emphasis → Font Weight

Inherit uses the pre-configured font weight of the text element.

Option to change the font weight, make sure only font weights included in your font settings are chosen.

Styling → Text Highlights → Style 01 → Text Emphasis → Text Case

Inherit uses the pre-configured case of the parent text element.

Option to change the capitalization to one of Uppercase, Lowercase, or Capitalize.

Styling → Text Highlights → Style 01 → Text Emphasis → Italic

Option to change the text to Italic.

Styling → Text Highlights → Style 01 → Text Emphasis → Text Style

Inherit uses the pre-configured color of the text element.

Option to change the text to a specific color for Light and Dark Schemes.

text-highlight-text-style

Styling → Text Highlights → Style 01 → Underline/Mark

Option to Activate Underline/Mark.

underline-settings

Styling → Text Highlights → Style 01 → Underline/Mark → Height

Defines the height of the underline/mark; how tall you want it to be relative to the font size.

Styling → Text Highlights → Style 01 → Underline/Mark → Horizontal Padding

Defines the horizontal padding in ems.

The unit em is a dynamic unit that takes the font size into account. 1em = same as font size of the text. 0.5em = half the font-size of the text, etc.

Styling → Text Highlights → Style 01 → Underline/Mark → Underline/Mark Style

Choice of Color or Gradient.

Option to define the color and/or gradient for light and dark scheme separately.

Styling → Text Highlights → Style 02

Style 02 applies to the em HTML tag.

Check the box to Activate Style (otherwise the default HubSpot definition applies).

activate-style02

Style 02 has the same settings and options as Style 01.

Effects
Effects

This design group provides options to modify the effects used within POWER theme.

theme-settings-styling-effects

Effects → 3D Box Effect

Uncheck the box to deactivate the 3D effect when hovering over a boxed element.

Effects → Button Hover Effect - Slide Up

Uncheck the box to deactivate the Slide Up hover effect when hovering over a button.

Blog
Blog

This design group provides options to modify the blog settings for POWER theme.

blog-theme-settings

Blog → Blog Listing

Modify the default settings for the Blog Listing Template in POWER theme.

blog-listing-theme-settings
blog-listing-truncate-settings

Checkbox options for:

  • Show Filter Bar: Shows/Hides the bar containing the blog categories/tags
  • Show Blog Post Author?: Displays the author name in the blog post previews, if activated.
  • Show Blog Post Date?: Display the date in the blog post preview, if activated.
  • Show Blog Post Reading Time?: Display the estimated (internally calculated) reading time of the blog post, depending on the length of the blog post content.
  • Show Blog Post Summary?: Displays the excerpt text on the listing page.
  • Truncate Summary: limits the length of the excerpt text to a given number.
Blog → Blog Listing → Filter Layout

Choice of List or Dropdown.

blog-listing-filter-layout

Blog → Blog Listing → Layout

Choice of One, Two, or Three Columns (desktop layout) - columns adjust automatically based on screen size.

blog-column-layout-settings

Blog → Blog Listing → Get Summary From

The summary displayed can come from the beginning of the blog post content (above the read more separator) or from the blog post meta description.

blog-summary-settings

Blog → Blog Listing → Pagination

The Load More Button allows for a set number of posts to display followed by a button for the user to click to see additional posts. Standard Pagination creates a series of pages the user can click through to see additional posts.

The standard pagination method is with arrows compared to the more modern way of loading additional blog posts by clicking on a “load more” button.

Screen Shot 2022-07-30 at 2.03.57 PM

Blog → Blog Post

Option to show/hide the navigation bar and/or related posts on the blog post template for all blog post pages.

blog-post-theme-settings

  • Show Navigation Bar: Shows/Hides the navigation bar that adds links to the blog overview/listing and the previous and next posts.
  • Show Related Posts: Shows/Hides the section suggesting related blog posts. The section is at the end of the blog post.
Layout
Layout

theme-settings-layout

Layout → Header Menu Position

Depending on your logo size and the number of items in the header navigation, you may need to adjust the position of the menu which can be done here using a percentage of the page width.

The shift value is a percentage value and controls the padding starting from the left of the logo.

Layout → Content Width

The default Content Width is set to 1200 px for desktop devices.

Layout → Section Paddings

Within Section Modules, you have a choice to adjust the padding for the top and bottom of the section.

All POWER section modules have a standard top and bottom padding that is optimized to have the same height and visual consistency across all section modules.

In addition to Standard (theme default) and None, you can configure a Small, Medium, and Large padding based on your design guidelines to easily adjust the padding from module to module and page to page and maintain consistency.

This global setting also lets you easily adjust the settings across all section modules and pages in one location.

Responsiveness
Responsiveness

This design group provides options to modify the responsiveness configurations to further refine the UX on tablet and mobile.

theme-settings-responsiveness

Responsiveness → Header

Adjust the breakpoint for where the menu switches to the burger menu for tablet/mobile.

If your header is using burger only, this doesn't apply.

header-menu-breakpoint

Responsiveness → Spacing

Modify the horizontal padding and reduce spacing on mobile.

responsive-spacing

  • Horizontal Padding: This controls the horizontal padding left and right of your content on smaller desktop and tablet devices as well as on mobile.
  • Mobile – Reduce Spacing: All POWER modules reduce some of their paddings/margins for mobile devices. This factor controls how much those paddings/margins will be reduced by a percentage value.
Responsiveness → Font Sizes

Font sizes in POWER theme are designed to be responsive based on a percentage of the desktop size.

If you are using a very small font size on desktop, the minimum font size on mobile prevents it from becoming illegible.

responsive-font-sizes

  • Mobile – Reduce Font Size: All POWER modules reduce most of their font sizes for mobile devices. This factor controls how much those font sizes will be reduced by a percentage value.
  • Mobile – Minimum Font Size: Here you can define the font size that should be used as the minimum value in case the reduction would lead to an even smaller value than this one.
Performance
Performance

Includes the option to turn off the Parallax effect on mobile.

theme-settings-performance-v26-SuperAdmin

Turning off the parallax on mobile reduces the calculations in the background, which can improve the scrolling performance on slower mobile phones.

Performance → Responsive Image Variants

Images are lazy-loaded and dynamically exchanged depending on device width and pixel density.

POWER theme automatically adjusts the size of the images based on device width, adjustments to the various sizes can be made here.

performance-image-variants-settings

The image widths you define here will be leveraged on respective device widths.

Given that your image was uploaded with a higher resolution, those smaller images will be automatically created and the ideal sizes will be used for the different devices.

You could reduce the image widths here, which would lead to smaller file sizes and faster page loads, but also to poorer image quality.

Generally, you should never upload images that are bigger than 4000 pixels in width or in height because for those the resize algorithm will not work and images will be loaded that are too big and will slow down your site.

Performance → Retina Image Scaling

Images are automatically scaled for retina screens by a factor of 1.5 and can be adjusted here (you'll account for this when you create your images).

performance-retina-image-scaling

EXAMPLE

Let’s say your image should display 640 pixels wide on your site.

This is the size you would typically use to create the image to minimize the impact on page speed and keep file sizes down.

With Retina displays your site visitors have a higher pixel density so you’ll want to use an image that’s 1280 pixels wide, which is what’s referred to as “2x”.

Essentially, you are doubling the pixel density by using an image that’s double the size.

The graphic will still display on the website at 640 pixels wide for non-retina screens.

Based on extensive testing, we recommend using a factor of 1.5 (not 2) to achieve a better balance between image quality and page load times.

Performance → Videos

Improve performance for pages with video modules accessed via YouTube.

performance-videos

Performance → Videos → Pause Video - Video Focus

Pauses the video when it is not visible.

Performance → Videos → Pause Video - Window Focus

Pauses the video, when the window loose focus (switch tab, switch browser window).

Performance → Videos → Disable Video on Mobile

Disables the video on mobile devices.

Performance → Super Admin → jQuery

For v26+, Support for jQuery and Enable jQuery Debug Tools can be unchecked.

Updating these settings without following the guidelines outlined for deactivating jQuery can cause your website to break.

remove-jQuery-support-power-theme

SEO
SEO → Schema.org

Option to disable Schema (recommended only if you plan to create your own).

This additional information can be leveraged by search engines or other applications.

theme-settings-seo-schema

SEO → Schema.org → Basic Schema

Company name, logo, address, language from Settings → Account Defaults → Branding as well as Email and Phone configured in the POWER header.

SEO → Schema.org → Blog Post Schema

Headline, image, author, publish date, abstract, text, url, publisher, wordcount, tags.

Animation
Animation

Modify the global settings for Animation on Scroll, including the option to disable globally or based on device type.

Animation on Scroll (AOS) is an effect on a website where the elements of the page animate as the user scrolls down the page. 

For the animation on scroll effect used in the POWER theme, we used the amazing javascript library of michalsnik.

Check out the demo page of aos to see all animation types in action.

theme-settings-animation-on-scroll

Animation → Disable Animation on...

disable-animation-theme-settings

Animation → Default Animation Type
  • Fade
  • Fade Up
  • Fade Down
  • Fade Left
  • Fade Right
  • Fade Up Right
  • Fade Up Left
  • Fade Down Right
  • Fade Down Left
  • Flip Up
  • Flip Down
  • Flip Left
  • Flip Right
  • Slide Up
  • Slide Down
  • Slide Left
  • Slide Right
  • Zoom In
  • Zoom In Up
  • Zoom In Down
  • Zoom In Left
  • Zoom In Right
  • Zoom Out
  • Zoom Out Up
  • Zoom Out Down
  • Zoom Out Left
  • Zoom Out Right

Additional Animation settings:

  • Default Delay: The animation delay in ms. Choose a value between 0 and 3000 (3 seconds)
  • Default Offset: Animations are triggered sooner or later. The unit for the offset in pixels. 
  • Default Duration: The duration of the animation in ms. 

After configuring the global animation settings, you will have the option to set the animation parameters for the modules and elements within the modules individually from the module settings. 

Helpful Link: How to incorporate animation on your website with POWER

Video Tutorial

Next Steps

Now that your theme has taken on your brand identity, you'll start building the navigation for your menus.

Next up:

NEVER MISS A POWER UPDATE

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