Elements are the building blocks of your Ontraport Pages: the text, images, videos, forms and other content you drag onto the canvas. In this lesson, you'll see where to find them, how they're grouped, and how to set them up.
Elements live in the palette on the left side of the editor. Drag one onto your page and drop it right where you want it. They're sorted into groups. Text and Button covers headlines, body text, buttons and dividers. Image and Video adds images, icons, videos and slideshows. Form and Sales collects information and takes payments. Then there are Customer, Dynamic content, and Advanced elements, like navigation menus, countdown timers and custom HTML. Many elements work in Advanced Mail too, but some, like video, forms and payments, are for Pages only.
Click any element to open its settings on the left. Every element has a Settings tab and a Position tab, and some also have a Style tab. The Settings tab comes first. Its options depend on the element, like a button's text and link, or which image to show.
Buttons, form fields and a few other elements have a Style tab. Pick a look from your presets or favorites, or click Edit Style for more detailed control. Once an element looks the way you want, click the heart icon to save it as a favorite and reuse it. You can save whole blocks and pages as favorites too.
For fonts and colors, work page-wide whenever you can. At the top left of the editor, Font Style sets your page's default fonts, and Color Palette holds five colors to use throughout. Change a font style or a palette color, and every element using it updates. That keeps your page consistent and polished, and makes changes quick. When you're editing text, highlight it and choose a style from the Font Style dropdown in the text toolbar.
Need a font that isn't in the list? You can add fonts from Google Fonts, Adobe Fonts, or font files you host yourself. You paste a code snippet into your site's header, or into one page's custom code, and it overrides your font styles. Custom fonts don't show in the editor, so check a published page. The Support Center walks you through each option.
Form Field elements add fields to a form. Choose the type of record to update, like Contacts, then pick a field. You can set its label, placeholder text and a prefilled value, and write your own message for required fields. Here's a time-saver: style your first field on the Style tab before adding the rest, and the fields you add after it use the same style. And every form needs a Submit Button, or your page won't publish.
To sell on a page, add payment elements to your form. Credit Card adds the secure card fields most payment gateways need. The Stripe Payment element puts several ways to pay in one place, like Google Pay, Stripe Link, and pay-over-time options such as Klarna and Affirm. It's available on Plus and above, with the Stripe or Stripe Token gateway connected to your order form. Shoppers see options based on their location and device, and the payment methods you've turned on in Stripe. It can't share a block with Credit Card elements, and it doesn't work while Stripe Tax is on. This group also has PayPal buttons, Order Bump, Upsell, and Order Summary, which customers need to use coupon codes.
The Position tab controls an element's padding, margin, alignment and size. For quick changes, hover over the element and drag its handles to move or resize it. For exact values, use the Position tab.
The Customer group has three elements: Update CC Button, Change PW Button and Payment Info. Together they make a Customer Center, where members log in to see their purchase and payment history, update their card details and change their login information. Your page must be published to your membership site's domain, with its display settings set to all logged-in members.
In the Dynamic content group, the Search element adds a search bar to your site. Choose a search results page, which shows matches from the dynamic blocks on it. Search needs the Dynamic CMS package on your account.
One more layout option. You can make a column stick to the top of the page as visitors scroll, which is handy for navigation, a course outline or an order form. Click Edit block, hover over the column and click its settings icon. Open Sticky Column and turn on the toggle. You can also make it stick only within its row, so it won't cover the blocks below. Then click Done and publish.
So: drag elements from the palette, set them up in the Settings, Style and Position tabs, and keep fonts and colors consistent page-wide. Next up: designing for mobile devices, so your pages work just as well on phones.