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.

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!

Before you begin editing, ensure the Page Editor toggle 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.

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.

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.

Editor Section: EDIT

The options available under "Edit" are the standard Undo, Redo, Cut, Copy, Paste, Paste as Text, Select All, and Find & Replace.

You should always use Paste as text when copy/pasting content from somewhere other than your site in order to fully remove formatting. Ctrl + Shift V on a PC in Chrome will also do the trick, or Cmnd + Option + Shift + V on a Mac.

Editor Section: INSERT

Liven up your webpage by inserting a video or picture! You can also add links, anchors, and horizontal lines to improve readability.

Novi Tip: The "Link" and "Image" options are also available in the bottom right section of the Content Editor:

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.

Learn more about adding and formatting videos on your website.

Link - Insert a link to an external URL or link to content within your website (e.g. a static page, a blog article, an event, a product - anything with a unique URL!).

Note: When linking to a page within your website, only enter the end of the URL. For example, if you're linking to the member directory with a URL of https://yourassociation.com/members, you only need to type /members 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!), and Target (whether or not the URL should open in a new window).

Image - Can upload JPG, JPEG, or PNG images. Settings include Image Description, Dimensions, and Caption.

Learn more about how to add an image to a page.

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.

Learn more about adding anchor text to a webpage.

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.

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 spice up your images.

Options under the "Format" drop-down include:

Inline (Text Formatting) - Bold, Italic, Underline, Strikethrough, Superscript, and Subscript

Headings - 5 header styles, based on your website's branding.

Blocks - Paragraph, Blockquote, Primary Call Out and Secondary Call Out are the ones that you'll use most.

Alignment (for text) - Left, Center, Right, and Justify

Images - Image on Right, Image on Left, and Circle Image. You'll always want to use these to format images, rather than the general text alignment. It will add padding between the image and the text. Learn more about how to add an image to a page.

Buttons - Turn links into buttons with 2 button styles, based on your website's branding. Learn more about how to create a button.

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 bottom section of the Content Editor:

Editor Section: TABLE

Insert a table on your webpage by clicking on Table > Table > highlight the number of rows and columns with your cursor > then click to create the table.

Use the Cell, Row, and Column options to manage the table (insert/delete/merge/copy/paste).

NOTE: By nature, tables are not responsive and can be a little tricky. 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.

Editor Section: TOOLS

The "Tools" drop-down in the Content Editor is where you can access the Source Code and Accordion feature.

Source Code - This is where advanced users can edit the HTML of a webpage. This is also where you can drop in a third-party embed code, such as a Facebook photo album embed.

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.

Save each section 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.

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.

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.