Docs / Content Layouts / Text Reveal
A scroll-driven section where words in a rich text block reveal progressively as the user scrolls. Optional side image splits the section into a 50/50 layout. Great for manifesto statements, mission copy, or any moment that should feel like a guided read.
Configure how much scrolling is needed to fully reveal the text, plus heading alignment per breakpoint and an option to disable the scroll motion entirely.
How tall the scroll runway is on desktop. Higher values slow the reveal down. 200vh means the user has to scroll roughly 2x the viewport height to reveal all the words. Drop closer to 150vh for a snappier feel; push to 300vh+ for an editorial slow-burn pace.
Text alignment on desktop (993px and above). Left works well for long-form copy; center reads better for short manifesto blocks.
left Left (default)center Centerright RightText alignment on tablet and mobile (below 992px). Set independently so editors can center on phones while keeping desktop left-aligned.
left Leftcenter Center (default)right RightScroll runway height on mobile (below 768px). Lower values feel snappier on small screens where users expect things to move faster.
Shows all text immediately without the scroll reveal effect. Turn this on if the section needs to be fully readable above the fold (e.g. on a long landing page where you can't guarantee enough scroll runway), or to improve perceived performance.
The actual reveal text and the optional 50/50 side image.
The text that will be revealed word-by-word on scroll. Formatting (bold, italic, links) is preserved. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h1> for the title, and <p> for the body copy. Keep the h6 short (2-4 words) so the badge pill stays compact.
Adds an image alongside the reveal text in a 50/50 split layout. The whole group is collapsible in the editor.
Master switch for the side image. When off, the reveal text spans the full content width and all other side-image fields are hidden.
The side image. Responsive sizing is on by default; the HubSpot file manager handles SRC and alt text. Upload a tall portrait or near-square image (the column is half the container width) so it has room to render without softness.
Tip: Use a unique filename when you replace this image. HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.
Which side the image sits on. Alternate between sections on the same page for a zig-zag reading rhythm.
right Image right, text left (default)left Image left, text rightScales the image within its column. 100% fills the column edge to edge; lower values shrink it inside the column so the surrounding background shows through.
Space between the text and image columns on desktop. 0 lets the columns meet edge-to-edge; 80px+ gives the section a more spacious editorial feel.
Rounds the image's corners. 12px matches the theme's default tile rounding; 0 for hard corners; 24+ for very soft, pill-like edges.
How the side image displays on mobile (below 768px) where the 50/50 split is no longer practical.
hidden Hide Image (text-only on mobile)above Show Above Text (default)below Show Below TextDeveloper hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Only use one. Useful for anchor links (e.g. #mission) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: the reveal color and opacity behavior, badge tier, and the row's background, width, and per-breakpoint padding.
Controls the appearance of the revealed text and the unrevealed (faded) state.
The color each word becomes once it has been revealed by scrolling. Pick a high-contrast color against the section background so the reveal moment reads clearly.
How visible the text is before being revealed. 0 means the words are invisible until they enter the reveal range; 50 means they are clearly readable from the start (still useful as a tone-shift effect rather than a true reveal).
Maximum width of the text area on desktop. Keeps long lines of reveal text within a comfortable measure (60-80 characters per line). Drop to 700-800px for tighter editorial copy.
Horizontal alignment of the reveal words on desktop. Note this is independent from the Start Here heading alignment, which controls the section's heading/badge block.
left Left (default)center Centerright RightHorizontal alignment of the reveal words on screens below 993px.
left Left (default)center Centerright RightControls how an <h6> inside the reveal text is styled.
Styles the <h6> element in the reveal text as a pill badge instead of a plain heading. The badge color and border are pulled from the chosen badge tier and the theme's badge settings.
Picks the badge tier. Colors and styling are configured in Theme Settings > Badge.
badge-primary Primary (default)badge-secondary Secondarybadge-three Threebadge-four Fourbadge-five Fivebadge-six SixThe innermost grouping that holds together the column structure. Controls the section's background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none None / Transparent (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Background Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amountNote: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option. The Background Type select only exposes none/color/gradient/image.
Controls the maximum width of the row's container.
standard Standard (uses theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, also set in Theme Settings)custom Custom - reveals a Container Width number input (600-1920px, default 1200)Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:
desktop 100px top, 100px bottom (above 992px)tablet 60px top, 60px bottom, 15px left, 15px right (575-992px)mobile 40px top, 40px bottom, 15px left, 15px right (below 575px)