You build your Ontraport Pages by stacking blocks on top of each other. Blocks are made up of rows and columns, and within those are elements, like images, text buttons and forms.

This article shows you how to add and edit your blocks. Once you understand how blocks work, you can design pages that look great and help you attract more customers.

Table of contents

Add a block
• Build your own block
• Add a block from your favorites
• Add a global block
• Copy from existing page
• Add a pre-designed block
Edit your blocks
• Layout editor
• Block top bar
• Block sidebar
• Background
• Spacing
• Border, arrow and shadow
• Advanced settings
• Drop shadow
• Sticky block
• Display settings
Edit your columns
• Add columns and rows
• Column sidebar settings
• Background
• Spacing
• Border, arrow and shadow
• Sticky column
• Advanced settings

Add a block

Back to top

The first step of building your pages is to add blocks.

• If you start your page from scratch, you’ll click the Add Block button to add your first block to the page.

• If you’re adding a block to a page that already has blocks on it, hover over and click Add Block where you want to add your block.

There are five ways to add a block to your page.

1. Build your own block

Back to top

This option lets you choose a block with a bare layout. You can always customize the columns and rows in your block.

• Check out the Edit your columns section below to learn more.

2. Add a block from your favorites

Back to top

If you’ve previously saved one of your block designs as a “favorite,” you can add it to your page. This makes it easy to reuse your designs and create consistency across your pages.

• Check out your block’s top bar below to see how to add a block to your favorites.

3. Add a global block

Back to top

Another type of prebuilt block is a global block.

• The main difference between global blocks and your favorite blocks is that the content on your global blocks will be exactly the same on every page you put them on. For example, your site’s navigation and footer blocks should have the same links everywhere, so we recommend you make them global.

4. Copy from existing page

Back to top

Another way to add one of your own pre-designed blocks is to copy it from an existing page. Use this option when you want to copy a block that is saved but not used frequently enough to be one of your favorites.

• Choose your Ontraport page from the dropdown, then click on the block you want to copy.

5. Add a pre-designed block

Back to top

This option lets you choose from pre-designed blocks created by the Ontraport team.

• Choose the type of block you’re looking for from your left sidebar, then click on the block you want to add.

Edit your blocks

Back to top

To edit your block, hover over its and click “Edit block.” All of the settings discussed in this article are only available after you click to edit your block.

We’ll focus on three areas:

1. Layout editor settings
2. Block topbar
3. Block sidebar

Let’s check out what you can do.

1. Layout editor settings

Back to top

The controls you’ll see when you first open a block allow you to manage basic settings. You can name, move, copy and delete blocks with these controls.

Click to name your block.

• We recommend you always name your blocks, particularly blocks that contain forms on your pages. When you select your form on your campaign triggers or goals, your block’s name will help you select the correct form.

Click to change the order your block appears on your page.

• Each time you click the up or down button, your block will go up or down one block.

Click to copy your block.

• The copy of your block will appear below your original.

Click to delete your block.

• If you’re sure you want to remove your block click Okay.

Click to confirm your settings and close your block’s settings.

2. Block top bar

Back to top

You’ll see your block toolbar at the top of your screen when you edit any block. Your block’s toolbar is where you can:

• Convert your block to be dynamic
• Make your block global
• View your block’s grid, padding and margins
• Add your block to your favorites

Click to convert your block to be a dynamic block.

• Dynamic blocks let you create lists on your pages by pulling in information from your records, such as creating a list of related blog articles or courses.
• Check out this article to learn more about dynamic blocks.

Click to make your block global.

• Global blocks can be placed on multiple pages to repeat content, such as your site’s navigation. When you edit your blocks, the changes are made in all locations.
• Check out this article for more information on setting up your global blocks.

Click to view the padding and margins on your block.

• Padding appears as a blue highlight, and your margins are in red.
  • Blocks, columns, rows and elements all have their own spacing and position settings. This option lets you view all of those settings at once.
    • Margins are the space outside of your content, and padding is the space inside.

Click to add your block to your favorites.

3. Block sidebar

Back to top

Your block sidebar is where most of your block’s settings live. From there you can customize your block’s styling, make your block sticky and access your display settings. If your block has a form on it, you can also access your form settings there.

Here’s what you can do from each of these tabs:

Background

Your block background settings let you add four types of backgrounds to your blocks:

1. Transparent
2. Colors
3. Image
4. Video

Once you select a background type, you’ll have different customization options. For example, a transparent background doesn’t have any settings, and YouTube video settings allow you to darken your video and start at a specific time.

Spacing

Your block spacing settings let you control your block’s padding, margins, sizing and alignment.

• These settings are for your entire block. If you want to edit a column, check out the “Edit your columns” section below.
• Your elements also have their own spacing settings. Check out this article for more information.

You also have a mobile tab where you can customize the spacing used for mobile devices. This helps you make adjustments to ensure your block looks great on any device.

Border, arrow and shadow

These settings allow you to add a border to your block and customize its style. You can also add an arrow to the bottom of your block and add a drop shadow to your block and/or to your block’s content.

Borders

This setting lets you add a border to a block. As soon as you select a border style, other options will appear to let you customize it.

Border radius: This setting lets you round the corners of your block’s border.

• Click to unlock your settings so you can select the border radius for each of your block’s corners individually.

Border style: You can choose from these eight border styles:

• Click to unlock your border style settings.
  • This allows you to set different colors and widths on each side of your block.

Border color: Choose the color you want your border to be.

• Click to change your border’s color when a visitor mouses over the block.
  • Choose the color you want from the “Border color (Hover)” dropdown.

Border width: Choose how wide you want your border to be.

Arrow borders

Arrow borders allow you to add an arrow to the bottom of your block. Your arrow will always use your block’s background color, which means that this option does not appear on blocks with backgrounds that are transparent, an image or a video.

These settings are simple. If you want to add an arrow border, select “bottom” from the type dropdown.

Drop shadow

Drop shadows allow you to add depth to your blocks. This usually indicates to your visitor that the block can move over blocks (check out the sticky block setting below) or that it is clickable. You have the option to add a drop shadow to your whole block, to the content in your block, or both!

You can choose from five sizes of drop shadow:

• Extra small
• Small
• Medium
• Large
• Extra large

• Click to unlock your drop shadow settings.
  • This allows you to choose the drop shadow you’d like to use when someone hovers over your block and/or its content.

Sticky block

Sticky blocks will “stick” to the top of your page once your visitors scroll past it. These blocks are great when you want to keep a promotion or opt-in form top of mind for your visitors.

When you toggle on the sticky block setting, you also have the option to hide your sticky block when your visitors scroll down the page.

• If you leave this setting off, your block will be visible at the top of your page while your visitors scroll.

Display settings

Your block’s display settings are a very powerful tool for personalization by allowing you to choose when you want your block to appear.

These settings allow you to show your content to a specific group. For example, you can show your block to only mobile visitors or visitors who stay on your page for a certain amount of time.

You can also show your opt-in form to only anonymous visitors to collect new leads. You can also get really specific and only show your block to subscribers to your membership site who have been enrolled for three weeks.

You can connect the UTM variables you use on your ads to create personalization. If someone clicks on a “90% off first month’s subscription” offer, you can show them a block on your page with the coupon code they should use to get that offer.

Device display

This setting allows you to select which devices can view your landing page block, such as mobile or desktop.

When should this block be displayed?

This allows you to show your block immediately or after a certain period of time.

Display block to whom?

This allows you to select who can view your page block. This is especially useful for gating content in a membership site.

• If you choose to display your block to “Only some identified visitors” or “Some logged in members,” you can add conditions to show different blocks to different page visitors. Check out this article for definitions of each of your dropdown options.
• The “All logged in members” and “Everyone except logged in members” display conditions can be used to create helpful navigation blocks. Check out this use case to learn how.

Only show this block if the page URL contains specific text

This allows you to show your block to a visitor only when the URL contains a specific variable, such as UTM variables or any other text in your subdomain, domain or path.

• This is an advanced marketing feature that lets you optimize your customers’ post-click experiences by sending leads to a page with content that perfectly fits your ad’s design and message.

Here’s how:

1. Toggle “Only show this block if the page URL contains specific text” on.
2. Click Add condition.
3. Select “contains” or “does not contain.”
4. Add your URL variable.
5. Click Done.

Advanced settings

Every block has an advanced settings section that allows you to add custom classes to the block’s wrapper element to target the block or its children with CSS or Javascript.

Here’s how to use custom CSS classes:

1. Open your block’s settings and click Advanced settings.
2. Add a custom CSS class to the “Custom block classes (advanced)” field.
3. Click Done again to save your block settings.
4. Go to Settings → Custom Code → Header.
5. Add the CSS you want to apply to your element.
6. Click Done to save your settings.

Learn more about custom classes and explore use cases here.

Edit your columns

Back to top

Blocks are made up of columns and rows. You can add multiple columns to each row, and every row is made up of at least one column. Every column on your page also has its own sidebar settings. From there you can customize your column’s background, spacing and border style.

Add columns and rows

Back to top

You can add 12 columns to any block and an unlimited number of rows. Here’s how:

1. Hover over your block’s and click Edit block.
2. Hover over your block and notice there are plus signs on each side of your block. Click on the side of the block you want to add on to.

• If you click on the right or the left, you’ll add a column.
• If you click on the top or the bottom, you’ll add a row.

Column sidebar settings

Back to top

Your column sidebar settings work like your block settings. But since columns are nested inside of blocks, you have fewer options.

Background

This setting allows you to to set different backgrounds on any of your columns. You can choose from:

• Transparent
• Color
• Image

Spacing

These settings allow you to control the padding, margins and alignment of your columns for both desktop and mobile view.

Border, arrow and shadow

Your columns have the same border, arrow and shadow options as your blocks. These settings are awesome when you are trying to accomplish a specific design. You can easily add the styling you want to specific columns to highlight your content.

Sticky column

Back to top

This option allows you to make columns stick to the top of the page while a site visitor scrolls. This is similar to how a sticky block functions. However, a sticky column allows you to have only one part of your block stick rather than the entire block. You also have the option of having that column remain sticky only until a visitor scrolls to the end of a block.

Creating a sticky column makes it easy to keep important content visible and easy to find, no matter where your visitors are on a page. This is essential for a good user experience on content-heavy websites.

For example, you could make a sticky column for navigation, course outlines, ads, or product categories. Or you could insert an order form into a sticky column so it is easily accessible to prospects.

Here’s an example of a sticky column in a block at the top of a page:

And here’s what visitors will see as they scroll down the page:

Here’s how to make your column sticky:

1. Click Edit block on the block that contains the column you want to make sticky.
2. Hover over the column you want to make sticky and click to open your column settings.
3. Click Sticky Column and toggle on “Make this column ‘stick to the top of the page when it reaches the top?”.
4. (Optional) Toggle on “Make this column ‘stick’ only to its row?”.
   • This allows your visitors to scroll past your sticky column once they are past the row that contains it. This is a great option if you don’t want to cover up blocks placed below your sticky column.
5. Click Done.
6. Click Publish → Save & Publish to make your changes live.

Advanced settings

Every column has an advanced settings section that allows you to add custom classes to the column’s wrapper element to target the block or its children with CSS or Javascript.

Here’s how to use custom CSS classes:

1. Open your columns settings, and click the Advanced settings.
2. Add a custom CSS class to the “Custom block classes (advanced)” field.
3. Click Done to save your column settings.
4. Click Done again to save your block settings.
5. Go to Settings → Custom Code → Header.
6. Add the CSS you want to apply to your element.
7. Click Done to save your settings.

Learn more about custom classes, and explore use cases here.