About ONTRAPORT Pages
ONTRAPORT Pages is a flexible, drag and drop landing page builder featuring precise control over each block and element of the page.
You are a few clicks away from creating your first page. Your new page will be up in no time using our simplistic drag and drop interface, with a huge collection of customizable templates to match your business needs. Let's go!
Pages are loaded with gorgeous pre-built templates, all of which can be customized to match your business needs. This article will teach you the basic features needed to get up and running quickly.
The Pages Collection lists all the pages created in your account. Click the Page item to open it for editing, select one or more items for Actions that appear in the Action Bar, create Groups and apply Group Actions to all items selected in the Group.
At the right top are three more tools for the Collection. Search for data in any of the columns displayed in columns in the Collection, click the Pin icon to add the Collection page to the Pinned Items page, and add columns to the Collection listing.
The Add Column button displays all the available columns allowing you to select what to show in the Collection. Here are some of the columns available and what they are:
- Name (what you titled the page)
- Domain (where the page is hosted)
- Visits (total number of visits to the page)
- Unique Visits (number of unique page visits, 1 visit per session)
- Type (Legacy Landing Page, Legacy Code Mode Page, ONTRApage Legacy, ONTRApages)
- Conversions (number of unique visitors that submitted an opt in or order form)
- Conversion Rate (number of unique visit form submissions divided by unique visits)
- Date Created (added Nov. 7, 2017; will show a date if the page was created after that date)
- Date Modified (added Nov. 7, 2017; will show a date if the page was modified after that date)
Page Layout, Blocks and Elements
ONTRAPORT Pages follows a standard two-dimensional hierarchy of web page structure. Each Page consists of Blocks stacked vertically on top of each other. Blocks contain columns and rows in a grid like system. Elements are placed inside the grid. Examples of a few important Elements are, images, videos, text (headline, sub-headline and text), form fields and submit buttons. Elements appear in the sidebar once you select your Block and can easily be added to your Block by dragging and dropping!
- Page - the overall Page containing all the Blocks, Rows and Columns
- Blocks - horizontal slices of the Page that can contain multiple Rows
- Rows - each Block can have from 1 to several Rows
- Columns - each Row can have from 1 to 12 columns
- Elements - images, text blocks, forms, and nearly every other element will have Settings to function, Style to change it's appearance and Position to adjust it in the Column.
The example below shows one block. The block contains a background image and consists of two rows. The top row is one column. The second row is four columns. The second row contains elements including a headline, text, sub headline, form fields and submit button.
Create a New Page
- Select Pages from the top navigation menu. Then click + New Landing Page
- Choose a page template that best fits your needs or for a blank canvas, choose start from scratch.
- Title your page and save it.
Add Blocks and Elements
To add a block, click on the "+" icon, located on the top or bottom of the Block. Select a pre-designed block from the sidebar or build your own by selecting a basic structure.
To add an Element to a Block, choose the Element from the sidebar and drag and drop into the Block. If you don't see the Elements tab, click the word "Page" just below the back button and your page title.
Edit Block Layout and Elements
Edit Block Layout
To edit the layout of the block such as adding and resizing columns, click on the Edit Block gear icon on the top right side of the block.
The left sidebar appears and has a number of Block settings including background, spacing, borders and display settings. Display settings include the ability to show a block based on mobile or desktop, time and dynamic content based on conditions the contact has met. The edits that you make here apply to the entire block.
Add Columns by hovering over the plus icons on the left and ride side of the Palette. Add Rows by clicking the plus icons opposite the add column icons.
To edit the individual Column settings, follow the same steps above and then select the Column you would like to edit. Now in the left sidebar you will see the Column settings. Scroll through to customize the individual Column settings. The adjustments you make here only apply to the column that is highlighted.
Reorder columns by using the left and right arrows on the toolbar that appears above the row. Duplicate columns using the plus icon and delete them using the trashcan icon. Icons that appear on the right side of the block allow you to move order of the blocks up or down, duplicate or delete the entire block.
Click inside the element to access their individual settings. Icons that appear as you hover over an element allow you to move an item to another column or block, duplicate or delete. Each element has three primary tabs: settings, style and position. Settings is where you perform the basic functions needed for the element to function properly. Style is where you create how it looks. Position is where the element is placed in the column.
To learn more about each Element, see this article.
Move and Resize Elements
- Resize elements - click and drag the corner handles to adjust the element width
- Move an element horizontally - click and drag the side handles to adjust the element position
- Move an element vertically - click and drag handles in the middle of the horizontal axis to adjust the top margin
Edit Text Elements
Click on the The Text Element and and add your text. Customize the style, font, size etc using the text editor menu.
Tip: Use the Font Style dropdown menu to create consistency in your Pages!
Click on the Link icon to link your text to a url.
Edit Image Elements
Drag and drop your Image Element onto the page to insert an image. Click the change image button to upload your own image. If you'd like to add text on top of an image, add your image as a background in column under the block editor.
- Resize an image - click and drag the corner handles
- Move an image horizontally - click and drag the side handles
- Move an image vertically To replace an image click on it and select Change Image.
Add Form Fields
Drag a new Form Field Element to the desired position. Select the desired field from the drop down. Use the Settings tab to change the label or make it required, the Style tab to design how the label and field appears and the position tab for the location in the grid.
Add a Submit Button
Drag a submit button element onto the Page so contacts can add their information to your database. Click Form Settings and select your thank you page.
Note: ONTRAPORT Pages can have one form per block. All fields in the block will be entered once the submit button is clicked. Add multiple forms by adding other blocks.
Mobile and Desktop Preview
Create Pages that look great on all devices by using the Mobile, Desktop and Desktop & Mobile Preview icons. The Mobile preview icon shows only the blocks that will be displayed on a mobile device. The changes you make in Mobile preview will only apply to the Mobile view. It works the same way for Desktop view.
This allows you to create different views for different devices. For situations where you want to show a completely different block on Mobile vs Desktop, go to the Block Editor and click Display Settings from the left sidebar navigation.
Set the Mobile Breakpoint
Pages default to 600px as the breakpoint for switching from desktop to mobile view. The default setting is fine for most mobile devices in portrait mode, and appears just as it does in the editor. Sometimes your page might not look the way you want when held in landscape (horizontal) mode. That's because your page 'breaks' to mobile view mode when the screen size is 600 pixels. But on screens SLIGHTLY larger, the page will still be displaying Desktop mode, but maybe all scrunched up. Sometimes this looks fine, but when it doesn't, you can INCREASE the mobile breakpoint so that your page switches to the mobile layout on screens larger than 600px.
The adjustment range is 600px to 1920px.
Test this by looking at your page on your phone in horizontal mode. If it looks good, you don't have to adjust this setting. If it doesn't, you can increase the value here so you retain the mobile responsive view when the phone is horizontal.
Settings for the entire page are accessed by clicking on the settings icon next to the Elements, located in the left side bar.
- Page Background - Select a color or upload an image for the background of the entire page
- SEO Settings - Page title, meta description and disable from search engine indexing
- Favicon - Small icon seen next to the URL of your page title in the web browser address bar
- Custom Code - Insert tracking pixels or other code in the page header, body or footer
- Pop a Lightbox - Show a pop-up form on the page based on percentage scroll, time on page and exit intent.
Publish your Page
Our final Step is to publish the page. Click on "Publish", in the upper right hand corner and add your URL and select your domain. Alternatively, if you'd like to add the Page to your WordPress site, install the ONTRApages WordPress Plugin and do not publish the page.
Automate What Happens After the Form Submission
- Navigate to Campaigns. Create a new Campaign or open an existing one related to your Page.
- Add a new Trigger element.
- Click the + Add Trigger button.
- Select "Contact Submits a Form" for the Trigger. Use the dropdown to select the Smart Form you created.
- Adjust the Settings including:
- Which Contacts can activate this trigger (most often this will be Any Contact in account)
- If a trigger is activated and the contact is already on this campaign map (many choose add here again when triggered)
- If the trigger can only be activated once per Contact (only select this checkbox if the form fillout should be limited to the first time the form is filled out).
- Click Done in the Goal Settings panel.
- Add other elements by clicking "what happens next" below the Trigger to communicate with those who have filled out your form (e.g., send an email or an sms message)
You have now completed your first Page! Now it's time to sit back and watch your business grow.
Articles in this section
- Pages Quick Start
- Pages Elements - Overview
- Using Form and Sales Elements
- Add Order Forms to ONTRAPORT Pages
- Adding Order Bumps and Upsells to Pages
- Adding Products to Sell on Pages
- Blocks, Columns and Rows
- Editing Images for Pages
- Pages Best Practices
- Pages FAQs