TABLE OF CONTENTS
Page Speed Impact
Setup Instructions
Module Options
Page Speed Impact
Medium - The content splitmodule itself will not have a significant impact on page speed.
Exceptions - Additional impact if larger images or additional animations are added into your module.
Take a look at our performance guide to get your website running its best!
Setup Instructions
How to Set Up the POWER Content Split Module
Content → PWR Sec Content Split
The PWR content split module is designed to give you a full width module with an equal split of an image or a video. Giving you the choice of which side to display your content and text on and to change this on mobile devices.
Module Options
These settings are available for the POWER sec content split module.
Building the Content Split Module
Image
Choose an image to display within the content section of your module. The recommended width for this is 2000px.
Alt Text
The alt text for your image.
Video (Mp4)
If you wish to display your own video in here you can upload an mp4 file or choose from your HubSpot file manager uploaded videos.
Video (Youtube/Vimeo)
Choose a video uploaded to youtube or vimeo to display in your module.
Play Mode
Choose to loop your video or play it once.
Intro To Title
Small text to appear above your module title.
Title
This will set the main title of your 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.
Is a testimonial?
Toggle this if the text within your module is a testimonial. This will allow you to add an author name and job title to your text.
Image/Logo
Add an image or logo to be displayed above or below your text.
Social/Contact Icons
Add social or contact links to the text within your module. Choose to link to a URL, HubSpot content, File, Email Address, Phone number, Pop-up CTA, HubSpot Payment link or HubSpot blog.
Link
Add a link within your text content to link to a URL, HubSpot content, File, Email Address, Phone number, Pop-up CTA, HubSpot Payment link or HubSpot blog.
Open link in new window
Toggle to force your link to open within a new window.
Link Type
Choose to make your link no follow to stop search engine crawlers from following this link.
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.
Layout → Choose Layout
Choice between showing image/video on left or right of your module.
Layout → Flip content order on mobile
If enabled the order of your content will be swapped around within mobile devices.
Layout → Centered
Center your module within your page.
Layout → Full Width
Sets the module to be the full width or your content section within your HubSpot CMS. If you module is still not full width with this set see here.
Layout → Section Height
Set a fixed section height for your content within desktop devices.
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 → Padding & Margin Top and Bottom
Choice of Standard, None, Small, Medium, Large, or First Section with Header. Refer to your theme settings for these for more information on this sizing.
Styling your hero module
Style → Color Scheme
Choose between your light and dark color scheme defined in your theme settings.
Style → Intro Title Style Text
Choose between default (inherited from your theme settings), a specific color, or create your own gradient.
Style → Intro Title Style - Background
Choose between none, a specific color, or create your own gradient.
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 → Media Position
Set the position of your media within the module. Choice between Left, right, center, top or bottom.
Style → Media Size
Choice between "cover" to ensure your media will always cover the entire size of the media or "contain" to ensure the media is always displayed in full and never cropped.
Style → Image Dimensions on Mobile
Content Height set the image dimensions to the height of the text content for mobile view.
Image Dimensions sets the image to its original dimensions/aspect ratio.
Only works for media size cover and without video. Media size contain always shows the original image dimensions.
Style → Media Background Color
Set a background color for the media section of your module, will only display if your media is set to contain and has space to display a background. Do not select this if you are using the sections background color.
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 → 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.
Visbility
Choose to hide your module on specific screen sizes. For more information see common module information.
Standard Tex/Translation
Change the default link text within your text section.
Accessibility
Set aria labels for elements within your module to ensure compatibility with screen readers if required.
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.