The Page Editor is where you design and build your template landing page within a campaign. It allows you to customize content, add elements, structure your layout using sections, and configure page-specific settings.
Accessing the Page Editor
You can access the Page Editor to work on a specific page within a campaign.
Navigate to your Campaigns dashboard.
Choose the campaign that contains the page you want to edit and click the Edit button. The editor interface will appear.
Page Editor Interface
The Page Editor interface is designed to provide a visual representation of your page while offering tools for editing and configuration. Key areas include:
Top Bar: Located at the very top of the screen, this bar contains the page name and status ("Draft", "Published," or "Unsaved Changes"). It also includes controls like device preview icons (desktop, tablet, mobile), a "Landing Page Generation" section (with a "Get Started" or "Settings" button for ABM features), a Preview button, a Page Settings button, and the Publish/Edit/Update button (depending on the page status).
Main Content Area: This central area displays a live preview of your landing page as you build it. You can directly interact with and edit elements within this area.
Elements and Sections: Your page is composed of various elements (like headings, paragraphs, buttons, images, icons) organized into sections. As you hover over or select elements and sections, outlines appear highlighting the editable areas.
Editing Page Content
You can directly edit and customize the content of elements on your page:
Text Components
Click on text elements like headings or paragraphs to edit the text directly. A formatting toolbar will appear with options for text styles (like Heading 1), bold, italic, underline, text alignment, and link insertion. Variables, such as [hero-heading] or [hero-subheading], indicate dynamic content that can be personalized; you can create new variables or edit or delete predefined ones.
Image Components
Click on an image element to change it. Options may include selecting an Image, Youtube, Vimeo, or Wistia content source. You can also access link settings for images, including linking to a URL or using Variables.
Button Components
Click on button elements (like [primary-cta]) to edit their text and configure their actions. You can set the button style (Primary, Secondary, Tertiary). Actions can include linking to a new page, opening a modal, opening a Popup Form (if form integration is added), or triggering a Scheduling Integration (if configured).
Icons on Buttons
Click on icon elements to change them. An icon picker modal allows you to search for and select icons from various libraries.
Working with Sections
Sections are containers that structure the layout of your page content.
Adding Sections: You can add new sections to your page. When you hover between sections, a large "+ Add Section" button will be visible. Clicking this opens a modal where you can choose from different section categories (Navbar, Hero, Content, Social Proof, Footer) and select pre-designed section layouts within those categories.
Section Settings: Each section has settings accessible via a gear icon. This opens a sidebar where you can configure settings like adding a custom ID or a Class to the section.
Section Actions: You can perform actions on sections, such as moving them up or down, duplicating them, or deleting them using icons located near the section controls. You may also be able to add new rows within a section.
Using Variables
LiftPilot utilizes variables (e.g., [hero-heading], [number-of-brands], [logo-1]) to allow for personalization. These variables indicate content elements that can be dynamically populated, often used in conjunction with features like ABM page generation, or by a CSV upload. You can create, add, or edit variables on all elements on the page.
In the Page Editor, variables appear within square brackets, such as [hero-heading] or [primary-cta]. They are associated with specific elements on your page to indicate where personalized content will be displayed.
You can create a new variable in the Variable field by typing the variable name and pressing Enter on your keyboard. To delete a variable, open the Variable field again and remove the variable name using Backspace. You’ll see a confirmation message in the top-right corner of the editor whenever a variable is created or deleted.
Here's how variables are shown to be used with various components in the Page Editor slides:
Text Components (Headings, Paragraphs):
Variables like [hero-heading] and [hero-subheading] can be directly embedded within the text content of the page.
You can choose to set a variable for the entire component in the toolbar’s Variables field. The variable tag appears above the component and also in the formatting toolbar, indicating that this text content is fully controlled by a variable.
Button Components:
Button titles, such as the primary call-to-action, can also be associated with variables like [primary-cta]. You can set the button title as a variable by replacing it with [variable-name].
When editing a button, you can configure its action. One of the linking options available is "Variable". This allows the button's destination or behavior to be determined by a variable value, so a URL could be personalized for each page separately by Clay or CSV upload. You can select from a list of available "Variables" or create a new one.
Image (Media) Components:
Images (media components) can also be linked to variables, like [hero-image].
When editing an image component, you have options for the content source (Image, Youtube, Vimeo, Wistia).
Choosing the content source will determine its settings.
The Image component will allow you to upload an image directly within the editor. It will also include a Variables field, where you can specify a variable to dynamically replace the uploaded image with a source URL. Additionally, there will be a URL field where you can set a link for the image — this field also supports variables, allowing the link to be personalized for each page.
In sections displaying multiple images, such as a logo section, individual image placeholders can be tied to unique variables like [logo-1], [logo-2], etc..
Page Status and Actions
The top bar displays the current status of the page, such as "Draft" or "Published" or "Unsaved Changes".
Publishing: If the page is in "Draft" status, the button in the top right will say "Publish". Clicking this makes the page live.
Editing a Published Page: If the page is "Published", the button changes to "Edit". Clicking "Edit" requires confirmation and changes the status to "Unsaved Changes".
Updating a Published Page: Once you have made changes to a published page ("Unsaved Changes" status), the button becomes "Update". Clicking "Update" saves and publishes your latest changes.
Reverting Changes: If you have "Unsaved Changes" on a published page, you can click the status indicator to open a modal asking if you want to revert back to the last saved version. Clicking "Confirm" discards the unsaved changes.
Preview: The Preview button allows you to see how your page will look before publishing.
Page Name: Clicking on the page name in the top left reveals a dropdown menu where you can change the name of the page.