Content Section

Along with the Centered wrapper this is the most common component in Act2. It is basically a container with a pre-defined space (100px at the top and 100px at the bottom) and some special properties. You will mostly use this to split your content vertically in full-width sections along your page.

Here is a quick video demonstrating how to add two Content Sections in your template:

Of course, you can speed up this process by using our Chrome extension, Coscopy, to copy groups and modules in HubSpot drag-and-drop templates.

Pre-Defined Background Color

There are a few pre-defined CSS classes that you can use to add a background color to your Content Section that's consistent with your theme:

CSS Class Sample (with the default colors)
bg-light
bg-dark
bg-theme
bg-white

Example:

Act2 Template Builder Content Section Edit CSS

Act2 Template Builder Content Section Add CSS Class

Note: These classes are not tied to the Content Section component, so they can be used with other elements too, such as a simple wrapper or Content Card.

Gradient Background

You can also add one of these classes for a beautiful gradient background.

CSS Class Sample
bg-g1
bg-g2
bg-g3
bg-g4
bg-g5
bg-g6
bg-g7
bg-g8
bg-g9
bg-g10
bg-g11
bg-g12
Note: These classes are not tied to the Content Section component, so they can be used with other elements too, such as a simple wrapper or Content Card.

Custom Background Color

For a custom background color you can easily add an inline style. Example:

background-color: #bbe3b5;

Act2 Template Builder Content Section Custom Background Color

Background Image

If you want to add a background image to your Content Section just add an Image module at the top of your Content Section with the bg-img class:

Act2 Template Builder Content Section Background Image Module

Act2 Template Builder Content Section Background Image Edit CSS

Act2 Template Builder Content Section Background Image CSS Class

Then you can edit that module and choose your image.

Act2 Content Section Background Image Edit Options

Act2 Content Section Background Image Replace Image

Because it is applied as background this module is not visible in the page editor, so you need to find it in the Edit modules sidebar (a good reason to choose a recognizable name for your module):

Act2 Page Editor Edit Modules Button

Act2 Page Editor Find Module

Parallax Background

For a parallax effect add the bg-parallax class to your image module described above.

Act2 Template Builder Content Section Background Image Parallax

Video Background

If you want to add a video background to your Content Section add a One Line of Text and an Image module at the top of your group:

Act2 Template Builder Video Background Modules

We will name them Video URL and Background Image:

Act2 Template Builder Video Background Edit Label

Act2 Template Builder Video Background Name

Act2 Template Builder Video Background Modules Renamed

Then add this class to your Video URL module: video-url

Act2 Template Builder Video URL CSS

Act2 Template Builder Video URL Class

And this class to your Background Image module: bg-img

Act2 Template Builder Video Background Image Edit CSS

Act2 Template Builder Video Background Image CSS Class

Note: Parallax background is not supported with the Video Background.

Now you can go to File Manager and upload your video. It must be MP4 format and we recommend a file smaller than 5MB.

Copy the file URL and add it to your Video URL module:

Act2 File Manager Copy Video URL

Act2 Template Builder Video URL Edit Options

Act2 Template Builder Video URL Path

You will also need an image with the first frame of your video to show until your video starts playing and as a backup on older browsers that don't support videos playing in background.

You need to add this image on the Background Image module we previously described.

Act2 Template Builder Video BG Image Edit Options

Act2 Template Builder Video Bg Replace Img

Because they are applied as backgrounds these modules are not visible in the page editor, so you need to find them in the Edit modules sidebar (a good reason to choose recognizable names for your modules):

Act2 Page Editor Edit Modules Button

Transparent Overlay

Sometimes you would want to add a transparent overlay to your Content Section, especially if you applied a background image or video background, so your text can be a bit more visible.

Act2 Overlay Sample

For that you would need to add two classes to your Content Section group:

Act2 Template Builder Content Section Edit CSS

1. Overlay color

One that specifies the color of your overlay:

Act2 Template Builder Overlay Dark CSS Class

And these are the available options:

CSS Class Sample (with the default theme colors)
overlay-dark
overlay-theme
overlay-light
overlay-white
overlay-g1
overlay-g2
overlay-g3
overlay-g4
overlay-g5
overlay-g6
overlay-g7
overlay-g8
overlay-g9
overlay-g10
overlay-g11
overlay-g12

2. Overlay opacity

And another class that specifies the opacity of the overlay:

Act2 Template Builder Overlay 50 CSS Class

You would need to choose one from these:

CSS Class Description
overlay-0 The overlay is fully transparent
overlay-10 10% opacity
overlay-20 20% opacity
overlay-30 30% opacity
overlay-40 40% opacity
overlay-50 50% opacity
overlay-60 60% opacity
overlay-70 70% opacity
overlay-80 80% opacity
overlay-90 90% opacity
overlay-95 95% opacity, the overlay is almost opaque
overlay-98 95% opacity, the overlay is almost opaque, background is barely visible
overlay-100 The overlay is fully opaque

White Content

Act2 White Content Sample

Add this class white-content to the groups or modules where you want your content to be white. For example, on those sections with background images or videos.

Sometimes the best way is to apply this class individually to those modules or groups where you want the content to be white, instead of the entire section, because it may contain elements where white content is not necessary, like Card Boxes, Content Cards, etc.

Act2 Template Builder Rich Text Edit CSS

Act2 Template Builder Rich Text CSS Class

Full-Screen Section

Use this class full-vh to make your section at least as tall as the browser window.

Act2 Template Builder Content Section Edit CSS

Act2 Template Builder Content Section Full Viewport Height CSS Class

You can also add this complementary class minus-header if you want to make it just as tall as the browser window, minus the height of the default static header:

Act2 Full Viewport Height Minus Header Sample

Act2 Template Builder Content Section Full VH Minus Header CSS Classes

Vertically Center Content

Act2 Vertical Center Sample

In addition to the Full-Screen Section above, if you also want to vertically center the content inside your section please follow the steps:

Add this class vcenter-inner to your Content Section:

Act2 Template Builder Content Section Edit CSS

Act2 Template Builder Content Section Full Viewport Height Vertical Center Inner CSS Class

Then in the same window add the following code to the Custom Wrapping HTML box:

<div class="vcenter-outer">
    {{ html }}
</div>

Act2 Template Builder Content Section Full Viewport Height Vertical Center Wrapping

Important Notes:

This doesn't work with divided groups, because it will mess up with the grid system in HubSpot. If by design your Content Section where you want to vertically center the content is not full-width (that row has already been splitted) you can group it one more time such that it will become a full-width group (not divided) so you can apply the vcenter class and wrapper.

(FYI, we needed this elaborate method in order to support IE11, which doesn't play very well with CSS flexbox)

Scroll Next

Add one of the classes below to a Content Section to include an arrow that, when clicked, will scroll your page to the next Content Section. If it doesn't exist, the arrow will not appear.

CSS Class Sample
scroll-next-theme-dot Act2 Scroll Next Theme Dot Sample
scroll-next-theme-circle Act2 Scroll Next Theme Circle Sample
scroll-next-theme-disc Act2 Scroll Next Theme Disc Sample
scroll-next-dark-dot Act2 Scroll Next Dark Dot Sample
scroll-next-dark-circle Act2 Scroll Next Dark Circle Sample
scroll-next-dark-disc Act2 Scroll Next Dark Disc Sample
scroll-next-white-dot Act2 Scroll Next White Dot Sample
scroll-next-white-circle Act2 Scroll Next White Circle Sample
scroll-next-white-disc Act2 Scroll Next White Disc Sample

Act2 Template Builder Content Section Edit CSS

Act2 Template Builder Content Section Scroll Next CSS Class

Using Act2.1 with the new Design Tools? Read this documentation.