Photo Ticker Hero

A dynamic hero section with animated scrolling photo columns or a centered marquee strip. Pairs a rich-text headline + CTAs with continuously moving image columns (or a horizontal ticker) for a kinetic above-the-fold moment.

View live preview → Jump to settings ↓

→ Start Here

The headline controls for shaping the hero: layout mode (columns vs. marquee), height, animation speed, heading alignment per breakpoint, scroll direction, and the marquee-only tilt + content offset settings.

Layout Mode

Select Default: Vertical Columns (Side-by-Side)

Switches between the two hero shapes. Columns puts text on the left with two vertical scrolling image columns on the right. Marquee centers the text and runs a horizontal scrolling strip of images underneath.

columns Vertical Columns (Side-by-Side) - default
marquee Horizontal Marquee (Centered)

Height Mode

Select Default: Fixed Height

Choose a fixed pixel height or let the hero fill the entire viewport. Use Fixed for pages with a sticky CTA below the fold; use Full Viewport when the hero IS the page entry point.

fixed Fixed Height - default
viewport Full Viewport (100vh)

Fixed Height

Number (400-1200px, step 50) Default: 1000px Shown when: Height Mode is Fixed Height

Height of the hero section in pixels. Min 400, max 1200, 50px steps.

Animation Speed

Number (5000-60000ms, step 1000) Default: 60000ms Shown when: Disable Ticker Animation is off

Duration of one full scroll cycle in milliseconds. Lower values scroll faster. 60000ms (60 seconds) gives a slow, ambient feel; drop to 20000-30000ms for a more energetic ticker.

Heading Alignment (Desktop)

Select Default: Center

Text alignment for the hero content on desktop (993px and above).

left Left
center Center (default)
right Right

Heading Alignment (Tablet/Mobile)

Select Default: Center

Text alignment for tablet and mobile (below 992px). Set independently from desktop so editors can left-align on desktop while centering on phones.

Animation Direction

Select Default: Left Up / Right Down Shown when: Disable Ticker Animation is off AND Layout Mode is Vertical Columns

Sets the direction the two photo columns scroll. The default scrolls the left column up and the right column down, creating an opposing-motion effect. Reverse to flip both columns.

default Left Up / Right Down (default)
reverse Left Down / Right Up

Image Tilt

Slider (0-15deg, step 1) Default: 3deg Shown when: Layout Mode is Horizontal Marquee

Alternating rotation angle for marquee images. 0 keeps them perfectly flat; small values (3-5) give a playful scrapbook feel; large values (10-15) read as deliberately chaotic.

Content Offset (Desktop)

Slider (-300 to 300px, step 10) Default: -75px Shown when: Layout Mode is Horizontal Marquee

Vertically shifts the centered text block on desktop. Negative values pull content up (closer to the top of the hero), positive values push it down (toward the marquee strip).

Content Offset (Mobile)

Slider (-200 to 200px, step 5) Default: -35px Shown when: Layout Mode is Horizontal Marquee

Same control for mobile so you can tune how the text overlaps (or clears) the marquee strip on small screens.

Disable Ticker Animation

Toggle Default: Off

Renders the images as a static grid (no scrolling animation). Improves page performance and is a sensible default for users with reduced-motion preferences when the animation feels too busy for the page.

/// Content

The visible text + CTAs + image repeaters. Two image repeaters drive the columns layout (left + right); a single marquee repeater drives the horizontal mode.

Hero Content

Rich text Default: blox Theme / Photo Ticker Hero Module / one-line description

The badge + headline + body block in the hero. Convention: <h6> for the badge pill, <h1> for the headline (this is the page hero), and <p> for the supporting paragraph. Keep the h6 short (2-4 words) so the badge stays compact.

CTA Mode

Select Default: Custom Buttons

Switches between two CTA workflows. Custom Buttons exposes the Primary + Secondary CTA groups below. HubSpot CTA swaps them for two CTA library selectors so you can use tracked CTAs from your HubSpot CTA Manager.

custom Custom Buttons (default)
hubspot HubSpot CTA

HubSpot CTA (Primary)

CTA Shown when: CTA Mode is HubSpot CTA

Select the primary CTA from your HubSpot CTA library. Inherits tracking, A/B testing, and visibility rules from HubSpot.

HubSpot CTA (Secondary)

CTA Shown when: CTA Mode is HubSpot CTA

Optional second CTA from the HubSpot CTA library. Leave empty if you only need one button.

Primary CTA

Group Shown when: CTA Mode is Custom Buttons

The primary call-to-action button. Three sub-fields:

Button Label

Text Default: Get Started

The visible text on the primary button.

Button Link

Link Default: #0 (placeholder)

Destination URL. Supports external URLs, HubSpot content pages, files, email addresses, and blog posts. Has "Open in new tab" + "No-follow" toggles.

Button Style

Select Default: Primary

Picks one of the six theme CTA styles. Style colors are configured in Theme Settings > Call To Actions.

cta-primary Primary (default)
cta-secondary Secondary
cta-tertiary Tertiary
cta-four Four
cta-five Five
cta-six Six

Secondary CTA

Group Shown when: CTA Mode is Custom Buttons

Optional second call-to-action sitting next to the primary. Same three sub-fields:

Link Label

Text Default: Learn More

The visible text on the secondary link.

Link URL

Link Default: #0 (placeholder)

Destination URL with the same "Open in new tab" + "No-follow" controls as the primary CTA.

Button Style

Select Default: Secondary

Same six tier choices as the primary button. Defaults to Secondary so the visual hierarchy reads correctly out of the box.

cta-primary Primary
cta-secondary Secondary (default)
cta-tertiary Tertiary
cta-four Four
cta-five Five
cta-six Six

Left Column Images

Repeater (2-8 items, default 4) Shown when: Layout Mode is Vertical Columns

The images that scroll in the left column of the ticker. Add 2-8 entries (default 4 placeholders). The loop is built by duplicating this list, so even 3-4 images produce a continuous infinite-scroll effect.

Image

Image (responsive) Default: hero-1 through hero-4 placeholders

Upload or pick an image for this ticker slot. Responsive sizing is on by default; lazy-loaded out of the box. For visual consistency, use images with similar aspect ratios so column heights stay even.

Right Column Images

Repeater (2-8 items, default 3) Shown when: Layout Mode is Vertical Columns

Images for the right column. Same min/max bounds as the left column (default 3 placeholders). Using a slightly different number in each column makes the offset between scrolling columns feel less mechanical.

Image

Image (responsive) Default: hero-5 through hero-7 placeholders

Upload or pick an image for this ticker slot. Same upload + lazy-loading defaults as the left column.

Marquee Images

Repeater (3-16 items, default 8) Shown when: Layout Mode is Horizontal Marquee

Images that scroll horizontally across the bottom of the hero. Default ships with 8 placeholders. Add up to 16 for a longer loop before repetition is visible.

Image

Image (responsive) Default: hero-1 through hero-7 placeholders

Upload or pick an image for this marquee slot. Image height is controlled by the Marquee Image Height slider in Hero Style; aspect ratio determines how wide each slot reads.

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #hero) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

The visual controls: hero badge + ticker image styling, section dividers, and the row's background / width / spacing.

/// Hero Style

Controls the colors and appearance of the hero content area and the ticker images themselves.

Show Badge Styling

Toggle Default: On

Styles the <h6> in the hero content as a pill badge instead of a plain heading. The badge color/border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

Select Default: Primary Shown when: Show Badge Styling is on

Picks the badge tier. Colors are configured in Theme Settings > Badge.

badge-primary Primary (default)
badge-secondary Secondary
badge-three Three
badge-four Four
badge-five Five
badge-six Six

Image Border Radius

Slider (0-40px, step 2) Default: 12px

Roundness of the ticker image corners. 12px matches the theme's default tile rounding; 0 for hard corners, 40 for very soft, pill-like edges.

Image Gap

Slider (0-40px, step 2) Default: 20px

Spacing between ticker images (applies to both the vertical columns and the horizontal marquee). Larger gaps feel airy and editorial; smaller gaps feel dense and energetic.

Marquee Image Height

Slider (120-400px, step 10) Default: 256px Shown when: Layout Mode is Horizontal Marquee

Height of images in the horizontal marquee strip. Width is derived from each image's aspect ratio.

Marquee Height (%)

Slider (20-60%, step 5) Default: 40% Shown when: Layout Mode is Horizontal Marquee

Height of the marquee area as a percentage of the hero section. 40% leaves 60% for the centered content above; raise to 50-60% to make the marquee dominate.

/// Section Dividers

Decorative SVG shapes at the top or bottom of the section, useful for blending into the section above or below.

Top Divider

Select Default: None

Decorative shape at the top of the section. 9 shape options, rendered as inline SVG matching the divider color you choose.

none None (default)
wave-1 Wave 1 (Gentle)
wave-2 Wave 2 (Sharp)
wave-3 Wave 3 (Multi)
wave-4 Wave 4 (Smooth)
wave-5 Wave 5 (Layered)
tilt Tilt (Angled)
curve Curve (Arc)
triangle Triangle

Top Divider Color

Color Default: #ffffff @ 100% opacity Shown when: Top Divider is not None

Set this to match the background color of the section above the hero so the divider reads as a transition shape.

Top Divider Height

Slider (20-200px, step 10) Default: 60px Shown when: Top Divider is a wave/curve/triangle

Height of the top divider shape (not shown for the tilt option, which uses Angle Height instead).

Angle Height (Top)

Slider (0-300px, step 10) Default: 100px Shown when: Top Divider is Tilt

Height of the angled top divider. Only shown when Top Divider is set to Tilt.

Flip Top Divider

Toggle Default: Off Shown when: Top Divider is not None

Mirrors the top divider shape horizontally.

Bottom Divider

Select Default: None

Decorative shape at the bottom of the section. Same 9 shape options as the top divider.

none None (default)
wave-1 Wave 1 (Gentle)
wave-2 Wave 2 (Sharp)
wave-3 Wave 3 (Multi)
wave-4 Wave 4 (Smooth)
wave-5 Wave 5 (Layered)
tilt Tilt (Angled)
curve Curve (Arc)
triangle Triangle

Bottom Divider Color

Color Default: #ffffff @ 100% opacity Shown when: Bottom Divider is not None

Set this to match the background color of the section below the hero.

Bottom Divider Height

Slider (20-200px, step 10) Default: 60px Shown when: Bottom Divider is a wave/curve/triangle

Height of the bottom divider shape.

Angle Height (Bottom)

Slider (0-300px, step 10) Default: 100px Shown when: Bottom Divider is Tilt

Height of the angled bottom divider. Only shown when Bottom Divider is set to Tilt.

Flip Bottom Divider

Toggle Default: Off Shown when: Bottom Divider is not None

Mirrors the bottom divider shape horizontally.

Divider Under Content

Toggle Default: Off Shown when: Bottom Divider is not None

Puts the bottom divider behind content so overlapping CTA buttons remain clickable. Turn on when a divider visually crosses a button row.

/// Row Settings

The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.

Background (Image, Video, Color, etc.)

Group Default: None

The Background Type dropdown drives which sub-controls appear:

none No background (default; section inherits the page bg)
color Solid Color - reveals Background Color picker
gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
image Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: 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.

Size (Content Width)

Group Default: Standard

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

Spacing (Around Content)

Group (per breakpoint)

Padding + margin controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes top/bottom/left/right inputs. Defaults:

desktop 0 top, 0 bottom (left/right unset)
tablet 0 top, 0 bottom, 0 left, 0 right
mobile 0 top, 0 bottom, 0 left, 0 right

Tip: Hero modules typically don't need their own padding because the hero's own Fixed Height (or Full Viewport) already controls the size. Add padding only when you want extra breathing room between the hero and the section below.