Content Section

Along with the Centered wrapper this is the most common component in Act2. It is basically a container with a pre-defined vertical space and some special properties. You will mostly use this to split your page vertically in full-width sections.

This can be a group with the content-section class:

Act21 Design Tools Content Section CSS Class

Watch this video to see how easy is to add Content Sections with your custom layout:

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 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

To set a background image on your section add an Image module at the top of your Content Section with the bg-img class:

Act2 Template Builder Content Section Background Image CSS Class

Then you can choose your background image:

Act21 Content Section Replace Background Image

Because it's applied on the background, this module is not visible in the page editor, so you would need to find it in the modules sidebar on the left to change the default image - a good reason to choose a recognizable name for your module:

Act2 Page Editor Edit Background Image 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

Note: Consecutive parallax sections are unesthetic and not currently possible, and they will not be displayed correctly. There must be an opaque section between them to cover the overlapping edges of the parallax element.

Video Background

To set a video background on your section add a One Line of Text module with the video-url class and an Image module with the bg-img class at the top of your Content Section:

Act2 Template Builder Video URL CSS

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 Path

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

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

Act2 Template Builder Video Bg Replace Img

Because they are applied on the background, these modules are not visible in the page editor, so you would need to find them in the modules sidebar on the left to change the default image and video URL - 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 set 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 more classes to your Content Section group:

1. Overlay color

Which specifies the color of your overlay:

Act2 Template Builder Overlay Dark CSS Class

These are all 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

Which specifies the opacity of the overlay:

Act2 Template Builder Overlay 50 CSS Class

You would need to choose one of 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 need white content. 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 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 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 Full Viewport Height Vertical Center Inner CSS Class

Then add the following code to the 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 Scroll Next CSS Class

Using Act2 with the old Design Manager? Read this documentation.