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.

Start by determining whether the content you want to edit is a section, column, or component.

  • At the top of the builder, toggle on Edit columns
    Edit columns on and off
    • Column areas are outlined in blue and green when you hover your mouse over them. The column outline only appears when Edit columns is turned ON.
  • 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 of the builder menu, find the toggle to turn Edit columns on or off to switch between columns and components for editing.

  • With Edit columns OFF, click on a component you want to edit: text boxes, images, videos, etc.  An orange mini-menu appears with editing options. Most details on the page will be components.
  • With Edit columns ON, click on a column set to see 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

In 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 to turn it ON.

Edit styles

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

  1. Click the column set you want to edit to access the blue and green menus
    • 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
    • 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

  1. Click a column set to see the green menu buttons
    Edit column width green button
  2. 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.

Column controls. Split, delete, or resize.

Editing components

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

Interactive components add placeholders to a page that must be connected to other 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. Click 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 Link to pop up a checkout form