2 Column

BetterUp's 2 column module is a versatile module for including a two column section in your content. This can either be two columns of text, or two columns of alternating content. When alternating content is selected, each side of the module can be set independently.

Usually, each column under this module takes up 50% of the available space. Exceptions to this are:

• A video column - a video column will take up 70% of the available space, and the other column will take up 30%. This is to retain usual video aspect ratios.
• A form column - a form column in a full width module will take up 30% of the available space, and the other column will take up 70%. This is to prevent the form from being too wide, and therefore difficult to read.
  • Note that a form column in a full bleed module will take up 50% of the module.

Fields

• 
  Section Width

  See section width.

• 
  Module Spacing

  See module spacing.

• 
  Module Content

  Choose the content of your module. Options are:

  • Two Column Text
  • Alternating Content - set each column independently
• 
  Background

  See background. This field applies to the background of the content block as a whole, not each individual column. 

• 
  Text Content

  Appears if  "Two Column Text" is selected under "Module Content". Holds all the text fields for the module.

• 
  Eyebrow

  Appears if  "Two Column Text" is selected under "Module Content", and appears under "Text Content". Add an eyebrow to your module. The eyebrow will be in all caps, and be smaller text above the heading. Note that eyebrows should be short - just a few words, and not a full sentence.
  
  

• 
  Heading

  See heading. Appears if  "Two Column Text" is selected under "Module Content", and appears under "Text Content".

• 
  Description

  Appears if  "Two Column Text" is selected under "Module Content", and appears under "Text Content". The body copy for your text content.

• 
  Description Size

  Appears if  "Two Column Text" is selected under "Module Content", and appears under "Text Content". Choose how large the description content should be.

  Options are:

  • Small
  • Normal
  • Large
• 
  Column

  Appears if  "Alternating Content" is selected under "Module Content". Will hold the content options for each column. The column on top will appear on the left - you can click & drag to redorder the two columns here.

  As this is a 2 column module, there is a maximum of 2 items that can be added here.

• 
  Column Content

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under "Column".

  Select the content type for this column. Options are:

  • Image
  • Text
  • Quote
  • Video
  • Text with stats
  • Text with bullets
  • Form
• 
  Column Content - Image

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Image is selected as the column content type.

  Select an image to add to your module. The image will take up the full background of this half of the module. The middle of the image is displayed, so content around the edge of your image might not appear on all screen sizes.

• 
  Column Content - Content

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text, Stats, Bullets, Quote, or Form is selected as the column content type.
• 
  Column Content - Background

  See background.Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text, Stats, Bullets, Quote, or Form is selected as the column content type. Is further nested within the "Content" dropdown.

  Will apply a background to this column of the module.

• 
  Column Content - Eyebrow

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text, Stats, Bullets, Quote, or Form is selected as the column content type. Is further nested within the "Content" dropdown.

  Add an eyebrow to this half of your module. The eyebrow will be in all caps, and be smaller text above the heading. Note that eyebrows should be short - just a few words, and not a full sentence.

• 
  Column Content - Heading

  See heading. Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text, Stats, Bullets, Quote, or Form is selected as the column content type. Is further nested within the "Content" dropdown.

  This column is a Quote, the heading will be the quote itself, and quotation marks will be added automatically.

• 
  Column Content - Attribution

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Quote is selected as the column content type. Is further nested within the "Content" dropdown.

  Add an attribution to your quote. Note that a "-" will be added automatically.

• 
  Column Content - Description

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text, Stats, Bullets, or Form is selected as the column content type. Is further nested within the "Content" dropdown.

• 
  Column Content - Description Size

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text, Stats, or Bullets is selected as the column content type. Is further nested within the "Content" dropdown.

  Choose how large the description content should be.

  Options are:

  • Small
  • Normal
  • Large
• 
  Column Content - Configure CTAs

  See CTA. Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text, Stats, or  Bullets is selected as the column content type.

• 
  Column Content - Add a video preview

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Video is selected as the column content type.

  Check this box if you'd like to add a moving video preview to this column of the module. This video preview will be muted, looped, and only play on desktop.

• 
  Column Content - Video Image

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Video is selected as the column content type.

  Select an image to use as a video preview. It's recommended the image be a screengrab from your video. The middle of the image is displayed, so content around the edge of your image might not appear on all screen sizes.

  Note that a video will take up 70% of the module, not 50%, to retain usual video aspect ratios.

• 
  Column Content - Video preview

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Video is selected as the column content type. Will only appear if "Add video preview" is checked.

  Select a file for your video preview. This video preview file should be an mp4 uploaded to the HubSpot file manager, and be fairly short. A longer clip is detrimental to the load time of your page.

• 
  Column Content - Add Video CTA

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Video is selected as the column content type.

  Check this box if you'd like to add a video CTA. This is recommended, so that you can trigger a modal to play the video.

• 
  Column Content - Video CTA

  See video CTA for options. Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Video is selected as the column content type. Needs "Add a video CTA?" to be checked to appear.

• 
  Column Content - Stats

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Stats is selected as the column content type.

  Add stats to your module. Each stat supports a number and a label.

• 
  Column Content - Countup Stats

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Stats is selected as the column content type.

  Check this box to animate the stats on scroll. When the user scrolls to these stats, they'll animate up to their final number from zero. Not recommended if your module is above the fold, or if one of your numbers is less than 10.

• 
  Column Content - Bullets

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if "Text with bullets" is selected as the column content type.

  Add bullets to your column. Brings up a simple text field to add content. By default, these bullets are in an unordered list.

• 
  Column Content - Number Bullets

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Text with Bullets is selected as the column content type.

  Check this box to turn your bulleted list into a numbered list.

• 
  Column Content - Form

  Appears if  "Alternating Content" is selected under "Module Content", and within the individual item under Column if Form is selected as the column content type.

  Add a form to this side of your module. Note that forms will only take up 30% of a column, pushing the other column to 70% of the module. If you're unsure which form to add to your module, reach out to MOPs.

• 
  Add an anchor

  See Anchor.