Before you build your first page, it helps to know how Ontraport Pages fit together. Once you understand the building blocks, every setting makes sense. Let's take a quick look.
A page is a stack of blocks. Each block holds rows and columns, and the columns hold your elements. Elements are the actual content, like text, images, buttons and forms. A block can have up to 12 columns and as many rows as you need. Advanced Mail uses this same block-based editor, so once you learn it, you can build emails too.
There are settings at every level: the whole page, each block, each column and each element. Together, they let you build almost any layout.
Your pages live in the Pages collection. Just click Pages in the top navigation. Open a page and you'll see the editor, with your canvas in the middle and the palette on the side. At the top left are global settings for the whole page: font styles, a five-color palette, and page width. Choose small, medium, large, full or custom to set exactly how many pixels wide your page is. When you change a global style, every element that uses it updates.
The Settings tab holds the rest of the page-wide options. Set a background color or image for the page, then fill in your SEO and social sharing details. That's the title that shows in the browser, the description that shows in search results, and the image people see when your link is shared. Your favicon, custom code and display settings are here too. The grand tour covers each one.
Each block has its own settings. Hover over a block and click the settings wheel on the right. In the sidebar, you can set the block's background, spacing, borders and shadows. You can also make it a sticky block that stays at the top as visitors scroll.
Display settings control when a block shows up: on which devices, at what times, and for which visitors. That's how you personalize a page, and there's a whole lesson on it later.
To change a block's layout, open its settings wheel and choose Edit block. Plus signs appear around the block. Click one on the left or right to add a column, or on the top or bottom to add a row. Each column has sidebar settings too, for its background, spacing and borders.
Elements are your content. Drag them onto your layout from the palette on the left. Every element has a Settings tab for its content and options. Some, like buttons and form fields, also have a Style tab. You'll learn each element in the Page elements lesson.
Everything nests. Elements sit in columns, columns sit in rows inside blocks, and blocks stack up to make the page. So the best way to control where things go is to build your layout with columns and rows first. That's an Ontraport best practice, because it keeps your content consistent across screen sizes. Then fine-tune with spacing. Blocks and columns have spacing settings, and every element has a Position tab for padding, margin, alignment and sizing.
Here's why that matters. On a phone, side-by-side columns stack vertically, with the left column on top. You'll learn to fine-tune that in Designing for mobile devices.
Finally, publishing. A page isn't live until you publish it. Saving creates an unpublished draft, so after you make changes, publish again to make them live. You can publish to a free Ontraport domain, your own domain, or WordPress. The publishing lessons cover each option.
And once you have several pages on one domain, you can group them into an Ontraport Site. Then you set things like your favicon, your 404 page and your tracking code once, for every page on the site.
So: a page is a stack of blocks, blocks hold rows and columns, your elements go in the columns, and there are settings at every level. Next up, Ontraport Pages: The grand tour, where we'll walk through the editor and its page and block settings.