Edit Legacy ONTRApages Colors, Fonts, Backgrounds and Page Width
Note: This article covers our legacy ONTRApage builder. For details on our newest Page builder, see this article.
Applies to: All ONTRAPORT accounts. ONTRApages use the colors, fonts and page styling of material design, tested and proven to increase engagement and present content in the most readable and search-engine friendly manner. The overall page design can be modified by selecting the element on the top styling bar on the Canvas (it is visible when the Palette is in the "Blocks on This Page" view): No customization is necessary to create pleasing layouts, and we encourage you to try the pre-formatted font packs and color palettes without extensive modification to maintain the material design standards. This will give you time to fine tune your message and focus on growing your business. But for those who need to modify fonts and colors, we have extensive customization options. A selection of 39 Page Font collections provide a set of fonts for 8 different page elements: Header 1, Header 2, Header 3, Label, Button, Large Body Text, Body Text, and Quote. You can edit each one for font family, font size, font face, line height and font weight, and can toggle it to italics as well. The changes you make to a font here cascade throughout the page. Click Font Suggestions at the bottom to display all 39 Page Font sets in the Palette. As you hover over the suggested font sets the display in the Canvas shows the fonts. Font sizes and line height ranges are 6px-180px. Font weight ranges from 100-900. 39 color palettes use five related color elements, Primary, Complementary, Dark, Light, and White. Click the color icon to display the selected colors. Click on the color element name to reveal the color editing functions. Type in the color hex value or choose a color from the color picker. The color picker has two modes, the default 256 web-safe color tile mode and, by clicking the artist's palette icon at the bottom, an infinite slider color picker. Click the Color Suggestions link to see all 39 color palettes in the Palette on the left. As your mouse hovers over a color palette the Canvas previews the new colors. Changes you make to the page style apply only to the current page, and do not get saved with the color palette for use in other pages. To re-use your color and font choices use the Copy from page function when creating a new page or the Rename and Copy Blocks function for individual Blocks. Click Page Width to select the width of the page. The ONTRApage will be restricted to that total width, centered in the browser viewport. The page width setting is not applied to the Mobile version. Mobile versions of pages are always at 100% regardless of the page width setting for the desktop view. The Page Background dialog allows you to choose an image, a color, or a transparent background. Type in the hex color value, or select one of the 256 web-safe colors. Click on the artist's palette icon in the color picker to use the color slider to choose a color. Display of the page background may be hidden by background colors or images in individual Blocks. Edit each Block's background to the same color or choose "transparent" to allow the page background to show through. The View Mobile Display feature allows you to view the ONTRApage on a simulated mobile device, and adjust font style (the font family, italic, and bold settings), font size, page width and background image specifically for those devices. Mobile Display Settings Video Editing Mobile Font Styles Click the View Mobile Display button. The canvas will scale to 360px wide which is the average size of a small mobile device. The font styles button will change to Mobile Font Style. Click on the Mobile Font Style drop down to edit the mobile fonts. Edit the font face by selecting one of the options in the drop down, then adjust the font size, line height and weight (boldness) by using the sliders. You can also enter a desired pixel size manually for the font size and line height values. The choices presented are: Click the Save button to accept the change. When you edit in Mobile Display View the changes are locked in for the mobile device. Changes to the font style and size will not propagate to the desktop view, and future changes to the font style and size in the desktop view will not change the mobile view. Note: Only font style and size are locked for the mobile display. All other elements, including font colors, backgrounds, text, adding or removing blocks, etc. remains synchronized between the mobile and desktop display. Background Images and Block Spacing Adjust the background image in mobile preview mode by adjusting the Mobile Block Spacing. Decrease or increase the top and bottom of the mobile block spacing to adjust how the image is cropped on the mobile preview. Page Width When adjusting the page width for the desktop view the same setting applies to the mobile view. Screen real estate is much more valuable on mobile devices, so a best practice is to adjust the mobile view page width back to Full. Style: Colors, Fonts, Backgrounds and Page Width
Select and Edit Page Fonts
Edit the Page Colors
Adjust the Page Width
Change Page Backgrounds
Edit Mobile Fonts and Backgrounds
Other Resources
ONTRApages Basics:
- ONTRApages
- Editing ONTRApages Colors, Fonts, Backgrounds and Width
- Add, Delete, Move and Copy ONTRApage Blocks
- Editing Content in ONTRApages Blocks
- ONTRApages Slideshows and Countdown Timer Blocks
- Add Smartform Blocks to ONTRApages
- ONTRApages Opt-In Settings on Smart Form Blocks
- Automation After an ONTRApages Smart Form is Submitted
Selling Products and Leveraging Upsell Opportunities
- Add Order Forms to ONTRApages
- Add Products to Sell on ONTRApages
- Configure Payment Settings for an ONTRApage
- Add Shipping and Taxes to ONTRApages Order Forms
- Automation After an ONTRApages Order Form is Submitted
- Add Upsell Form Blocks to ONTRApages
- Automate What Happens After an Upsell Form Submission
Publishing Your ONTRApages
Articles in this section
- Legacy ONTRApages
- Edit Legacy ONTRApages Colors, Fonts, Backgrounds and Page Width
- Add, Delete, Move and Copy Legacy ONTRApages Blocks
- Editing Content in Legacy ONTRApages Blocks
- Legacy ONTRApages Slideshow and Countdown Timer Blocks
- Legacy ONTRApages Custom HTML Block
- Legacy ONTRApages Facebook Comments Block
- Add Smart Form Blocks in Legacy ONTRApages
- Legacy ONTRApages Opt-in Settings on Smart Form Blocks
- Automation After a Legacy ONTRApages Smart Form is Submitted
Comments