This lesson walks you through how to build an Ontraport page from start to finish.
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
Course Instructor
- 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
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
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!
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified