Creating Advanced Sections

This lesson covers how to use the Creative Agent to build interactive sections like tabbed content, accordions, and embedded forms that make your pages more polished and easier to navigate.

Next Lesson:📄 Using the Layers Tab

Starting From Existing Content

The easiest way to create an interactive section is to start with content already on your page. For example, if you have a three-by-three grid of content cards, that is a lot of content stacked vertically. Converting it into something more dynamic keeps your page clean without losing any of the information.

Prompt Examples

For an accordion layout, try: "Convert these cards into an expandable accordion where each card title is a clickable header." This works well for FAQ sections or feature breakdowns where visitors can drill into details on their own.

For tabbed content, try: "Reorganize this section into tabs, one tab per card." This works well when each card covers a distinct topic that visitors might want to jump between.

To add a form, get the embed code from your form provider (Marketo, HubSpot, Pardot, or another tool) and paste it directly into your prompt. For example: "Add a form below the hero section using this embed code: [paste code here]."

You can also create these sections manually. Select a parent container on the page, then click the + button in the quick changes menu to add a new section.

Building Interactive Sections From Scratch

You can also ask the agent to build interactive sections from nothing. For example: "Create a new section below the hero with a tabbed layout. Tab one should be for Enterprise features, tab two for Mid-Market features, and tab three for Startup features."

You can also build a section from a screenshot. Attach the screenshot using the plus button in the prompt box and say something like: "Create a section below the hero that matches this screenshot." The agent will analyze the image and build a matching layout while applying your brand styles.

Previewing and Refining

After the agent builds your interactive section, click the Preview button in the top right to see how it behaves. Interactive sections involve user interaction, so it is worth checking that the experience feels smooth before publishing.

If something needs adjusting, return to the Chat tab with a follow-up prompt or switch to the Design tab to fine-tune spacing and font sizes within the interactive elements.