The Block Editor and Layout
Blocks are what hold the Elements that make up your ONTRAPORT Page. Blocks are extremely flexible and customizable. There are a number of ways that one may be working with Blocks. A few examples are, editing an existing one, adding a completely new block to a current page, adding or removing columns from a new or existing Block.
Adding a Block
Before moving any further, let's add a block. If you are working with one of our many Templates, you may want to add a new Block. Simply click on the "+" icon above or below the existing Block.
Or you may be starting a new ONTRAPORT Page from scratch. If so you will be directed to choose a new block.
You'll notice that Ontraport has a large selection of Block Templates available for your own personalization. Click through the different categories to find what best fits your needs.
Select your Template or Build your Own Block.
Now that we have a Block selected, lets get into the editing capabilities.
Editing Blocks, Columns, and Rows
Each Block and Column and Row in a Block, gives you the capability to add, delete, duplicate, reorder and resize. You can also duplicate or delete the entire block, or rearrange the location of the block on the page. Additionally, you can edit the style of a block, such as its background, borders and spacing, as well as a block’s settings, such as setting a block to be “sticky” or setting up a block’s animation. Let's take a look at how to customize a tweak the Blocks to your liking!
Click on the Gear Icon to access the Block Settings. Once clicked, you can move the whole Block up or down, copy, or delete, directly from the Gear icon.
The Settings will appear on the left side bar.
Now, let's take a look at the individual settings.
Background gives you four options for what type of background you'd like for your Block. You can keep it as simple as a transparent background, or as complex as a video that loops!
Unlocking More Customization!
Before moving any further. I want to take a moment to let you know how to edit more advanced settings, such as having the ability to edit the top and bottom margin separately.
You will notice as we start looking at the individual settings that some have a lock icon next to them. This will be consistant throughout many settings in ONTRAPORT Pages. If you unlock it more detailed settings will appear.
Simply click on the lock to reveal the more detailed settings!
The Spacing settings is where you can adjust and customize every aspect of the spacing.
Border, Arrow and Shadow
These are the settings that which will effect your borders. Use the sliders to adjust the size. Select types from the drop down. Customize to fit your needs!
Sticky Block is a feature that allows a block to stick to the top of the page when it reaches the top.
Here, you have the ability to show a Block on All devices or only Mobile or Desktop.
Next, is where you can select the option to show the block "immediately" or "After a period of time".
Lastly, one of our most groundbreaking features settings is accessed here. This is where you have the ability to can change any block into a "conditional blocks", which enables you to show different content to different page visitors!
Set conditions within a block to dictate which visitors see which blocks. For those more familiar with our system will recognize that theses are similar to the conditions available in Campaign Builder and elsewhere in ONTRAPORT.
You can select from the following conditions to “only show this block if these conditions are true”:
- Contact was subscribed to campaign before a certain date
- Contact has been on a campaign for a certain amount of time
- Contact is paused or resumed on a campaign
- Contact has been on a sequence for a certain amount of time
- Contact was subscribed to sequence before or after a certain date
- Contact is subscribed to sequence
- Contact is not subscribed to sequence
- Subscription to a sequence is paused
- Subscription to a sequence is resumed
- Field is this value
- Contact has tag
- Contact doesn't have tag
- Contact is subscribed to fulfillment list
- Contact is not subscribed to fulfillment list
- Contact has ordered a certain amount of a product
- Contact is subscribed to product
A couple of examples of how you may use this:
Field is this value-
If you wanted to only show those with the State field equal to California a special discounted price to a presentation your giving in the Bay area.
Contact doesn't have tag-
So that your current contacts that are clients (which would have the Client tag), don't see the special price you are offering your non-customers.
The possibilities are endless and only limited by your imagination!
Columns and Rows
Columns and Rows are what a Block consist of. The Elements reside with the Columns and Rows. Let's take a look at how to work with them.
Adding a Column
Add Columns by hovering over the plus icons on the left and ride side of the Palette
Adjusting the Size of a Column
Click the Block settings tab, then hover over the outside line of the Column. An arrow will appear, click and drag to desired size.
Adding a Row
Add Rows by clicking the plus icons opposite the add Column icons.
You will notice that the Column and Row settings tabs are similar to the Block settings. Here you can move, duplicate and delete.
Column and Row Settings
Now let's learn how to edit the individual Columns and Rows.
To access the individual Column an Row settings, click on the Block settings icon and then select the Column you would like to edit. Now in the left sidebar you will see the Column settings. Scroll through to customize the individual settings.
The Background settings gives you three options for what type of background you'd like for your column. You can also select the opacity and adjust the background settings.
Use the Spacing settings to adjust and customize every aspect of the spacing for the column.
Border, Arrow and Shadow
These is where you adjust the individual borders.
Saving your Favorite Blocks!
Another fabulous feature ONTRAPORT Pages offers is the ability to save or "favorite" a block. This is a huge time saver for your own Blocks or even organizing your favorite Templates!
Refining your Layout
The Padding and Margin Viewer is a wonderful tool for adding the finishing touched to your design.
When in the Block Edit Mode, click on the Layout icon. Once clicked, you'll notice the edit areas are highlighted. Just click on the area that you wish to edit and it will pull up those settings automatically!
Articles in this section
- Pages Quick Start
- Pages Elements - Overview
- Using Form and Sales Elements
- Blocks, Columns and Rows
- Pages Best Practices
- Pages FAQs
- Publishing Your ONTRAPORT Page
- Slideshow and Countdown Timer Elements
- Custom HTML Element
- Pages Notifications