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.
Numbered/Lettered Points (click the dropdown arrow next to it to see all options)
Bullet Points (click the dropdown arrow next to it to see all options)
Remove Indent/Add Indent
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:
Media
Videos must be uploaded to a video hosting site like YouTube, Vimeo, Wistia, etc. Once you have an externally hosted video, easily add the embed code to your site by clicking in your page to bring up the content editor and clicking Insert > Media > Embed.
Image
Can upload JPG, JPEG, or PNG images. Settings include Image Description, Dimensions, and Caption.
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
Adding buttons and anchor text are a great way to help your members and website visitors find what they're looking for on pages with a lot of content by "jumping" to a specific area of the page.
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.
Accordion
Accordions allow content to be hidden in collapsable areas.
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
Turn links into buttons with 2 button styles, based on your website's branding.
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.
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.
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 branded colors, fonts, font size, headers, etc. please contact the Novi team for a quoted rate on design changes.
Custom text colors can be turned on in Association Settings > Static Content > Display Settings, but this is not recommended. For brand consistency, text colors are set within a Novi site's CSS, defining the styling the website. If used, admins should be cognizant of accessibility. When using custom text colors, it is recommended that admins use an accessibility contact checker tool to test contrast levels.
Additional Resources: