Block Reference
Insert any block by typing / in the editor. Not every block is available everywhere: the table shows where each one can be used.
Availability
| Block | Pages | Lessons | Emails | Blog | Forms |
|---|---|---|---|---|---|
| Heading 1 / 2 / 3 | ✓ | ✓ | ✓ | ✓ | ✓ |
| Small text | ✓ | ✓ | ✓ | ✓ | ✓ |
| Image | ✓ | ✓ | ✓ | ✓ | ✓ |
| Video (Pro) | ✓ | ✓ | — | — | ✓ |
| Embed Video | ✓ | ✓ | ✓ | ✓ | ✓ |
| Audio (Pro) | ✓ | ✓ | — | ✓ | ✓ |
| File | ✓ | ✓ | ✓ | ✓ | ✓ |
| Button | ✓ | ✓ | ✓ | ✓ | — |
| Line | ✓ | ✓ | ✓ | ✓ | ✓ |
| 2 Columns | ✓ | ✓ | — | — | — |
| 3 Columns | ✓ | ✓ | — | — | — |
| Container | ✓ | ✓ | — | ✓ | — |
| Banner | ✓ | ✓ | — | ✓ | — |
| Toggle section | ✓ | ✓ | — | ✓ | — |
| Email form | ✓ | ✓ | — | ✓ | — |
| Product | ✓ | ✓ | — | — | — |
| Timer (Pro) | ✓ | ✓ | — | — | — |
| Calendar | ✓ | — | — | — | — |
| Template | ✓ | ✓ | ✓ | ✓ | — |
| Custom code (Pro) | ✓ | ✓ | — | ✓ | ✓ |
| Firstname (variable) | — | — | ✓ | — | — |
"Emails" covers both the emails you send from Emails and the emails of your automations.
Forms also have their own question blocks (email, name, phone number, choices, text answers), described in Field types.
Block descriptions
Heading 1 / 2 / 3: Section titles at three levels. Heading 1 for the main title, Heading 2 for sections, Heading 3 for subsections.
Small text: A smaller, muted line of text. Good for subtitles or secondary information under a heading.
Line: A horizontal line to separate sections visually.
2 Columns: A two-column layout to place content side by side.
3 Columns: A three-column layout for presenting content in equal thirds. Good for comparing features or lining up icons.
Container: A box that groups blocks together. Useful for highlighted notes or sections.
Banner: A full-width block for a key message or announcement. You can set a custom background image from your media library. The photo is darkened a little as soon as you add it, so your text stays readable and turns white on its own. Drag the slider next to the image button to adjust how dark it gets, all the way back to the original photo.
Toggle section: A collapsible section. Visitors click to reveal the content. Good for FAQs.
Image: Upload and display an image. Includes an AI tool that creates an image from a short description you write.
Video: Upload your videos directly to TinyPages. Recommended for course lessons. (Pro plan only)
Embed Video: Paste the link of a video hosted on YouTube, Vimeo, Loom, Wistia or Tella to show it in your content. In an email, only YouTube, Loom and Wistia videos can be added. For example, to add a YouTube video, type / in the editor, start typing "Embed Video" and choose the block. Paste the video's address in the Paste the video URL field, then click Add video.
Audio: Upload an audio file, played with a built-in player. (Pro plan only)
File: A downloadable file (PDF, ZIP, etc.) that visitors can download with one click.
Button: A button with a label and a destination. Under Destination, choose where the click leads:
- an address you paste,
- one of your web pages,
- the order page of a product,
- a Page section: the button scrolls your visitor down to a heading of the same page. It's handy for a "See the program" button at the top of a long sales page. Pick the heading from the list, where a small icon next to each one shows its size (heading 1, 2 or 3).
Page sections are offered on pages, blog posts and lessons, but not in emails, which have nowhere to scroll to.
Email form: A sign-up form that adds visitors to your contacts. See Email form block for its options.
Product: Displays one of your products with a buy button.
Timer: A live countdown for limited-time offers. (Pro plan only)
Calendar: Shows your booking calendar on the page, so visitors can book a session with you without leaving it. It works with Calendly, TidyCal and Cal.com: first connect your account in Settings → Integrations, then insert the block and choose the event to show.
Template: Insert a saved reusable block. See Templates.
Custom code: Add HTML, CSS, or JavaScript. (Pro plan only) See how the Custom code block behaves.
Firstname: Inserts the recipient's first name automatically. Only available in emails.
The Custom code block
The Custom code block is for everything TinyPages doesn't offer as a block: a form from another tool, a quiz, a simulator, or a whole section written by Claude or ChatGPT. Knowing how it behaves saves you a lot of back-and-forth, and it's worth sharing this section with the AI that writes your code.
- Your code runs apart from the rest of the page. It doesn't pick up your page's fonts, colors or styles, so put the CSS it needs in the block itself. In the editor, the block shows your code. To see the result, open the page with Preview or visit it once it's published.
- The block grows with its content. Its height adjusts on its own, even when your code changes size after loading, like an accordion that opens or a form moving to its next step.
- Links open in the same tab. A link in your code replaces the whole page with its destination, like any link on your site. Add
target="_blank"to open it in a new tab instead. - You can link to a section of your code. Give the section an
id, for example<section id="pricing">. A link written<a href="#pricing">inside the block scrolls down to it, and the addressyoursite.com/your-page#pricingbrings visitors straight there. It's handy for a table of contents, or to send a client to the exact paragraph that answers their question. - Ad tracking and coupons are passed on. When your page's address carries UTM parameters (
utm_source,utm_campaign...), the codes Google and Facebook add to ad clicks, or acoupon, your code receives them too. A form from Kit or another tool then records where the visitor came from, and a TinyPages order page embedded in the block applies the coupon. - Fixed elements stay inside the block. A bar or a button set to
position: fixedsticks to the block, not to the browser window.
The block sits within the page column. To spread it across the whole window, see Making a Custom code block as wide as the window.