TABLE OF CONTENTS
Page Speed Impact
Setup Instructions
Module Options
Page Speed Impact
Medium - The hero module itself will not have a significant impact on page speed.
Exceptions - Additional impact if images, videos and other content are added to the hero module. Enabling sliders on your module will add additional code will impact your page speed.
Take a look at our performance guide to get your website running its best!
Setup Instructions
How to Set Up the POWER Hero Module
Content → PWR Sec Hero
The PWR hero module is designed to give you a full width hero banner, usually used at the top of a page as an above the fold intro to your website or page. This provides options to add a distinct CTA or slider to quickly capture attention at the top of your page.
Module Options
These settings are available for the POWER sec hero module.
Building the Hero Module
Title
This will set the main title of your module.
Typewriter Effect?
Checking this will add a typewriter style animation to the text below your title. This can be enabled for a single panel hero module, this will not be applied if you enable a slider on your hero module.
Title - Header Type
This will set the HTML markup of your header (h1, h2, h3 etc) and by default it will style your header based on your theme settings. You can set the header here with a different styling through your module's style settings if you wish.
Description
A brief description of the information you will place within your logo content sections.
Button Type
Choice between using a standard button from your theme settings style or a HubSpot CTA.
Buttons(s)
Choose the button(s) you wish to display on your hero modules.
Basic information
Add a list of basic information to your module. Basic information as small pieces of text with an icon displayed on your hero module.
Search Input
Add a search input to your hero module to search across your website. Information on what this searches can be set within your search settings.
Search Settings → Show search suggestions
Set your search box to auto show suggestions when a visitor is searching.
Search Settings → Limit
Limit the results to a specific number of pages.
Search Settings → Limit → Search in Properties
Choose the properties of your pages you wish to search by. This includes:
Title, Meta description, HTML, Author Name, Author Handle and Tag.
Search Settings → Limit → Search in Page Types
Choose the type of HubSpot pages you wish to search through, choice between website pages, blog listings, blog posts, landing pages and Knowledgebase articles.
Search Settings → Cross domain search
Search across multiple domains.
Search Settings → Search Domains
Subdomain.domain.extension, e.g. www.maka-agency.com. The default domain should be added as well.
Search Settings → Cross domain search
Search across multiple domains, subdomain.domain.extension, e.g. www.maka-agency.com. The default domain should be added as well.
Search Settings → Specific Blogs
Choose specific blogs from your HubSpot blogs that you want to search across.
Search Settings → Language
Choose the language you wish your search to be in. This parameter should obey the ISO639-1 format (e.g. es for Spanish). Default: All languages
Hero Slider → Use Slider
Enable to turn your hero module into a hero slider. If enabled only the content of your slides will be displayed, any content set outside of the slides will not display and the typewriter effect cannot be used.
Hero Slider → Slides
Set your individual slides for your hero slider.
Hero Slider → Settings
For more information on our slider settings see our module slider settings article.
Layout → Height
Choice between Full height, Large (fixed size), regular (fixed size), Small (fixed size), Extra small (fixed size) or a dynamic height based on the content within your hero module.
Layout → Intro Width
Set the intro text to be the full width of your content or not.
Layout → Content full width
Enable to have your content span the full width of the screen.
Layout → Centered (horizontal alignment)
Center your content horizontally within the module.
Layout → Boxed Section
This will set your module to have a boxed section layout, offering some additional options in the positioning of your module. For more information on boxed sections see our boxed sections article.
Layout → Margin Top/Bottom
Add additional margins to the top and bottom of your modules. Margins Left & Right will be depending on your boxed sections and previously set layout options.
Styling your hero module
Style → Title Extra Large & Description Large
Set your title or descriptions to be extra large and bolded. This is only suited to a few words and is not recommended if you have more than 3 or 4 words within your titles.
Style → Color Scheme
Choose between your light and dark color scheme defined in your theme settings.
Style → Title Size
Set the style from your theme settings that your title will inherit. This will not affect the HTML markup of your title so will not affect any SEO on your title. This will just cause the title to inherit the styles for this title set out within your theme settings.
Style → Title Style
Choose between default (inherited from your theme settings), a specific color, or create your own gradient.
Style → Primary & Secondary Button/CTA Style
Choose a pre-set style of button or CTA, or choose one of your custom button styles set within your theme settings.
Style → CTA Size
Choice of Long, Small, Large or Regular.
Style → Form Style
By default is set to inherit, which will inherit form styles from your theme settings. You can choose to change the style for a form within this hero module only from here.
Style → Section Shadow
Add a shadow box to your hero module to create a 3d effect.
Style → Background
Overwrite the default background with a custom colour, image or video for your hero module.
Style → Shape Divider
Set a specific shape to be used between the divide of this module and your next one.
Animation
Control the animations of your module, for more information see the website animation article.
Anchor Link ID/Custom Class
Set a specific anchor link for this module or a custom class to target this module within your child.css stylessheet.