This article is about the AI Hybrid Builder. To see how it compares with Classic Builder, read How the AI Hybrid Builder differs from Classic Builder.

In the AI Hybrid Builder, you can edit your page by asking Unbounce AI or by editing your page directly in the builder. Both change the same page, so use whichever is faster for the job.

Find your way around

• Left panel: three tabs. Layers and Pages shows your page's structure, Components (the + icon) lists components you can add, and Style Guide (the palette icon) holds your page's colors, fonts, and button styles.
• Chat panel: the AI landing page assistant, labeled Unbounce AI, sits at the bottom left. You can minimize it or expand it.
• Top toolbar: switch variants, switch between desktop, tablet, and mobile, zoom, undo and redo, and preview your page.
• Right panel: three tabs for whatever you've selected. Styles controls how it looks, Properties holds its settings (like a form button's action), and Goals lists your conversion goals.

Ask Unbounce AI to make changes

Type what you want in the AI landing page assistant, like "Make the headline shorter" or "Add a pricing section below the hero."

To change one part of the page, select it on your page first, then describe the change in chat. Unbounce AI applies your request to what you selected.

Unbounce AI changes only what you selected and tells you what it changed.

Each variant has its own conversation, so switching variants starts a fresh chat.

If you ask for a section that isn't in the component panel, Unbounce AI can build it for you as part of the page.

To start the conversation over, open the ⋯ menu in the chat panel and choose Clear conversation.

Edit your page directly

Click any text to edit it in place. Select an element to change it in the right panel.

When you select an element, a small toolbar appears next to it. Use it to select the element's parent, move it, duplicate it, or delete it.

Add components

Open the Components tab and click a component to add it to your page. You can also search for one by name. Some components come in more than one version; for example, Hero offers Hero Centered, Hero Split, and Hero Brand.

• Basic: Text, Image, Video, Button, Divider
• Section: Hero, Feature grid, Icon groups, Logo Bar, Pricing tables, CTA blocks, Gallery, Image + Text
• Navigation: Nav, Footer
• Forms: Lead Capture and form fields. See Build forms in the AI Hybrid Builder.
• Layout: 2, 3, 4, and 5 column sections

Sections and columns

Pages are built from sections. Each section can have a single column or two to five columns.

Layout

Sections, columns, and elements can use a Flex or Grid layout. Select an element, then choose Flex or Grid in its layout settings:

• Flex lines items up in a row or column. You can set the direction, how items are spaced and aligned, the gap between them, and whether they wrap onto a new line.
• Grid places items in rows and columns.

The other display options (block, inline, inline-block, and none) are still available.

Select an element, open Styles, and expand Layout. The Display setting offers Block, Inline, Inline block, Flex, Grid, and None. Flex adds Flex Direction, Justify, Align, Gap, and Flex Wrap. Grid adds Grid Template Columns, Grid Template Rows, Justify Items, and Align Content.

To control where an element sits, select it, open Styles, and expand Position. Choose Absolute to place it at exact coordinates, like in Classic Builder, or choose Static, Relative, Fixed, or Sticky.

Desktop, tablet, and mobile

Every page is responsive. Use the icons in the top toolbar to switch between desktop, tablet, and mobile.

In the Styles tab, each group of settings (Layout, Size, Space, Typography, Background, Borders, and Effects) has its own desktop, tablet, and mobile icons, so you can set a style for one screen size without changing the others.

Hide an element at one screen size

1. Switch to the screen size where you want to hide the element, like mobile.
2. Select the element.
3. In Styles, expand Layout and set Display to None.

The element is hidden at that size and still shows at the others. It stays in the Layers panel, so you can select it and change it back.

Hover and other states

Use the State menu at the top of the Styles tab to style how an element looks on Hover, when Active, or in Focus, as well as its Default look.

Style guide

The Style Guide tab sets the look of your whole page in one place:

• Colors: primary, secondary, accent, and neutral/text
• Fonts: headline and paragraph fonts, and the base text size. In Advanced Settings, you can style each heading level and add up to six (H1 to H6).
• Buttons: fill, outline, text color, and corner radius for primary and secondary buttons. In Advanced Settings, you can also style each button's Hover and Pressed states and add a shadow.
• Links: link color. In Advanced Settings, links get their own Hover and Pressed styles, and you can underline them never, on hover, or always.
• Form fields: corner radius, fill, and outline
• Radii and more: corner sizes and base spacing
• Logo: your logo, shown in any nav or footer that uses it. In Advanced Settings, you can add a version for dark backgrounds and a favicon.

Each group has Advanced Settings for finer control.

Use the Style Guide menu at the top of the tab to choose between:

• Default: Unbounce's default styles
• Custom: the styles Unbounce AI generated for your page, plus any changes you've made

Pages Unbounce AI builds start on Custom, with colors and fonts chosen for that page. If you change a style while on Default, or Unbounce AI changes one, the page switches to Custom. If you switch back to Default, you'll be asked to confirm first, since your page's custom styles are replaced. Styles apply to the variant you're working on, so each variant can look different.

Edit your page's code

To work with the HTML directly, click the </> icon (Access Code) at the left end of the top toolbar. Edit the code in the panel that opens, then click Save changes.

Code editing isn't available on the Starter plan. On Starter, the </> icon is disabled and shows an upgrade message.

Copy, paste, and duplicate

You can copy, paste, and duplicate elements on your page using the usual keyboard shortcuts. You can also duplicate a whole page.

Undo, redo, and saving

To undo a change, including one Unbounce AI made, click your page and press Command+Z (Ctrl+Z on Windows). You can also use the undo and redo arrows in the top toolbar.

The AI Hybrid Builder saves your work automatically as you go. You can also click Save at the top right at any time. There's no version history, so you can't restore an earlier version of a page.

Editing with teammates

If two people edit the same page at the same time, the last save wins. Coordinate with your team before editing a shared page.