Page templates are composed of the same three structural layers as any page–sections, columns, and components.

To customize a template or other existing page, open it in the page builder.

Determine whether the content you want to edit is a section, column, or component.

  • At the top of the builder, toggle on Edit columns 
    • Column areas are outlined in blue and green

Edit columns on and off

  • Toggle off Edit columns
    • Components are outlined in orange when you hover your mouse over them
  • Sections are the bottom layer, indicated by a gear icon on the right edge of the page (shown in the following image)

Editing menus for sections and components

The default editing mode in the page builder is component mode. At the top left of the builder menu, find the options to turn Edit columns on or off to switch between columns and components for editing.

  • With Edit columns OFF, hover over the components you want to edit: text boxes, images, videos, etc. Most details on the page will be components. An orange mini-menu appears with editing options.
  • With Edit columns ON, hover over columns to trigger a green or blue mini-menu. The blue menu is for the individual cell in the column. The green menu is for the whole column group.

Column mode gives access to edit columns


Editing sections

To edit a section, move your cursor to the right side of the screen and click the blue gear icon to view the section menu.

The gear icon opens the section menu

  • Click the pencil icon to open the main configuration panel. Most section customization is completed here – select custom padding, background images, background video, set hide or delay controls, etc.
  • Clone, move, or delete the section from the section menu
    • Warning: Deleting a section will delete everything inside it – all columns and components.
  • Click the heart icon to save the section as a favorite template so it can be used again in another page.
  • Click the <> icon to edit the section's source code
    • Warning: Advanced code knowledge is required. Editing the source code incorrectly may cause the section or complete page to be broken.


Editing columns

Columns provide the layout structure for the content in a section.

To edit columns, click the Edit columns toggle at the top of the page ON.

Edit styles

Background image or color, border, padding, alignment, etc.

  1. Hover over the columns until the blue and green menus appear
    • For a single cell in the column set, click the pencil icon in the blue menu

Click the blue edit button to edit a single column style

  1. For the entire column set, click the pencil icon in the green menu

Click the green edit button to configure styles for the column block

Edit column size and number

  • Hover over the columns until the green menu appears

Edit column width green button

  • Click the Edit column width icon
    • To change the width of each column, use your cursor to drag the left or right edges of the black bars
    • To rearrange the columns, click the center of a black bar and drag
    • To split a column into two, click the blue <|> icon
    • To delete a column, click the red X icon
      • Warning: Deleting a column will also delete its contents. This can not be undone.

Hover over the columns until the green menu appears Click the Edit column width icon To change the width of each column, use your cursor to drag the left or right edges of the black bars To rearrange the columns, click the center of a black bar and drag To split a column into two, click the blue <|> icon To delete a column, click the red X icon Warning: Deleting a column will also delete its contents. This can not be undone.


Editing components

Each type of component has a unique configuration panel where settings like padding, font, color, etc. are adjusted. Access the configuration for a component by hovering over the element on the page and clicking the edit button in the mini menu that pops up.

Interactive components add placeholders to a page that must be connected to live assets in your account in order to perform an action or create a link.

Interactive components include:

  • Checkout forms
  • Opt-in forms
  • Webinar registration forms
  • Surveys
  • Calendars
  • Buttons

Pro tip

The assets for an interactive component must be fully configured in your account before you can use them in a page. 

  • If you want to create a checkout page, create your product first. 
  • If you want to create an opt-in page, create your opt-in form first, etc.

Check for interactive components

  1. Before publishing a page, review it for any interactive components that need to be configured:
  2. Hover over the component and click Edit style
  • In the configuration panel, use the dropdown fields to link the asset that will power the component
  • Checkouts are linked to Product assets
  • Opt-in forms are linked to Form assets
  • Webinar registration forms are linked to Webinar assets
  • Surveys are linked to Survey assets
  • Calendars are linked to Calendar assets
  • Buttons can be linked to pages or configured to pop up any other interactive active component

Pro tip

  • The Assets in this Page panel in the bottom right of the screen tells you what interactive components are in the page and if they're pending or complete.
    Assets in this Page panel shows interactive elements in the page

Example: Checkout form component - Configure to link a product

Edit a checkout form component to link the product asset

Example: Button component - Configure to pop up a checkout form


In your account