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.
Resources keyboard_arrow_down keyboard_arrow_up
Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software.
Visit the blog
University Pricing Chat
clear

Page blocks

Last updated on: December 13, 2024

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

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 the add button 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.

Build your block layout

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.

Favorite blocks

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.

Copy from existing page

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.

pre-designed blocks

 
 

 

Edit your blocks

Back to top

To edit your block, hover over its setting icon 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

block settings

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.

layout editor settings

Click the pencil icon 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 move icons 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 copy button to copy your block.

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

Click trash icon to delete your block.

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

Delete confirmation

Click check 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

Block top bar

Click database icon 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 global block icon 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 layout icon 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.

margins and padding

Click favorite icon 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.

Block sidebar

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

Background

Back to top
 

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.

video background settings

Spacing

Back to top


block spacing settings

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.

Mobile block settings

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

Back to top
 

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.

Block border settings

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 settings

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

  • Click the locked toggle 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:

available border styles

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

unlocked border style example

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

  • Click the locked toggle 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 color settings

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.

arrow border example

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

Arrow border settings

Drop shadow

Back to top

drop shadow settings

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 the locked toggle 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.

drop shadow settings

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.

sticky block settings

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

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 “50% 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.

Learn more about personalizing your pages in this video.

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 this 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.

From the "Display this block to whom?" dropdown, you can set your blocks to show for:

  • Everyone
  • Anonymous visitors only – Visitors who aren’t cookied by Ontraport
  • Identified visitors only – Visitors who have the Ontraport cookie
  • Some identified visitors – Visitors who have the Ontraport cookie and fit your condition*
  • All logged in members – Members who have logged in to your membership site
  • Some logged in members – Members who have logged in to your membership site and fit your condition*
  • Everyone except logged-in members – Anyone who isn’t logged in to your 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. You can choose from the following conditions:

  • Was subscribed to automation before or after a certain date
  • Has been on an automation for a certain amount of time
  • Contact is paused or  active on automation
  • Field is this value
  • Contact has tag
  • Contact doesn’t have tag
  • If contact is subscribed to fulfillment list
  • If contact is not subscribed to fulfillment list
  • Relationship does or does not exist
  • Has ordered a certain amount of product
  • Is subscribed to product
  • Access to Ontraport Membership Site is this status


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.
 

Personalizing with conditional display blocks use case

Personalizing a visitor's experience is simple with block display conditions based on purchase history. You can tailor your messaging by showing similar blocks with slightly different copy to three distinct groups: potential repeat customers, identified visitors who haven't made a purchase yet, and brand new site visitors. Create blocks with these display conditions to achieve this use case:  

  • Purchased (Identified Visitors): Use "Some identified visitors only" with the condition "Has ordered > greater than or equal to 1 > of any product." This block will show content to users who have made at least one purchase.
    • In this block, you can show a discount code as a thank you to returning customers.
  • Not Purchased (Identified Visitors): Use "Some identified visitors only" with the condition "Has ordered > equal to 0 > of any product." This block will display content to users who haven’t made any purchases.
    • Use this block to highlight a first-time buyer discount.
  • Anonymous Visitors: Use "Anonymous visitors only" with no conditions. This block will show content to visitors who are not logged in or identified.
    • Display a sign-up prompt in this block. 

Watch this demo video to see how to set this up.

 

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.

url condition

Advanced settings

Back to top

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 SettingsCustom CodeHeader.
  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 settings icon 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.

adding rows example

Column sidebar settings

Back to top

column sidebar settings

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

Background

Back to top

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

  • Transparent
  • Color
  • Image

Spacing

Back to top

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

Border, arrow and shadow

Back to top

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:

sticky column example 1

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

sticky column example 2

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 the settings icon 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 PublishSave & Publish to make your changes live.

sticky column settings

Advanced settings

Back to top

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 SettingsCustom CodeHeader.
  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.

Related university lessons

Building a page
This lesson walks you through how to build an Ontraport page from start to finish.
Personalizing with merge fields
Using merge fields, you can easily include a contact’s name (or more!) on the page for a personalized experience. Learn how to do it here.
Publishing your pages
Learn how to publish your landing page to your own custom domain or to an Ontraport domain.
arrow_drop_down_circle
Divider Text

Related support articles

arrow_forward
Create and edit your page
arrow_forward
Host downloadable files and videos
arrow_forward
Use global blocks on pages

 Pro tips

Tip #1: You can copy your block’s display conditions to quickly add multiple similar rules. Hover over the condition you want to copy, then click copy button. Your copied condition will appear under your original where you can customize it to fit your needs.

Tip #2: If your border color is black, the groove, inset, outset and ridge border styles will appear solid. That’s because these settings darken your selected border color to create your selected effect.

  • To create a black border using these styles, select a dark grey hex code, such as “#424242” to create the effect. Click here to see an example.
Features
Company
Resources
Live events
Access
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified
[bot_catcher]