Take a tour of the element palette and settings used to create beautiful and functional web pages for your business.
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
Course Instructor
- 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)
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
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.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified