3. How to Use the Page Builder
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:
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
Here, you’ll find page-wide settings and configurations.
- Page Info - click here to set page properties such as custom CSS, page background, and meta info
- Actions - set page level actions and events
- Layers - create layers on your page (these work great with actions and events!)
- 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
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
Click here to add elements to your page.
- Collections - adds pre-built groups of elements, such as headers and footers
- Text - adds a text box to your page
- Image - 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 - click to add a shaded rectangle you can use to group your elements (everything positioned within the panel will move with it)
- Media - choose from your own self-hosted video or a YouTube embed
- Menu - navigate around your sites with one simple element
- 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
- Carousel - lets you create an image slideshow
- Quizitri quiz - lets you embed quizzes from Quizitri
- Shopify buy button - quickly embed your buy button from Shopify
- Separators - horizontal and vertical lines
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.
If you get stuck, click on the question mark in the lower left hand corner to be taken to the help docs.