--- title: Typewriter Headline description: Create dynamic, animated headlines with customizable styles and animations in HubSpot. Enhance user engagement with eye-catching designs and easy setup. --- [Skip to content](https://hs.devwrks.co/typewriter-headline#main-content) [HS](https://hs.devwrks.co/) - [Browse](https://hs.devwrks.co/#modules) - [FAQ](https://hs.devwrks.co/#faq) Hire me for custom work → [Library](https://hs.devwrks.co/#modules) / Typewriter Headline # Typewriter Headline An animated headline that types, decodes or fades in, then highlights key words with a selection frame, pill or underline. AnimationHeadlineText [Preview →](https://hs.devwrks.co/typewriter-headline/preview) [Try the live demo](https://hs.devwrks.co/typewriter-headline#try) [Video](https://hs.devwrks.co/typewriter-headline#video) [Try it](https://hs.devwrks.co/typewriter-headline#try) [Setup](https://hs.devwrks.co/typewriter-headline#setup) [Settings](https://hs.devwrks.co/typewriter-headline#settings) Video ## See it in action Video coming soon Try it ## Play with the settings The same Content and Style fields you get in the HubSpot editor. Change anything and the preview updates. The fields match the module, but inside HubSpot they'll look like HubSpot's own editor. iHeads up: this demo is styled to match the devwrks brand, so the colors and fonts here aren't the module's defaults. In HubSpot, the module starts with its own default look, and the settings appear in HubSpot's editor (a white panel on the left of the page). The fields, names and options are the same. Preview data Reset Content Style Desktop Mobile Full width Hide settings Replay ↻ Preview only. It stays on screen while you scroll the settings. The module itself doesn't stick to the page. Setup ## Up and running in minutes 1. 01 ### Install it Get the module from the HubSpot Template Marketplace. It's added to your portal and shows up in the page editor. 2. 02 ### Add it to a page Open a page in the editor, click **Add**, search for *Typewriter Headline* and drag it into a drag-and-drop area. 3. 03 ### Write the headline Type your headline and wrap the words you want highlighted in asterisks, e.g. `Websites that *stop the scroll*`. 4. 04 ### Style it On the Style tab, set the fonts, colors, highlight style and button shape. 5. 05 ### Pick the animation Choose type, decode or fade, the speed, and whether the cursor stays at the end. Visitors who prefer reduced motion see the finished headline straight away. 6. 06 ### Publish Preview, then publish. The animation plays once, when the headline scrolls into view. Settings ## Every option, in plain English ### Content Eyebrow The small line of text above the headline, like "Introducing" or "New". Leave it empty if you don't want one. Headline Your main message. Put asterisks around the words you want to stand out, like \*stop the scroll\*, and they get highlighted. Heading level Tells Google how important the headline is. Pick H1 if this is the main headline of the page (only one per page). For any other headline, pick H2 or H3. Supporting text A sentence or two under the headline that explains it a bit more. Optional. Buttons Add up to two buttons, such as "Book a call". For each one, write the text, choose the page it opens, and pick Filled (solid color) or Outline (just a border). ### Style › Text Font family For the eyebrow, headline and supporting text: "Theme" uses your website's own fonts, "Custom" lets you pick a different font. Most people leave it on Theme. Font size, color and style Size, color, bold, italic and underline for each piece of text. These work with either font family choice. Headline line height How close together the lines of the headline sit when it wraps onto two or more lines. 1.15 is a good default; bigger numbers spread them out. ### Style › Background Background color The color behind the whole section. Set the opacity to 0% to see through to the page behind it. ### Style › Spacing Padding Empty space around the text, inside the section. Use one value for all sides, or click "Edit separately" to set top, right, bottom and left on their own. Space below eyebrow The gap between the small top line and the headline. Space above supporting text The gap between the headline and the sentence under it. Space above buttons The gap between the text and the buttons. Supporting text max width Stops the supporting text from stretching too wide, which makes long lines hard to read. Set it to 0 for no limit. ### Style › Alignment Text alignment Line everything up on the left, in the center or on the right. ### Content › Image Show an image Turn on to show an image beside the text, then pick the image and write its alt text. ### Style › Image Image layout Only when an image is shown. Choose whether it sits on the right or the left, how wide it is, the space between it and the text, how the text lines up with it, its corner radius and whether it goes above or below the text on mobile. ### Style › Highlight Highlight style How the words in asterisks stand out: a selection box like in a design tool, a colored pill behind the words, or a slanted underline. Highlight colors The highlight color, plus the text color on top of it: Pill text color for the pill, Size label text color for the frame's label. Pick colors with good contrast so the words are easy to read. Highlighted words color Only for the selection frame and underline. Keep the highlighted words in the headline color, or pick a custom color for them. Frame fill opacity Only for the selection box. How strongly the highlight color fills the inside of the box. 0% is just an outline. Frame handle color Only for the selection box. The color of the four small squares on its corners. Show size label Only for the selection box. Shows or hides the little "515 × 69" size tag, like the one in design tools. ### Style › Buttons Button font "Theme" uses your website's body font, "Custom" lets you pick another one. Also sets the button text size and style. Button shape Fully round (pill), slightly rounded, square, or your own corner radius in pixels. Button padding Space inside each button, around its text. Bigger numbers make bigger buttons. Border width How thick the button outline is. Set it to 0 for no border. Space between buttons The gap between the two buttons. Lift on hover Makes the buttons move up slightly when someone hovers over them. Filled buttons Colors for solid buttons: background, text and border, plus the colors they change to when someone hovers over them. Outline buttons Colors for outline buttons: border and text, plus the colors they change to on hover. ### Style › Animation Animate the headline Turn the animation on or off. When it's off, visitors see the finished headline straight away. Text effect How the headline appears: Typewriter (letter by letter), Decode (random characters that settle into your words) or Fade up (word by word). Speed How fast the animation plays. Blinking cursor Leaves a blinking cursor at the end of the headline, as if someone just finished typing it. Cursor color Only when the cursor is on. The color of the blinking cursor. Support ## Stuck on something? Get in touch and I'll help you get it working. Get in touch → Made for HubSpot CMS by devwrks. - [Browse](https://hs.devwrks.co/#modules) - Support - [Portfolio](https://www.devwrks.co) © 2026 devwrks [Terms of Service](https://hs.devwrks.co/terms)[Privacy Policy](https://hs.devwrks.co/privacy) Get in touch I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Get in touch Draft saved, continue anytime Get support I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Get support Draft saved, continue anytime Start a project I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Start a project Draft saved, continue anytime Suggest a module I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Suggest a module Draft saved, continue anytime