Company Blog Support
Frank Hagan


    Back to Top

    Note: Not all images and content apply to ONTRAPORT 5.
    For backwards compatibility, some articles cover legacy features.
    Please Contact Us if you run into any problems.

    Editing ONTRApages Colors, Fonts, Backgrounds and Page Width

    Style: Colors, Fonts, Backgrounds and Page Width

    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):

    top styling bar

    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.


    Selecting Page Fonts

    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.

    edit page font

    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. 

    Editing the Page Colors

    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.

    edit page colors

    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.

    Adjusting the Page Width

    Click Page Width to select the width of the page. The ONTRApage will be restricted to that total width, centered in the browser viewport.

    edit page width

    Changing Page Backgrounds

    The Page Background dialog allows you to choose an image, a color, or a transparent background.

    edit page 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.


    Other Resources

    ONTRApages Basics:

    Selling Products and Leveraging Upsell Opportunities

    Publishing Your ONTRApages

    Articles in this section

    Have more questions? Submit a request


    Powered by Zendesk