Take a tour of the element palette and settings used to create beautiful and functional web pages for your business.
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.
Sales +
CRMarrow_forward
Segment + Organizearrow_forward
Smart Pipelinesarrow_forward
Unified Contact Historyarrow_forward
Task Automationarrow_forward
Lead Scoring + Routingarrow_forward
Mobile Apparrow_forward
Trends arrow_forward
Ontraport Calendar arrow_forward
No-code Web Appsarrow_forward
Custom Objectsarrow_forward
Dynamic CMSarrow_forward
Conditional Contentarrow_forward
Membership Sitesarrow_forward
Paymentsarrow_forward
Order Formsarrow_forward
Offline Transactionsarrow_forward
Complex Offersarrow_forward
Upsells + Order bumpsarrow_forward
Decline Recoveryarrow_forward
Customer Centerarrow_forward
Referral Trackingarrow_forward
Pages + Formsarrow_forward
Drag and Drop Editorarrow_forward
Form Buildersarrow_forward
WordPress Integrationsarrow_forward
Marketing
Automationarrow_forward
Campaign Automationarrow_forward
Email + SMS Messagingarrow_forward
Email Deliverabilityarrow_forward
Tracking + Attributionarrow_forward
Facebook Custom Audiencesarrow_forward
Platformarrow_forward
API arrow_forward
Integrations arrow_forward
Security and Scalabilityarrow_forward
Industries we serve
Select your industry to see how our CRM and marketing software can support your growth
Learn more Resources keyboard_arrow_down keyboard_arrow_up
Pricing Chat Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software.
Visit the blog Research and Education
Bootcamp
Coursearrow_forward
Attend a hands-on training course designed to give users a solid foundation of software skills and marketing strategy.
Expert Certification
Coursearrow_forward
A course for business owners and marketing professionals wanting to support our mutual clients. Learn advanced marketing strategies and get exclusive perks.
Ontraport
Blogarrow_forward
Browse a collection of articles on marketing automation, email marketing, CRM, membership sites and more.
Step-by-Step
Templatesarrow_forward
Implement proven marketing processes with our easy-to-follow worksheets and checklists.
In-Depth
Guidesarrow_forward
Download our best-practice guides, complete with data-driven insights and tactics to help you optimize your marketing.
Podcastarrow_forward
Listen in as Ontraport CEO Landon Ray talks with with a star-studded cast of entrepreneurs, marketers and thought leaders.
Marketing
Blueprintsarrow_forward
Learn everything you need to know to develop fundamental marketing strategies with our digital handbooks.
Using Ontraport in Your Business
Software
Comparisonsarrow_forward
See if Ontraport is the right fit for you — compare the top marketing automation and CRM software on the market.
Setup Wizards
Libraryarrow_forward
Our Setup Wizards walk you through the steps to customize and launch a marketing campaign for your business in minutes.
Get the
Factsarrow_forward
View the most frequently asked questions about Ontraport so you can get clarity and feel confident in your buying decision.
Feature Use
Casesarrow_forward
See exactly what you can do with Ontraport, and learn how you can personalize it to perform your specific needs.
Calculate Your
ROIarrow_forward
Get an honest estimate of the return you can expect from an investment in Ontraport's software.
Exploring
Ontraportarrow_forward
Take a guided tour through the five phases of the customer lifecycle in a simulated business powered by Ontraport.
Try our free interactive customer portal demo!
Want to offer the convenient, self-service experiences your customers are looking for? Check out this free demo to see what you can create in Ontraport without code or developers.
Want to offer the convenient, self-service experiences your customers want?
Check out this free customer portal demo to see what you can build in Ontraport without code or developers.
error
Check out this article about adding custom fonts, this article about sticky columns, and this article about adding a search bar.
Feature updates: Since this video was produced, we've added documentation for how to use custom fonts on your page. We've also added the ability to create sticky columns and to add a search bar to your page.
Check out this article about adding custom fonts, this article about sticky columns, and this article about adding a search bar.
Home > Ontraport for marketing > Pages > Page elements
Page elements
You'll learn:
- The drag-and-drop functionality of the page element palette
- How to access each element’s settings and style tabs
- Options for preset styles or creating custom styles
- How to tweak your element’s position through padding, margins, alignment and element width
- How to add elements to create a customer center (for membership pages)
Sam Flegal
Page elements
Take a tour of the element palette and settings used to create beautiful and functional web pages for your business.
- The drag-and-drop functionality of the page element palette
- How to access each element’s settings and style tabs
- Options for preset styles or creating custom styles
- How to tweak your element’s position through padding, margins, alignment and element width
- How to add elements to create a customer center (for membership pages)
Course Instructor
Sam Flegal
Related resources
[Block//Author//First Name] [Block//Author//Last Name] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Transcript
To create beautiful, functional web pages for your business, you’ll need to be familiar with the element palette and settings that live there. In this video, I’ll give you a tour of where you can go to add the elements you want and customize them to your needs. Let me show you around.
I’ll start by introducing you to the page element palette. Here, you’ll find all of the elements to create your page’s design. You just drag and drop them right onto your page’s canvas. This drag and drop functionality means you don’t have to rely on templates. You can place any of your elements in the exact position you want with total flexibility.
You can see here that all of your elements are organized into different groups. If you want to add text to your page, grab a text element. If you want to create a form, grab a form field. If you want to sell something, drop a credit card element on the form and configure the settings.
Let’s go over a few other things to know about page elements in general.
Once you drop an element onto a page, you configure the element using controls in the left palette. These appear when you click on an element or on the gear you see when you hover over it.
The palette will usually have 3 tabs: settings, styles and position.
Each element’s settings tab is a little different, but they all include basic settings like adding the text you want on your button, the picture you want to add to an image element, and so on. Most of these settings are pretty self-explanatory.
Most elements also have a style tab, where you can adjust the way the element looks. Select between preset styles, or click the “edit style” button to get into the nitty-gritty details and go wild. If you do create a custom style you want to stick with, click the heart icon to favorite it so you can find and use it again later or on another page.
Notice that when you’re setting font styles and colors for anything on the page, you’ll always get the option to use the page’s preset fonts and colors, or use custom fonts and colors.
While you can change the fonts and colors for each element if you want, it’s a better strategy to update the font styles and page colors of the whole page instead. This makes updating your page a lot quicker, and it keeps your page looking nice. Pages with too many fonts and colors tend to look messy and unprofessional.
Play around with different preset font and color packs by clicking on the suggestions menu item under each. If you set up your own preset font and color pack, it’ll always show up at the top of the list here, so you can quickly grab it next time you build a page.
One hot tip for you: if you’re styling form fields, do it after dropping the first field onto the page, before you add the rest. Each field you add after the first one will copy the style of that first field. This will save you a lot of time because you won’t have to edit field styles one by one.
Last, the position tab allows you to dig into your element’s position on your block by customizing your padding, margins, alignment and element width. Typically, settings like margin and padding are done equally on the top and bottom of an element, or on the left and right. We’ve made that easy by making it one slider for both.
But, if you want to adjust these settings separately, just toggle the lock and you’ll get two settings, one for each side. You’ll find these locks throughout the editor. For example, here in the font size you can unlock it to get separate access to line height as well.
Another hot tip: Most of the position settings can be edited simply by grabbing the little dots you’ll see when you hover, and dragging things around. The position settings will reflect your changes, so you can always come here to fine tune things if you like.
We’re almost done with our tour here!
It’s important to check out the three elements in the “Customers” section which you can use to create a customer center. When you add these elements to a page, your members can log in to view a self-service portal where they can change their information, update credit cards, or check past purchases. Keep in mind that you can only use these elements on a membership page, because they require the user to log in for them to work. I’ll go over all that functionality in a later video.
Now you’re a landing page element expert! You know where to find your elements, how to update their basic settings, and more advanced position and style settings. In upcoming videos, I’ll dig into some best practices for designing pages for mobile devices. See you again soon.
I’ll start by introducing you to the page element palette. Here, you’ll find all of the elements to create your page’s design. You just drag and drop them right onto your page’s canvas. This drag and drop functionality means you don’t have to rely on templates. You can place any of your elements in the exact position you want with total flexibility.
You can see here that all of your elements are organized into different groups. If you want to add text to your page, grab a text element. If you want to create a form, grab a form field. If you want to sell something, drop a credit card element on the form and configure the settings.
Let’s go over a few other things to know about page elements in general.
Once you drop an element onto a page, you configure the element using controls in the left palette. These appear when you click on an element or on the gear you see when you hover over it.
The palette will usually have 3 tabs: settings, styles and position.
Each element’s settings tab is a little different, but they all include basic settings like adding the text you want on your button, the picture you want to add to an image element, and so on. Most of these settings are pretty self-explanatory.
Most elements also have a style tab, where you can adjust the way the element looks. Select between preset styles, or click the “edit style” button to get into the nitty-gritty details and go wild. If you do create a custom style you want to stick with, click the heart icon to favorite it so you can find and use it again later or on another page.
Notice that when you’re setting font styles and colors for anything on the page, you’ll always get the option to use the page’s preset fonts and colors, or use custom fonts and colors.
While you can change the fonts and colors for each element if you want, it’s a better strategy to update the font styles and page colors of the whole page instead. This makes updating your page a lot quicker, and it keeps your page looking nice. Pages with too many fonts and colors tend to look messy and unprofessional.
Play around with different preset font and color packs by clicking on the suggestions menu item under each. If you set up your own preset font and color pack, it’ll always show up at the top of the list here, so you can quickly grab it next time you build a page.
One hot tip for you: if you’re styling form fields, do it after dropping the first field onto the page, before you add the rest. Each field you add after the first one will copy the style of that first field. This will save you a lot of time because you won’t have to edit field styles one by one.
Last, the position tab allows you to dig into your element’s position on your block by customizing your padding, margins, alignment and element width. Typically, settings like margin and padding are done equally on the top and bottom of an element, or on the left and right. We’ve made that easy by making it one slider for both.
But, if you want to adjust these settings separately, just toggle the lock and you’ll get two settings, one for each side. You’ll find these locks throughout the editor. For example, here in the font size you can unlock it to get separate access to line height as well.
Another hot tip: Most of the position settings can be edited simply by grabbing the little dots you’ll see when you hover, and dragging things around. The position settings will reflect your changes, so you can always come here to fine tune things if you like.
We’re almost done with our tour here!
It’s important to check out the three elements in the “Customers” section which you can use to create a customer center. When you add these elements to a page, your members can log in to view a self-service portal where they can change their information, update credit cards, or check past purchases. Keep in mind that you can only use these elements on a membership page, because they require the user to log in for them to work. I’ll go over all that functionality in a later video.
Now you’re a landing page element expert! You know where to find your elements, how to update their basic settings, and more advanced position and style settings. In upcoming videos, I’ll dig into some best practices for designing pages for mobile devices. See you again soon.
settings
Turn your business on with Ontraport.