TABLE OF CONTENTS
Page Speed Impact
Setup Instructions
Module Options
Page Speed Impact
Medium - The marquee module itself will not have a significant impact on page speed.
Exceptions - Additional impact if images, videos, CTAs and other content are added to the marquee module.
Take a look at our performance guide to get your website running its best!
Setup Instructions
How to Set Up the POWER Marquee Module
Content → PWR Sec Marquee
The PWR marquee module is designed to give you an engaging, animated banner that scrolls across your page to make your message prominent and immediately draw a visitors eyes to your message!
Module Options
These settings are available for the POWER sec marquee module.
Building the Marquee Module
Marquee items
Add the items you wish to display in you Marquee here. Each marquee item will be horizontally aligned and scrolled within your module.
Marquee Items → Item Variant
Choice between text, icon, image, button or CTA.
Marquee Items → Content, Icon, Image, Button or CTA.
Choose the content you wish to display in this element of your marquee module. For text you can enter the text you wish displayed here. Enter text here for a text item, an image for an image item, a button or CTA for the button/CTA variants or for an icon variant choose an icon from HubSpot's free fontawesome library, or add your own fontawesome pro icon.
Marquee Items → Link?
Check this to make your marquee item a link. Choose to link to an external url, one of your HubSpot pages, a HubSpot hosted file, an email address, a phone number, a pop-up HubSpot CTA, a payment link or one of your blog posts.
Marquee Items → Aria Label
Add an aria label to your content to ensure accessibility within your web page.
Marquee Settings
Choose the direction of your scroll, enable the functionality to pause the scroll on hover, the scroll speed of your marquee and how many duplicates of your marquee items will load on page load.
To function, the marquee module will need to load duplicates of your marquee items, this enables the infinite scroll. After page load the amount of duplicates will be automatically optimised to help minimise the amount of duplicates, however here you can manually set how many duplicates you wish to have immediately upon page load.
Layout → Space Between Items
Set the space between each marquee item in pixels.
Layout → Content full width
Enable to have your content span the full width of the screen.
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 & Padding Top/Bottom
Add additional margins or padding to the top and bottom of your modules. Margins Left & Right will be depending on your boxed sections and previously set layout options, along with your spacing settings set in your theme settings.
Styling your hero module
Style → Color Scheme
Choose between your light and dark color scheme defined in your theme settings.
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 → Horizontal Content Fade
Enable a fade on the right and left of the module to fade in and out your marquee items.
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.
Transformation
Set your marquee module to transform to be off center. This will have your module offset to take up space over the module above and below this.
Transformation → Rotate
Choose the amount of degrees to rotate your module.
Transformation → Scale
Scale your marquee module. This will make your module larger or smaller depending on the scale. 100% will ensure your module takes up the full width set within your module settings. 50% will force your module to be 50% of it's set width to offset any specific transformations.
Transformation → Translate X/Y
Offset the X (horizontal) or Y (Vertical) positioning of your module.
Transformation → Width
Increase or decrease the width or your module to ensure your positioning offsets doesn't negatively affect your styling.
Transformation → Overwrite Z-Index
The Z-index will set how your module "sits on top of" other modules. A lower z-index will force a module to appear "underneath" a module with a higher z-index. If you're seeing issues where an element of your Marquee module is being covered by another module you can overwrite this here.
Transformation → Overwrite container height
Set a specific height for the container of your module. This will only affect active marquees and should only be used for specific customisation situations.
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.