Customized Two Column

Overview

This Customized Two Column section is designed to give content creators complete flexibility when building landing pages, blogs, or website pages in HubSpot. The module allows you to display text content on one side and an image or video on the other, making it ideal for storytelling, product highlights, service descriptions, feature showcases, or any scenario where visuals enhance your message.
Built for performance and easy editing, it maintains clean layout structure across devices and offers intuitive controls for marketers—no coding required.

Key Features

1. Flexible Two-Column Layout

• Left column dedicated to rich text (headings, paragraphs, CTA buttons, bullet points).

• Right column supports both image and video content.

• And you have the flexibility to change the direction of column's (left column - image/video & right column - text or vice versa).

2. Media Choice Options

• Toggle between Image or Video.

• Supports YouTube, Vimeo, and HubSpot-hosted videos.

• Image field includes alt text for SEO and accessibility.

3. Responsive by Default

• Automatically adjusts column stacking for mobile devices.

• Ensures optimal readability and media display at all screen sizes.

4. Customizable Styling

• Adjustable spacing (padding & margin).

• Optional background colors or full-width styles.

• Alignment controls for text and media.

5. Easy Content Editing

• Drag-and-drop enabled for any page.

• No coding required for page editors.

• Simple, intuitive media replacement controls.

Customization Options

Content Controls

• Rich text editor for headings, body copy, lists, and CTAs.

• Image picker with alt-text field.

• Video field with URL or file selection.

Layout Controls

• Choose media position: Left or Right.

• Adjust column width ratio (50/50, 60/40, 40/60).

• Control vertical alignment (top / middle / bottom).

Style Controls

• Background color or image.

• Padding and spacing options.

• Border radius and shadow options for images or video embeds.

How to Use

1. Add module to your page
   Drag the “Customized Two Column” module into your HubSpot page layout.

2. Enter your text content
   Use the rich text editor to add headings, descriptions, and optional call-to-action buttons.

3. Choose your media type
   Select Image or Video from the media type dropdown.

4. Upload or embed your media

   • Upload an image or paste a video URL.

   • Add alt text (recommended for SEO).

5. Adjust layout & styling

   • Decide whether text appears on the left or right.

   • Adjust column widths, spacing, and background if needed.

6. Publish your page
   Your responsive two-column section is ready to go live.