Formatting Website Content on the Frontend

Learn how to add and edit content on the frontend of your Novi website.

Melisa Smith avatar
Written by Melisa Smith
Updated over a week ago

One of the most popular (and fun!) features in Novi AMS is the control admins have over their website's content and how easy it is to make changes to formatting. In this article, we'll cover the basics of how to format your content on the frontend.

Quick Links:
Create a New Page


Create a New Page

First things first... If the page you want to format doesn't exist yet, follow these steps to add a new page to your website.

Once you have your page created, then you can move into the fun part - editing your page!

Turn on the Page Editor

Before you begin editing, ensure the Page Editor toggle at the top of the screen is set to Active.


Add Title & Subheading

  • The title should represent the main purpose of the page. This is your Header 1 (H1), which search engines look for as the title.

  • Add some descriptive text in the subheading. This should be about a few words to one sentence long. This is your Header 2 (H2), so adding too much in this section can be detrimental for SEO. Learn more about SEO.

  • The best description we've heard of for this section is: "If your H1 is your book title, your H2 is your chapter title."

Note: The colors in these sections are based on your website's branding and cannot be edited by the general editor. Want to discuss a branding refresh? Contact us!

Example of Title & Subheading:


Novi's Content Editor

When the Page Editor is toggled to Active and you click into an editable content region, the Content Editor will appear. The Content Editor is actually a third-party HTML editor called Tiny MCE that is integrated with Novi. Since it's not a full Novi tool, there are a few features that won't be covered in this article because they're not needed when editing a Novi site.

Quick Toolbar in the Content Editor

The Content Editor provides shortcuts in the Quick Toolbar to some of the options discussed in this article. Try out the icons to see their functionality!

Most of the icons' functionalities are also available in the menu items at the top of the Content Editor - review the article in full to learn more about the features of the Content Editor.

  1. Numbered/Lettered Points (click the dropdown arrow next to it to see all options)

  2. Bullet Points (click the dropdown arrow next to it to see all options)

  3. Remove Indent/Add Indent

  4. Change text to lowercase, UPPER CASE, or Title Case

Note: Editing your content on the frontend is highly recommended when available.


Saving Content Work

The Content Editor provides two ways to save your work when editing content on the frontend. To save a content region, admins can either go to File > Save on the editor toolbar, or click the green Save button on the right (if it's visible).


Editor Section: FILE

The options available under "File" are Save, Export, and Print.

  • Export

    • Export allows the content area to be exported into PDF.

  • Print

    • Print allows the content area to be printed onto a document.


Editor Section: EDIT

The options available under "Edit" are the standard Undo, Redo, Cut, Copy, Paste, Paste as text, Select all, and Find and replace.

  • Undo

    • Use this to undo any changes that were just made (ability to undo may be limited as to how many actions can be undone).

  • Redo

    • Use this to re-add changes that were undone or deleted (ability to redo may be limited as to how many actions can be undone).

  • Cut

    • Use this to cut text from an area, completely removing it from the content area, and it can be pasted elsewhere.

  • Copy

    • Use this to copy text from an area, leaving the original text in tact, and identical text can then be pasted elsewhere.

  • Paste

    • Use this to paste cut or copied text.

  • Paste as text

    • You should always use Paste as text when copy/pasting content from somewhere other than your site in order to fully remove formatting - latent formatting can cause formatting issues.

    • Ctrl + Shift V on a PC in Chrome will paste text without formatting, or Cmnd + Option + Shift + V on a Mac. 

  • Select all

    • Use this to select all text and images on a page.

  • Find and replace

    • Use this to locate words on a page and replace it with a new word


Editor Section: VIEW

These extra features enhance admin abilities when adding content, which includes Source code, Visual aids, Show blocks, and Spellcheck. With the exception of Source Code, a checkmark next to the name indicates that feature is currently turned on.

  • Source Code

    • This allows for admins who are comfortable working with code to access the source code, or the HTML/CSS code, of the page.

  • Visual aids

    • When marked, this allows invisible content areas to be displayed.

  • Show blocks

    • When marked, this displays formatting blocks.

  • Spellcheck

    • When marked, this will highlight words that are incorrectly spelled.

  • Need to add a word so the Spellchecker dictionary doesn't mark it as a misspelled word? In the Quick Toolbar, locate the Spellcheck icon and click to add words or find alternative spellings for misspelled words.


Editor Section: INSERT

Liven up your webpage by inserting a variety of content including Media, Image, Link, Checklist, Special character, Horizontal line, Insert/edit iframe, Code sample, Anchor, Table of contents, Insert footnote, and Accordion.

The following types of content can be added to a webpage by clicking the "Insert" drop-down:

  • Link (Hyperlink)

    • Insert a link to an external URL, link to content within your website (e.g. a static page, a blog article, an event, a product - anything with a unique URL!), or link to documents in your Novi Files by clicking the upload icon to the right of the URL field (see screenshot below).

      • Note: When linking to a page within your website, you have the option to just enter the end of the URL (everything after your domain). For example, if you're linking to a page with a URL of https://yourassociation.com/members-only, you only need to type /members-only in the URL field.

    • There are also settings for:

      • Text to display (this text will show when a reader hovers over the link)

      • Title (this is great for SEO!)

      • Open link in...(whether or not the URL should open in the current window or a new window)

  • Checklist

    • Beyond bullet points and numbered lists, this feature offers a checkbox-style formatting.

  • Special Character

    • Insert special characters from a selection of options.

  • Horizontal Line

    • Inserting horizontal lines is a great way to differentiate between text-heavy sections on a webpage, making it more user-friendly for readers. Horizontal lines are by default light gray and the color nor weight can be changed.

  • Insert/edit iframe

    • This allows PDFs to be embedded into a page (versus being hyperlinked out to open separately). PDFs can be uploaded into Novi Files and then embedded using the upload icon next to the field (see screenshot below).

      • Using the Size field, admins can resize the embed window by selecting a pre-determined size from the dropdown list.

      • When using the Inline Value, admins can manually adjust the width/height of the window.

  • Advanced Users: If you'd like your PDF embed to be scrollable within the window, you can access the Source Code to change the scrolling code from No to Yes.

  • Code sample

    • This allows admins to share code on the frontend without the code being active.

  • Anchor

  • Table of contents

    • This can create a list of hyperlinked anchors that jump to headers.

    • Note: the Table of contents can only jump to headers that are in the style of Header 2 or Header 3.

      • Header 2 will be the the main bullet point

      • Header 3 will be the secondary bullet point

      • Headers 4-6 will not work in the Table of contents

    • The example below uses a Horizontal Line (found under INSERT) between the Table of content menu and the actual content.

  • Insert footnote

    • This allows footnotes to be added to the page, with the numbered footnotes dropping to the bottom of the content area by default.


Editor Section: FORMAT

If you love formatting like we do, then this is where it gets fun! The "Format" drop-down is where you can change the style of your headers, create buttons, and so much more - be sure to explore and utilize the "Format" to create engaging content.

  • Formatting options for headers or paragraph text (first 4 options):

    • Bold

    • Italics

    • Underline

    • Strikethrough

The Format options below reflect each Novi customer's brand colors and brand fonts, which are determined during onboarding. If you'd like a refresh on branding and/or colors, please contact us at help@noviams.com.

FORMATS

Headings

  • Great to use to identify sections throughout the page, heading sizes range from H2 (largest) to H6 (smallest).

Inline

  • Additional formatting options beyond the first 4 in the list - Superscript, Subscript, and Code sample (Code sample explained in INSERT section).

Blocks

  • Paragraph

    • Paragraph text, also sometimes called body text, is the standard text style used outside of headers and typically has no formatting. Paragraph text is used in this sentence.

  • Blockquote

    • Blockquotes are a unique way to draw attention to quotes or other content.

    • Blockquotes allow additional formatting to be added to the text!

  • Div and Pre

    • Typically these won't be used by general admins, but for those who are more comfortable working with code, div and pre tags can be inserted.

  • Primary and Secondary Call Outs

    • Primary and Secondary Call Outs can be used to break up regions on page and do allow hyperlinks to be added along with additional formatting. The color of each callout is part of your site's branding and cannot be edited

Alignment

  • Used to align content to be on the left side, centered, right side, or justified (space is added between words so that both edges of each line are aligned with both margins)

    • Left

    • Center

    • Right

    • Justify

Images

  • Image on Right | Image on Left | Circle Image

    • You'll always want to use these to format images, rather than the general alignment. It will add padding between the image and the text, along with wrapping text around the image. (Exception: Use the general alignment to center an image. Note that text will not wrap around the image in this case.)

  • Image on Right

  • Image on Left

  • Circle Image (and on Left)

  • Novi Tip: You can click on the Image to access formatting options.

Buttons

Clear Formatting

  • Remove all formatting and revert text back to the basic "paragraph" format. For pictures, this will remove any Right/Left/Circle settings. This does not remove hyperlinks, but will remove the button formatting if applicable.

Novi Tip: Many of the options under "Format" are also available in the Quick Toolbar section of the Content Editor.


Editor Section: TOOLS

The "Tools" drop-down is where you can access Spellcheck, Spellcheck language, Accessibility checker, Source code, and Word count.

  • Spellcheck

    • When marked, this will highlight words that are incorrectly spelled.

  • Need to add a word so the Spellchecker doesn't mark it as a misspelled word? In the Quick Toolbar, locate the Spellcheck icon and click to add words or find alternative spellings for misspelled words.

  • Spellcheck Language

    • Set the preferred language for the Spellcheck to use.

  • Accessibility Tracker

    • This tool allows admins to check the the accessibility of their content.

      • Accessibility Error

        • In this example, no alternative text was provided for the image.

        • Admins can click on the question mark icon to learn more about the error.

        • The checker offers admins the option to fix the error immediately.

      • Accessibility Success

        • When content meets all accessibility checkpoints, the checker will display a success message.

      • The Accessibility checker can also be accessed from the Quick Toolbar.

  • Source Code

    • This allows for admins to access the source code, or the HTML/CSS code, of the page.

  • Word Count

    • Quickly check the word or character count of your content area.


Editor Section: TABLE

Tables are a great tool when used in ideal scenarios. That said, tables are generally not responsive and should never be used to house a lot of text. If you're a little more technical, learn more about how to create a responsive & sortable table. We recommend not having more than one table per page and to use them only when necessary.


Important Notes:

  • Always check your pages on mobile! Many of your viewers will likely be on their cell phone. Either review the webpage on your phone or shrink the size of your computer's browser window down to the smallest width to make sure everything's looking how you'd expect (right-clicking and using the Inspect tool in your browser is a great way to check!).

  • Save each content regions separately or changes will be lost. For example, the Title region is separate from the Sub-Title and both are separate from the main content section. 

  • Always paste as text when copy/pasting content from somewhere other than your site in order to fully remove formatting. Latent formatting can cause issues when attempting to format text that wasn't pasted as text.

  • Leadership Roles cannot be edited from the frontend of the website because the content is pulled from the backend and the formatting is pre-determined based on your association's branding. Learn more about Leadership Roles.

  • Branding Updates - The font and the pre-determined formatting on your website is not part of the Novi Content Editor because these are site-wide settings determined during onboarding. If you'd like to change colors, fonts, font size, headers, etc. please contact the Novi team for a quoted rate on design changes.

  • Add and update your content on the frontend when possible. In other Novi Educate articles, we often recommend adding and updating content on the frontend of your website whenever possible. This is because the backend is the database side and doesn't include your association's branding colors for links, headers, etc.


Additional Resources:

Did this answer your question?