TrendAI Landing Page Template

1

Editing text

Click any highlighted text block on the page. A small rich-text editor opens. Type your new content and click Save. Changes are saved per-clone, not to the master template.

2

Coloured highlight in headings

The red-to-orange gradient effect on headings uses a special wrapper. In the text editor toolbar click the button marked HTML, then wrap your words:

<span class="text-highlight">Your words</span>

If the span is stripped on save, apply the class to the heading element itself:

<h2 class="text-highlight">Whole heading</h2>

3

Show or hide sections

Open the Variables panel on the right side of the editor. Every section (Hero, Countdown, Agenda, Speakers, Accordion, Overlapping Image, Content Sections 1–5, etc.) has a Show/Hidden toggle. Sections set to Hidden are completely removed from the published page.

4

Reorder sections

In the Variables panel, scroll to the Order: group. Each section has a unique number (1–15). Lower numbers appear higher on the page. No two sections should share the same number — duplicates cause layout issues.

5

Number of speakers

Set Number of Speakers to Show (1–8) in the Variables panel. Each speaker card has its own editable region (Speaker 1 through Speaker 8) for photo, name, job title, and company — edit them independently.

For round vs square photos and the image border, see card 13.

6

Countdown timer

Set the target date in the Countdown Date variable. Use the format:

Month DD, YYYY HH:MM:SS GMT±N

Example: July 13, 2026 10:00:00 GMT+1 for 13 July 2026 at 10am BST. The timer stops at zero and does not go negative.

7

Submit button text

In the Variables panel find Form Submit Button Text. Default is "Submit". Change to anything — "Register now", "Reserve your place", "Download now", etc.

8

Adding buttons in body copy

Two button styles are available. In the text editor click the button marked HTML and paste the relevant snippet into any rich-text area:

Primary (red filled):

<a href="#" class="btn-tai">Get started</a>

Secondary (white outline):

<a href="#" class="btn-tai-secondary">Why Trend AI</a>

Replace # with the destination URL. Both buttons include hover and keyboard-focus states automatically.

9

Adding a styled table

To add a brand-styled table, click the button marked HTML in the text editor and paste this snippet. Add or remove <tr> rows and <td> cells as needed:

<th> — table header cell. Used inside <thead> to label each column. Renders with the brand header colour and bold uppercase text.
<td> — table data cell. Used inside <tbody> rows for your content. Each <tr> is one row; add a <td> for every column.

<div class="lp-table-wrap">
  <table class="lp-table">
    <thead>
      <tr>
        <th>Time</th>
        <th>Session</th>
        <th>Speaker</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>09:00</td>
        <td>Opening keynote</td>
        <td>Jane Smith</td>
      </tr>
      <tr>
        <td>09:45</td>
        <td>Panel discussion</td>
        <td>Various</td>
      </tr>
    </tbody>
  </table>
</div>

The header row colour is set by the Agenda Header Row Colour variable.

10

Linking to a page section

To link a button or text to a section on the same page, highlight the text in the editor, click Insert/Edit Link, and set the URL to the section ID with a # prefix. For example #formSection scrolls to the form.

Available section IDs:

#lpHeader	Header / Nav bar
#bannerSection	Hero Banner
#countdownSection	Countdown Timer
#formSection	Form Section
#agendaTable	Agenda Table
#overLappingSection	Overlapping Image Section
#hideshowsection	Accordion Section
#speakerCarouselSection	Speaker Carousel
#snippetSection	Snippet Section
#section1	Content Section 1
#section2	Content Section 2
#section3	Content Section 3
#section4	Content Section 4
#section5	Content Section 5
#footer	Footer

A section must be set to Shown in Variables for the anchor link to have a destination.

Section links always glide smoothly to the target in the same tab — even if the link was accidentally set to "open in a new window", it will not open a new tab.

11

Search engine indexing

By default every page is set to No Index — search engines (Google, Bing) and AI crawlers will not index the page or follow its links. This is the correct setting while a page is in draft or being tested.

When the page is live and ready to be discovered organically, go to Variables and switch Allow search engine indexing? to Index. This changes the page's robots directive from noindex, nofollow to index, follow.

Leave it on No Index for gated content, thank-you pages, or any page that should never appear in search results. Search engines can take days or weeks to pick up a change after you switch it.

12

Custom column widths

The Columns variable accepts either a plain number for equal columns, or a colon-separated ratio for custom widths. The number of values sets the column count; the numbers set the relative sizes.

2 columns

2 — equal (50% / 50%)
2:1 — wide left (67% / 33%)
1:2 — wide right (33% / 67%)
3:1 — dominant left (75% / 25%)

3 columns

3 — equal (33% each)
2:1:1 — wide first (50% / 25% / 25%)
1:2:1 — wide centre (25% / 50% / 25%)
1:1:2 — wide last (25% / 25% / 50%)

4 columns

4 — equal (25% each)
2:1:1:1 — wide first (40% / 20% / 20% / 20%)
1:2:2:1 — wide centre pair (17% / 33% / 33% / 17%)

5 & 6 columns

5 — equal (20% each)
2:1:1:1:1 — wide first (33% / 17% / 17% / 17% / 17%)
6 — equal (17% each)
2:1:1:1:1:1 — wide first (29% / 14% / 14% / 14% / 14% / 14%)

Plain integers still work exactly as before — 4 gives four equal columns. On mobile all columns stack to full width regardless of ratio.

13

Speaker image style

Two Variables panel toggles control how speaker photos look:

Speakers: Round Images? — Square (default) or Round. Round crops each photo to a circle.
Speakers: Show Image Border? — On (default) or Off. Adds the red→amber framing border and glow.

When images are set to Round, the border is automatically off — a square frame around a circle looked broken, so round photos ship clean by default. The border toggle applies to square images.

Tip: upload square (1:1) headshots for the most consistent result in either shape.

14

Form text colour

The Form Label Colour variable now drives all text inside the form — field labels, checkbox and radio option labels, and any helper / instruction text you add in a rich-text block. Change it once and every label updates together.

Two things are deliberately left out: placeholder text inside empty fields stays grey (so people can tell a field is empty), and links keep their own colour so they still look clickable.

15

Recommended image sizes

Until you replace a placeholder image, it shows a small on-image hint with the recommended size. The hint disappears automatically once you upload your own image.

Overlapping image	873 × 847 px (≈1:1, square)
Speaker photo	square (1:1) headshot
Top / bottom banner	2560 × 500 px (wide)

The bottom banner ships with an animated TrendAI motion graphic by default — replace it with your own image or GIF via the Bottom Banner BG variable.

16

Full variable name reference

Marketo truncates long variable names in the Variables panel, so the label you see is often cut off. This is the complete list of every variable's full name, in the order they appear in the panel (Text fields first, then Colour pickers, then Toggles), grouped by section.

Text variables

Header & Nav

Header Logo Image
Header Logo Link
Header Logo 2 Image
Header Logo 2 Link
Header BG Image
Header Min Height
Menu 1 Text / Menu 1 Link / Menu 1 Target (Menu 2–5 follow the same pattern)
Nav CTA Text / Nav CTA Link / Nav CTA Target

Hero

Top Banner Image
Top Banner Link
Hero BG Desktop
Hero BG Tablet
Hero BG Mobile
Hero BG Position
Hero Text Top+Bottom Margin

Countdown

Countdown Date (e.g. July 13, 2026 10:00:00 GMT+1)
Countdown Days Label
Countdown Hours Label
Countdown Minutes Label
Countdown Seconds Label
Countdown Font Size

Form

Form Section BG Image
Form Submit Button Text

Content Sections

Section 1 Columns (e.g. 4 or 2:1:1)
Section 1 BG (Sections 2–5 follow the same pattern)

Agenda · Accordion · Overlap · Speakers

Agenda Table BG
Accordion Section BG
Accordion Button BG Image
Number of Accordions (1-8)
Overlap Section BG
Overlap Image BG
Overlap Left Image
Number of Speakers to Show (1-8 available)

Bottom Banner & Global Layout

Bottom Banner BG
Bottom Banner Link
Sections Top Margin (small|medium|large)
Sections Bottom Margin (small|medium|large)
Section Title Bottom Margin (small|medium|large)

Section Order (unique 1–15 each)

Order: Countdown Section
Order: Form Section
Order: Agenda Table
Order: Overlapping Image
Order: Accordion Section
Order: Speaker Carousel
Order: Snippet Section
Order: Section 1 … Section 5
Order: Bottom Banner

Colour variables

Global & Hero & Countdown

Page Background Colour
Body Text Colour
Nav Item Colour
List Bullet Colour
Hero Curve Fill Colour
Countdown Text Colour

Form & Content Sections

Form Label Colour
Form Section BG Colour
Section 1 BG Colour … Section 5 BG Colour

Agenda · Accordion · Overlap · Speakers

Agenda Table BG Colour
Agenda Header Row Colour
Agenda Row Colour
Agenda Border Colour
Accordion Section BG Colour
Overlap Section BG Colour
Speaker Carousel BG Colour

Toggles (on / off)

Global & Header & Nav

Font: Global or JP?
Show Header?
Header: Fixed or Static?
Show Nav Menu?
Show Secondary Logo?
Show Nav Item 1? … Show Nav Item 5?
Show Nav CTA Button?

Hero & Countdown

Show Top Image Banner?
Show Hero Banner+Text?
Show Curve Below Hero?
Show Countdown Timer?

Form

Show Form Inside Hero?
Show Form Section?
Show Form?
Form Full Width?
Form Style: 2-column?
Checkboxes displayed in a row?
Show inline Thank You message?
Hide form heading on submit?
Block non business emails?
Clear Marketo cookie on submit?

Sections, Agenda, Accordion, Overlap

Show Section 1? … Show Section 5?
Show Agenda Table?
Show Accordion Section?
Show Overlapping Image Section?
Overlapping Image Position

Speakers, Bottom, SEO, Footer

Speakers: Show Carousel Section?
Speakers: Show Nav Arrows + Dots?
Speakers: Round Images?
Speakers: Show Image Border?
Show Bottom Banner?
Show Snippet Section?
Allow search engine indexing?
Show Footer?
Card Hover Effect?

17

Available background images

Brand-approved background images you can drop into any image variable (Hero BG, Section BG, Bottom Banner, etc.). Click a preview to open it full size, or copy the link beneath it and paste it into the variable.

Motion (animated GIF)