This lesson walks you through how to build an Ontraport page from start to finish.
Solutions keyboard_arrow_down keyboard_arrow_up
Our Solutions
Ontraport's solutions work together to give you everything you need to run your business in one centralized, easy-to-use platform.
Sales +
CRMarrow_forward
Segment + Organizearrow_forward
Smart Pipelinesarrow_forward
Unified Contact Historyarrow_forward
Task Automationarrow_forward
Lead Scoring + Routingarrow_forward
Mobile Apparrow_forward
Trends arrow_forward
Ontraport Calendar arrow_forward
No-code Web Appsarrow_forward
Custom Objectsarrow_forward
Dynamic CMSarrow_forward
Conditional Contentarrow_forward
Membership Sitesarrow_forward
Paymentsarrow_forward
Order Formsarrow_forward
Offline Transactionsarrow_forward
Complex Offersarrow_forward
Upsells + Order bumpsarrow_forward
Decline Recoveryarrow_forward
Customer Centerarrow_forward
Referral Trackingarrow_forward
Pages + Formsarrow_forward
Drag and Drop Editorarrow_forward
Form Buildersarrow_forward
WordPress Integrationsarrow_forward
Marketing
Automationarrow_forward
Campaign Automationarrow_forward
Email + SMS Messagingarrow_forward
Email Deliverabilityarrow_forward
Tracking + Attributionarrow_forward
Facebook Custom Audiencesarrow_forward
Platformarrow_forward
API arrow_forward
Integrations arrow_forward
Security and Scalabilityarrow_forward
Industries we serve
Select your industry to see how our CRM and marketing software can support your growth
Learn more Resources keyboard_arrow_down keyboard_arrow_up
Pricing Chat Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software.
Visit the blog Research and Education
Bootcamp
Coursearrow_forward
Attend a hands-on training course designed to give users a solid foundation of software skills and marketing strategy.
Expert Certification
Coursearrow_forward
A course for business owners and marketing professionals wanting to support our mutual clients. Learn advanced marketing strategies and get exclusive perks.
Ontraport
Blogarrow_forward
Browse a collection of articles on marketing automation, email marketing, CRM, membership sites and more.
Step-by-Step
Templatesarrow_forward
Implement proven marketing processes with our easy-to-follow worksheets and checklists.
In-Depth
Guidesarrow_forward
Download our best-practice guides, complete with data-driven insights and tactics to help you optimize your marketing.
Podcastarrow_forward
Listen in as Ontraport CEO Landon Ray talks with with a star-studded cast of entrepreneurs, marketers and thought leaders.
Marketing
Blueprintsarrow_forward
Learn everything you need to know to develop fundamental marketing strategies with our digital handbooks.
Using Ontraport in Your Business
Software
Comparisonsarrow_forward
See if Ontraport is the right fit for you — compare the top marketing automation and CRM software on the market.
Setup Wizards
Libraryarrow_forward
Our Setup Wizards walk you through the steps to customize and launch a marketing campaign for your business in minutes.
Get the
Factsarrow_forward
View the most frequently asked questions about Ontraport so you can get clarity and feel confident in your buying decision.
Feature Use
Casesarrow_forward
See exactly what you can do with Ontraport, and learn how you can personalize it to perform your specific needs.
Calculate Your
ROIarrow_forward
Get an honest estimate of the return you can expect from an investment in Ontraport's software.
Exploring
Ontraportarrow_forward
Take a guided tour through the five phases of the customer lifecycle in a simulated business powered by Ontraport.
Try our free interactive customer portal demo!
Want to offer the convenient, self-service experiences your customers are looking for? Check out this free demo to see what you can create in Ontraport without code or developers.
Want to offer the convenient, self-service experiences your customers want?
Check out this free customer portal demo to see what you can build in Ontraport without code or developers.
error
Check out this article for more information.
Feature Updates: Since this video was produced, we have added several merge field modifiers.
Check out this article for more information.
Home > Ontraport for marketing > Pages > Building a page
Building a page
You'll learn:
- How to create the page and adjust the settings
- How to add and organize the blocks
- How to add and edit page elements
- How to tweak your design for mobile
- How to double-check your form settings
- How to publish your page
Sam Flegal
Building a page
This lesson walks you through how to build an Ontraport page from start to finish.
- How to create the page and adjust the settings
- How to add and organize the blocks
- How to add and edit page elements
- How to tweak your design for mobile
- How to double-check your form settings
- How to publish your page
Course Instructor
Sam Flegal
Related resources
[Block//Author//First Name] [Block//Author//Last Name] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Transcript
In this video, I’ll show you how to build an Ontraport page from start to finish. In just a few minutes, we’ll cover all the major tools in Pages. Even if you have no design experience, you'll be amazed by what you can create. If you haven’t watched the video on How Ontraport Pages work, start there so it’ll be easier to follow along.
We’ll build a page in six steps. Step 1: we’ll create the page and adjust the page settings. Step 2: we’ll add and organize the blocks. Step 3: we’ll add and edit the page elements. Step 4: we’ll tweak our design for mobile. Step 5: we’ll double-check our form settings. And last, Step 6: we’ll publish our page! Let’s dive in.
First let’s create our page. You can either choose a template that you like, or start from scratch. Let’s use one of our templates today. We’ll take care of a few housekeeping items first. Name the page here. Select a font pack, which will edit the font on the page as you go. Select your brand colors here. Then set your page width by testing out a few sizes and seeing what you like. To keep your site cohesive, I suggest picking one size and then repeating it on all your pages. Zip down here to set your SEO and social sharing settings. And -- you’re done with Step 1!
Step 2: Next, we’ll add and organize the blocks, and adjust block settings. First, remove any blocks from the template that you don’t like or won’t use. I’ll remove this one. Then add any more blocks you need by clicking the plus here and selecting from this big block template library.
Let’s click into the block layout mode by clicking the gear next to a block to see where you can make other changes.
You can reorder a block by clicking the up or down arrows. You can space things out by editing the block spacing here. And if you want, you can also add and remove columns, fix spacing, and add column background styling. Now I’m happy with this so I’ll move on. You can repeat this same process with other blocks on the page until you’re happy with the layout.
Step 3: let’s add and edit the page elements. This is where you add all your own content and images that make the page unique to your business. Here’s where you can change the images and the text. Move things around and change their size by grabbing these dots and dragging them. And check to see how things are looking by looking at the page preview. That's a good idea because things may look a little different on a screen that’s wider than this edit area.
Ok! We’re on Step 4: let’s tweak our design for mobile devices. Start by clicking the mobile icon to see how things look. Most of these blocks look good, but I want them to look perfect. Just FYI: as you make changes in mobile mode here, you’re only changing how things appear on mobile devices. Your desktop version is unchanged. You can even edit font sizes here, without messing up your desktop version.
Sometimes you might see a block that just doesn’t seem to look right in mobile mode no matter what you do. We’ll show you how to handle those situations in the “Designing for mobile devices” video, so we’ll skip this issue for now. But you will want to watch that video so you can take care of stuff like this.
Before you publish, move on to Step 5: check your form settings. Find these settings by clicking on the submit button and then on the form settings button here at the bottom or clicking into layout mode and then on the form settings menu here on the left. Most of the settings should be good to go, but one that you’ll want to make sure to set is selecting a custom Thank You page. Otherwise, people will end up on our generic-looking page after they fill out your form. I’ve already created one so I’ll select that here. The rest looks fine for now.
Alright, you’re on the last step:
Step 6: publish your page! We’ve got a video on the many options for publishing pages, but for now I’m just going to type in my custom domain, and add a page name like this ...and click publish! Wait a few seconds for the SSL certificate to get created and installed, and then we can visit the page and see our handiwork.
That’s it! In just a few minutes, we’ve created a page, start to finish. Of course, this is just the beginning: there are tons of ways to further personalize the page, trick out the style settings, protect the page from people you don’t want to see it, sell your stuff on the page, and MUCH more. But you’ve got the foundation for pages now, so dig into the next videos to expand your skillset!
We’ll build a page in six steps. Step 1: we’ll create the page and adjust the page settings. Step 2: we’ll add and organize the blocks. Step 3: we’ll add and edit the page elements. Step 4: we’ll tweak our design for mobile. Step 5: we’ll double-check our form settings. And last, Step 6: we’ll publish our page! Let’s dive in.
First let’s create our page. You can either choose a template that you like, or start from scratch. Let’s use one of our templates today. We’ll take care of a few housekeeping items first. Name the page here. Select a font pack, which will edit the font on the page as you go. Select your brand colors here. Then set your page width by testing out a few sizes and seeing what you like. To keep your site cohesive, I suggest picking one size and then repeating it on all your pages. Zip down here to set your SEO and social sharing settings. And -- you’re done with Step 1!
Step 2: Next, we’ll add and organize the blocks, and adjust block settings. First, remove any blocks from the template that you don’t like or won’t use. I’ll remove this one. Then add any more blocks you need by clicking the plus here and selecting from this big block template library.
Let’s click into the block layout mode by clicking the gear next to a block to see where you can make other changes.
You can reorder a block by clicking the up or down arrows. You can space things out by editing the block spacing here. And if you want, you can also add and remove columns, fix spacing, and add column background styling. Now I’m happy with this so I’ll move on. You can repeat this same process with other blocks on the page until you’re happy with the layout.
Step 3: let’s add and edit the page elements. This is where you add all your own content and images that make the page unique to your business. Here’s where you can change the images and the text. Move things around and change their size by grabbing these dots and dragging them. And check to see how things are looking by looking at the page preview. That's a good idea because things may look a little different on a screen that’s wider than this edit area.
Ok! We’re on Step 4: let’s tweak our design for mobile devices. Start by clicking the mobile icon to see how things look. Most of these blocks look good, but I want them to look perfect. Just FYI: as you make changes in mobile mode here, you’re only changing how things appear on mobile devices. Your desktop version is unchanged. You can even edit font sizes here, without messing up your desktop version.
Sometimes you might see a block that just doesn’t seem to look right in mobile mode no matter what you do. We’ll show you how to handle those situations in the “Designing for mobile devices” video, so we’ll skip this issue for now. But you will want to watch that video so you can take care of stuff like this.
Before you publish, move on to Step 5: check your form settings. Find these settings by clicking on the submit button and then on the form settings button here at the bottom or clicking into layout mode and then on the form settings menu here on the left. Most of the settings should be good to go, but one that you’ll want to make sure to set is selecting a custom Thank You page. Otherwise, people will end up on our generic-looking page after they fill out your form. I’ve already created one so I’ll select that here. The rest looks fine for now.
Alright, you’re on the last step:
Step 6: publish your page! We’ve got a video on the many options for publishing pages, but for now I’m just going to type in my custom domain, and add a page name like this ...and click publish! Wait a few seconds for the SSL certificate to get created and installed, and then we can visit the page and see our handiwork.
That’s it! In just a few minutes, we’ve created a page, start to finish. Of course, this is just the beginning: there are tons of ways to further personalize the page, trick out the style settings, protect the page from people you don’t want to see it, sell your stuff on the page, and MUCH more. But you’ve got the foundation for pages now, so dig into the next videos to expand your skillset!
settings
Turn your business on with Ontraport.