This lesson walks you through constructing pages from top to bottom.
Home > Ontraport for marketing > Pages > Overview: How pages work
Overview: How pages work
Course Instructor
- 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
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, 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.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified