3. How to Use the Page Builder

Video:

Article:

The Convertri Page Builder is where your funnel comes alive: this is where you’ll edit, preview and publish your pages, both desktop and mobile versions.

You’ll find articles that explore all the features listed here in the Page Builder section of our Help site. For now, here’s a quick tour:

Screen Shot 2017-09-26 at 14.32.08.png

Top Bar

This is where you’ll find the hare logo you’ll click to return to the Dashboard, the Publish status indicator, and the Desktop/Mobile switcher.

  • Hare logo: click here to return to the Dashboard
  • Publish status: this changes from ‘not published yet’ to ‘Published’ when your page is live
  • Desktop/Mobile switcher: click to switch between Desktop and Mobile view

Top Toolbar

Here, you’ll find page-wide settings and configurations.

  • Undo/Redo
  • Page Info - click here to set page properties such as custom CSS, page background, and meta info
  • Actions - set your page triggers and behaviours
  • Layers - create layers on your page (these work great with triggers and behaviours!)
  • Forms - configure your form to connected services
  • Products - choose the product your page will sell
  • Fonts - curate all your Google Fonts in here for a customised list
  • Display - here you can toggle the element outlines and snap grids (don’t worry, they’ll only show in the Page Builder, not on your published page)
  • Preview/Save/Publish - use these to save your work often and preview the live version.

Quick Actions Toolbar

When an element is selected, the Quick Actions Toolbar gives you shortcuts to everything you need.

  • Selection tools - clear or delete elements here
  • Position tools - full width, center align, move forward or send to back
  • Visibility tools - toggle if an element shows on desktop or mobile, or starts hidden
  • Clone tools - clone element, or clone to another layer or page
  • Element Properties - all individual element settings, including borders, background and links

Text Toolbar

When you type inside a text element - instead of simply selecting it - the Quick Access toolbar will be replaced with the Text Toolbar.

  • Font tools - choose your font, size and color
  • Formatting tools - bold, underline, italic, and alignment
  • Other text tools - hyperlink/remove link, and bulleted list
  • More tools - Paragraph or Heading styles, subscript, superscript and strikethrough, font weight and line height
  • Quick Actions - click here to toggle back to the Quick Actions toolbar

Screen Shot 2017-09-26 at 14.38.57.png

Element Tray

Click here to add elements to your page.

  • Text element - adds a text box to your page
  • Image element - opens the Media Gallery. Upload, organize folders, or click on an image to add it to the page
  • Form elements - click to add a text box, submit button or credit card input
  • Panel element - click to add a shaded rectangle you can use to group your elements (everything positioned within the panel will move with it)
  • Separator elements - horizontal and vertical lines
  • Media - choose from your own self-hosted video or a YouTube embed
  • Countdown timer - click to add a countdown timer to your page
  • HTML element - click to add custom HTML, such as an iframe or table
  • Facebook comments - click to add this social media widget

Canvas

The editing area is where you’ll drag elements to create your page. It’s WYSIWYG, so what it looks like in the Editor is exactly how it will look to your viewers. The aqua guidelines show the area that will be displayed on a standard 900px resolution, and when you have Element Outlines turned on, these will show you boxes around elements for easier positioning.

Help

If you get stuck, click on the question mark in the lower left hand corner to be taken to the help docs.