Tallacman's Lead Feature for Concrete CMS

Tallacman's Lead Feature opens your page with impact — a full-width hero image, optional color overlay, rich lead text, optional animated secondary copy, and an optional scroll chevron. No custom code. No theme edits. Just a polished above-the-fold moment editors can configure in minutes.

Built for Concrete CMS 9, this block is designed for landing pages, homepages, campaign headers, and anywhere the first screen needs to set the tone before visitors scroll.

Lead with image. Lead with words. Lead with both.

Why editors love it

Most hero sections mean wrestling with page templates or one-off custom CSS. Lead Feature puts the essentials in one block: background image placement, viewport height, overlay tint, rich lead and secondary copy, independent animation options for each text line, and an optional chevron that smoothly scrolls visitors to the content below.

Format headlines and subheads with the Concrete rich text editor — bold, links, and layout you already know. Entrance animations play across the full hero image, with text settling centered in the frame when the motion finishes. A built-in drop shadow keeps copy readable over busy photos without extra setup.

Features

Full-width background

• Asset library image — Choose any image from the file manager.
• Viewport height — Set block height from 10vh through 100vh in 5vh steps.
• Image alignment — Nine position presets from top-left through bottom-right.
• Scroll or fixed — Parallax-style fixed background or standard scroll behavior.
• Color overlay — Optional rgba overlay to darken or tint the image for readable text.

Lead and secondary text

• Rich text editors — Format lead and secondary copy with the Concrete editor.
• Independent animations — animate.css-powered entrance effects for each text line.
• Full-hero motion — Animations use the full image area; text finishes centered in the hero.
• Speed and delay controls — Normal through faster/slower speeds, plus up to 5 seconds of delay.
• Readable by default — Subtle drop shadow on hero text for contrast over photography.

Scroll arrow

• Optional chevron — SVG down arrow with a gentle float animation.
• Smooth scroll — Clicking the chevron smoothly scrolls to the content below the block.
• Custom chevron color — Match your brand or improve contrast against the hero image.

Built for Concrete CMS 9

• Input sanitization and color validation
• Composer support
• Block output caching
• No Font Awesome dependency — inline SVG chevron
• Front-end CSS scoped to the block for theme compatibility

Ideal for

• Homepages — Brand hero with headline and subhead
• Landing pages — Campaign opener with animated call-to-action text
• Event and conference sites — Date, venue, or speaker lead-in above the fold
• Portfolio and agency pages — Visual first impression with supporting copy
• Nonprofit and cause pages — Emotional image plus mission statement

Add a full-width hero with background image, overlay, rich lead and secondary text, animate.css entrance effects, readable drop-shadow text, and an optional smooth-scroll chevron. Built for Concrete CMS 9.

Usage

1. Add Tallacman's Lead Feature to your page or area.
2. Under Background, choose an image, set height, alignment, scroll behavior, and overlay color.
3. Under Lead Text and Secondary Text, enter copy with the rich text editor and choose animation, speed, and delay for each line.
4. Under Scroll Arrow, enable the chevron and set its color if desired.
5. Save and publish.

Give your pages a lead section that looks intentional from the first pixel.