This lesson walks you through constructing pages from top to bottom.
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.
Home > Ontraport for marketing > Pages > Overview: How pages work
Overview: How pages work
You'll learn:
- The difference between page settings and block settings
- Where you can change the title, background, SEO settings, and page width
- How to create and edit blocks
- How to make the elements (text, buttons, images, etc.) look good on your page
- How to publish your page
Sam Flegal
Overview: How pages work
This lesson walks you through constructing pages from top to bottom.
- The difference between page settings and block settings
- Where you can change the title, background, SEO settings, and page width
- How to create and edit blocks
- How to make the elements (text, buttons, images, etc.) look good on your page
- 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, we’ll take a look at Ontraport Pages. With an understanding of the building blocks of Pages, you’ll be able to design pages that look great and help you get more customers.
Let’s get started.
Pages are built of blocks, stacked on top of each other. These blocks are made up of rows and columns, and within those are elements, like images, text, buttons and forms.
Pages have settings that apply to the whole page, while block settings apply only to that block. The same goes for column settings and single element settings. Together, these settings allow you to create just about any page design you can dream up.
Let’s jump back to page settings. These include things like title, background and SEO settings, which you will find here , as well as page width, which you’ll find over here . Inside that page framework, you’ll find blocks. Blocks each have their own layout as well as a bunch of other settings. You can find those settings in block layout mode by clicking on the gear next to the block you want to edit. You can change things in here like background, spacing, and some fancy conditional display properties that we’ll get into later.
Every block is made up of rows and columns, which you can resize, delete, or add to right here. Your elements fit inside these columns. In individual columns, you can change the style including the background, spacing and more.
Finally, let’s talk about the elements -- the actual contents of your page. These include text, buttons, images and more. Each element has its own settings too, depending upon the element type. We’ll go through those settings in a later video.
One important thing to understand is this: elements live in columns and columns live in blocks, and blocks live in pages. This means that if you squeeze the size of the page by setting a max width, the blocks inside will also be squeezed to fit. So, this will make the columns smaller, and the elements within it smaller.
Elements will always grow to fit the space they’re in, so if you want to shrink an image or text area, you do that by limiting the space.
For example, you can shrink an element by making the column thinner. Or you can add space to the inside of the column in column spacing. Or you can add padding to the element itself, in the element positioning settings here. Each of these settings are used in different situations, and we’ll cover those in a bit.
Once you’ve got your page looking just right, it’s time to publish it. There are a lot of publishing options, which we’ll cover in another video. For now, just understand that until you publish your page, it’s not going to show up on the internet.
And, if you make changes to your page after you hit “publish” they won’t appear live on the internet until you RE-publish the page.
That’s it for our high-level overview of pages! In the rest of this series, you’ll learn more about each of these components of a page. We'll start with pages and blocks, then elements. Then we'll cover how to design for mobile devices, look at your publishing options, page personalization and much more.
Now that you understand the nesting of the parts of Ontraport’s pages -- that pages are made up of stacked blocks, and that blocks are made up of columns and rows, and your elements go inside of those -- you’re ready to dive in and put a page together. Let’s get started in the next video on creating a page.
Let’s get started.
Pages are built of blocks, stacked on top of each other. These blocks are made up of rows and columns, and within those are elements, like images, text, buttons and forms.
Pages have settings that apply to the whole page, while block settings apply only to that block. The same goes for column settings and single element settings. Together, these settings allow you to create just about any page design you can dream up.
Let’s jump back to page settings. These include things like title, background and SEO settings, which you will find here , as well as page width, which you’ll find over here . Inside that page framework, you’ll find blocks. Blocks each have their own layout as well as a bunch of other settings. You can find those settings in block layout mode by clicking on the gear next to the block you want to edit. You can change things in here like background, spacing, and some fancy conditional display properties that we’ll get into later.
Every block is made up of rows and columns, which you can resize, delete, or add to right here. Your elements fit inside these columns. In individual columns, you can change the style including the background, spacing and more.
Finally, let’s talk about the elements -- the actual contents of your page. These include text, buttons, images and more. Each element has its own settings too, depending upon the element type. We’ll go through those settings in a later video.
One important thing to understand is this: elements live in columns and columns live in blocks, and blocks live in pages. This means that if you squeeze the size of the page by setting a max width, the blocks inside will also be squeezed to fit. So, this will make the columns smaller, and the elements within it smaller.
Elements will always grow to fit the space they’re in, so if you want to shrink an image or text area, you do that by limiting the space.
For example, you can shrink an element by making the column thinner. Or you can add space to the inside of the column in column spacing. Or you can add padding to the element itself, in the element positioning settings here. Each of these settings are used in different situations, and we’ll cover those in a bit.
Once you’ve got your page looking just right, it’s time to publish it. There are a lot of publishing options, which we’ll cover in another video. For now, just understand that until you publish your page, it’s not going to show up on the internet.
And, if you make changes to your page after you hit “publish” they won’t appear live on the internet until you RE-publish the page.
That’s it for our high-level overview of pages! In the rest of this series, you’ll learn more about each of these components of a page. We'll start with pages and blocks, then elements. Then we'll cover how to design for mobile devices, look at your publishing options, page personalization and much more.
Now that you understand the nesting of the parts of Ontraport’s pages -- that pages are made up of stacked blocks, and that blocks are made up of columns and rows, and your elements go inside of those -- you’re ready to dive in and put a page together. Let’s get started in the next video on creating a page.
settings
Turn your business on with Ontraport.