Company Blog Support
Frank Hagan
posted

Contents

    Back to Top

    Edit 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.

    Select and Edit 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.

    Font sizes and line height ranges are 6px-180px. 

    Font weight ranges from 100-900.

    Edit 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.

    Adjust 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

    Change 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.

    Edit Mobile Fonts and Backgrounds

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

    Mobile preview

    The font styles button will change to Mobile Font Style. Click on the Mobile Font Style drop down to edit the mobile fonts.

    Mobile font style editor

    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:

    • Any of the listed font families
    • Italic or normal
    • Font size: 6px to 180px
    • Line spacing: 6px to 180px
    • Font weight range: 100 to 900 (400 is "normal" and 700 is "bold")

    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.

    Adjust background image by adjusting the block spacing

     

    Other Resources

    ONTRApages Basics:

    Selling Products and Leveraging Upsell Opportunities

    Publishing Your ONTRApages

    Articles in this section

    Have more questions? Submit a request

    Comments

    Powered by Zendesk