<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=241066823005528&amp;ev=PageView&amp;noscript=1">

Modules

Text and media split

Text with bullet lists and buttons beside an image, SVG, HubSpot video or an embed such as YouTube.

On this page

Set up the content

  1. Content → Content: Optional Step number, eyebrow, heading and Text. Bold the first words of a bullet to create a highlighted lead-in.
  2. Content → Buttons: Up to two.
  3. Content → Media: Choose the media type and add a Caption if needed.

Choose the look

SettingOptions
Swap sides (media ↔ text) and Mobile orderMedia left or right; which part comes first on mobile
Column ratio50 / 50, Text wider, Media wider
Media frameNone, Tinted panel, Dark panel – great for product screenshots
Bullet styleCheck marks, Dots, Arrows or Default

Animation

Styles → Animation → Image animation decides how the image appears: Curtain and parallax (the default) reveals it behind a color panel and then moves it slightly slower than the page. Choose Curtain, Parallax or None for less movement.

Good to know

  • Stack several splits and alternate Swap sides for a zig-zag feature page.
  • Background, module width, spacing and alignment work the same in every module – see Backgrounds and Module width and inset panels.
  • An SVG can be any size: Set Styles → Layout → SVG size in percent. 100 % fills the media area, 50 % is half as wide, and above 100 % the sides are cropped.

Support

Did this answer your question?

If not, write to us and say which page you were on.