Hero Heading Configurator

Glas kann mehrWeg — internal tool

💡

How to use this tool

  1. Type your headline in the text area below.
  2. Upload your hero photo (optional — for preview only).
  3. Click any word in the preview to highlight it in the accent colour (black by default).
  4. Adjust max-width and line-height to control where the lines break.
  5. Adjust colours if needed.
  6. Copy the generated code at the bottom and paste it into Webflow.
Click any underlined word in the headline below to toggle its colour

Content
Heading text
Each word becomes clickable in the preview.
Hero photo (preview only)
Default Dotch image
Recommended size: 1920 × 527 px. This image is for preview only — upload the final image to Webflow separately.
Layout
Max width 22ch
Controls where lines break. Lower = narrower text.
Line height 1.35
Controls space between highlighted lines.
Colours
Highlight background
#ED7A1A
Base text colour
#FFFFFF
Accent text colour
#000000
Generated code
In Webflow: drop an Embed element where you want the hero heading to appear, then paste this entire block into it. Publish to see it live.