DNN9 CMS
USER GUIDE
FIS Website Services
A comprehensive user guide to reference when using your DNN9/EVOQ Content Management System. You may see “DNN9” or “EVOQ” interchangeably, but they are the same software program. This user guide is an augmentation of the training you received after the launch of your new website, but is hopefully comprehensive enough that new content managers can use it to edit your website.
Table of Contents
I. Identification/Vocabulary
1. Logging In2. Navigating as a Logged-in User
3. Assets
4. Pages
a. Details - Page Name, Menu Placement, and description/keywords b. Permissions - Users can or cannot see the page
c. Advanced - Modules, Appearance, and more
II. User Tools and How to Edit
1. Editing Text a. The Basics b. Inline Editing c. Advanced Editor i. Page History d. Adding Links e. Adding Images
f. Using the Accessibility Checker
g. Previewing Your Changes
2. Modules
a. Adding a New Module
b. Changing a Module Title
c. Adding an Existing Module
i. Copying Style
ii. Linked Modules/Display on Every Page
d. Moving a Module
3. Pages
a. Adding New Pages
b. Editing the Current Page’s Settings
c. Deleting a Page
4. User Accounts
a. Adding a New User
5. Recycle Bin
6. Where to Go for Help
I. Identification/Vocabulary
1. Logging in
There are a few ways to login to your website. Pull up your website, and go to the address bar of your browser. Enter any of the following to the end your URL in order to access the login page:
/login
Your login page will always have the Username and Password fields. Enter your username and password, and click the Login button.
Click Reset Password if you have lost or forgotten your password, or if it has expired since the last time you
logged in. You will receive an email from [email protected] with directions. If you do not receive this email, make sure to check your spam folder.
If you find yourself locked out, wait fifteen minutes for the lock to expire. You are welcome to log a ticket for FIS to help you, but usually it is more expedient to actually wait out the lock.
Password Requirements
Passwords should be a minimum of 8 characters in length and include at least:
Start your password with a letter and do not use sequential characters such as abcd and 1234, repetitious ones like aaaa and 1111, or spaces.
*Incorrect formatting is the #1 reason you’ll receive an error when resetting your
• 1 Uppercase Letter • 1 Lowercase Letter • 2 Numbers
2. Navigating as a Logged-in User
Now that you’re logged in, your website’s appearance will have altered slightly to accommodate the editing tools now visible on the page. If you’re worried that something looks “off,” open a private or incognito window to view the site as if you were not logged in. You can switch back and forth between windows to compare your changes (remember to refresh the private/incognito window). You will also be able to view your page using the Edit Footer.
Persona Bar
The Persona Bar is the black bar along the left (just like you see here). Your log out link, Content, Manage, Settings display at the top half, and your User avatar (or initials) and the Edit icon are at the bottom.
Content
Assets include Files, Pages, and the Recycle Bin.
Manage
Manage holds the Users and Templates menus. You will only need to use the Users menu.
Settings
The only enabled menu under Settings is Workflow. This option is what controls content staging. You will likely not have to go here often.
3. Assets
Anything you might upload, display, or make available to download is considered an “asset.” Images, PDFs, and even HTML files can be loaded or deleted from here. You also have the option of adding files from the content editor (more below).
Drag and drop makes uploading files easy - you may click Add Asset, or just drag your file over the open
asset manager. A drop area with dotted blue outline should appear, but if you click your mouse out of the dotted blue box, the browser will instead display your file. But you can just click Back in the browser, and try again. Add Folder adds a new folder within the current directory.
When you hover over an asset/file, options will sweep in from the right. Edit file name (pencil), Move (folder), Copy (duplicated documents), Download (arrow into box), and Delete (trash can) are your available options.
4. Pages
Outside of editing your content, you may find most of your work will be in this menu over the others detailed in this user guide. This area allows you to add, delete, and move pages. You can hide them from the menu, hide them from search engines (useful when you are building a page not yet ready to be deployed but you also want it visible for review), or even set certain pages to only be viewed by certain
Providing Word, Excel, or other files on your website is not recommended as they can (unintentionally) contain viruses. We suggest saving all your files as PDFs if you intend to make them available to clients.
a. Details Tab - Pages Initial View
When you open Pages, your initial view is the main Details tab of the page you were on when you opened the menu. Notice it is highlighted blue on the left-hand side.
You’ll see the page Name (which dictates the URL of the page as well as the name in the navigation
button), Title (the text you see on a browser tab if you set it - great for SEO!), Description, Keywords, Tags, Parent Page, Logo, Favicon, Display in Menu, Link Tracking, Workflow, and Enable Scheduling.
Use Description, Keywords, and Tags to describe your site, location, products, and other pieces of
information you’d like to use for search engines. You’ll also improve SEO with your content, but you can go further if you decide to use the page settings.
Parent Page is how you set your page as being highest
in your page hierarchy, or nested under another page for organization. Your main navigation pages/buttons will be Parents - so they should be set to <None Specified>, although you’ll also need to use the next option - Display in Menu - for the page to appear. Parent/Display in Menu = Appears in Menu.
The left column on
the Pages menu shows all of the pages in your website in the
order of your current navigation. Pages with a [ + ] next to them can be expanded to show the child pages / the sub-navigation of that page. Clicking on the 3 dots to the right of the page name in the left column will give you the option to Add, View, Edit, or Duplicate
that page.
Workflow is the setting for how your pages will be published.
By default your website will be configured to Content Staging/ Save Draft, which will allow you to edit and save content without
publishing to site visitors. Direct Publish is exactly what it sounds
like - content changes are live immediately when you click Save. Enable Scheduling allows you to configure dates for the page to turn “on” and “off.” You can use this
setting if, for example, you have a promotion running for a week and don’t want the page to be visible after the promotion expires.
You can also enable scheduling on individual modules, like the Alert notification on your homepage!
You can have parent pages that do not appear in the menu (perhaps your Contact page, linked in the header, doesn’t need to also be in the menu). You can have child pages (the dropdowns) that appear or do not appear. You have a lot of options, but good organization here will go a long way with your site visitors and search engine results.
b. Permissions Tab
Permissions are what allow users to see a page. This is another way of creating content that you might not be ready to release - you might create a page but leave the View permissions off - and work until your
launch is ready to go. For visitors to see your pages, the permissions grid should look like the following:
c. Advanced Tab
Modules
Here you can view and edit the settings of the modules on your page. When you add a module and neglect to change the title of it, you may wind up with a page of modules named “Text/HTML”. This oversight can be frustrating if you want to copy a module to another page! So it’s a good idea to name them while you’re working. You can also delete a module from here, if you need to. More information on Modules and how to configure them below.
NEVER give “All Users” any other permissions besides View! “All Users” means any site
Appearance
This tab is a very eye-catching one but please DO NOT TOUCH as it has been specifically configured for your website. It is very easy to break your site by clicking around on this tab, so we recommend contacting FIS if you have questions about the appearance of your website and how it can be updated.
SEO
This tab is slightly misleading. The best way to update your keywords and description is on the Details
view of your page. On the SEO tab however, the two fields you might use most here would be the Page Header Tags, and Allow Indexing.
What you WOULD likely use this box for would be marketing tracking pixels or Google Tag Manager code. You may also see content in this box for special styling or unique JavaScript for custom functionality.
Allow Indexing hides or displays the page to search engines. Allow Indexing On means your page will be
picked up and show in a results page. Allow Indexing Off means the page will not show in a search. You will
likely not have to adjust this setting, unless you want to investigate or you feel your page is not correctly being crawled.
More
If you have a page that should “exist” but not be clickable, you might go here to “disable” the page. A disabled page is almost entirely a menu item page that should not itself have content, but be present only to display the child pages that do have content. This is not a setting you’re likely going to need to adjust.
We do not recommend using the Page Header Tags section for adding META tags - if you don’t use the correct HTML syntax you will end up with plain text inserted at the very top of your page. Use the predefined fields on the Details tab.
II. User Tools & How to Edit
1. Editing Text
a. The Basics
You can visit pages and view them without the fear of making an accidental edit. You can only enter or update content by entering the Edit Mode. The Pencil icon at the bottom of
the Persona Bar will open and close Edit Mode.
When you enter Edit Mode, the Edit Footer appears at the bottom of the page, and available panes will
have a dotted blue outline.
b. Inline Editing
Any time you just want to edit existing text for a small update, or if your page is hidden from users so that you can work at your leisure, you might find using the Inline Editor to be fastest. You’ll
have a limited number of toolbar options, and if you click away the editor will close.
While in Edit Mode, you can start by clicking on the “A” icon if there are no modules where you
need them, or you might see text reading “Click here to edit content.” This will open the Inline Editor.
The Inline Editor has a limited toolbar but is great when you only need to update your rates or change a branch’s hours, etc.
c. Advanced Editor
If you need more tools, you will click on the Advanced Editor button at the far
right end of the Inline Editor toolbar, which will open the window below: The “T” icon is for the Text
Formatting Menu. You’d use
this menu to select headings or any custom styles that have been built into your website during development. Other icons will allow you to bold, italicize, add an image or link...if you hold your mouse over the icon a tooltip will appear to explain its purpose.
That’s a little small, so let’s zoom in on the toolbar buttons. You may see some of these in a different order.
Hold your cursor over each icon and a tooltip will appear explaining its purpose. Where it says “Add Content...” is where you’ll be working.
After editing your text, adding images or links, or any other changes you have made, click on the Close
button at the very bottom of the pop-up window. Page History
If you’d like to view previous versions of the page, compare versions, or even roll your changes back, click on Page History in the Edit Footer at the bottom of the
page. You will see several previous versions of the page you are currently working on.
Selecting two checkboxes on the left will allow you to compare versions, clicking
d. Adding Links
Use the Link icon to add a hyperlink.
You may link text (highlight the word or phrase you wish to link), or an image (click on the image before clicking on the link icon). Once you click the icon, a pop-up window will open for the URL and any settings.
Link Type lets you select other pages on the website, links on
other websites, or even PDFs. To link to another page on your website, click Page to find the desired destination.
To link to another site, paste it into the URL field. If you do not need to
employ a “speedbump” warning that users are leaving your site, you can hit OK now and be done. See below about additional speedbump steps.
Target determines how the link is opened
- in a new window, a new tab, or the open tab, among other options.
Opening a link in a new tab or window is not accepted as accessible behavior. If providing an accessible website is one of your highest priorities, leave the Target tab alone so that the link opens in the same window.
Upload allows you to load or select a PDF for users to
view and download. Click Choose File, and your typical file manager dialog will show up for your computer/drive. Select your file, and hit OK in the dialog.
Click on Send it to the Server to load the file. As
mentioned previously, the content management system loads your file in the “root” of the Asset Manager.
The dialog will switch back to the Link Info tab when
done, and you’ll see the file name and file directory information populated in the URL field.
You may hit OK now if you’re ready to finish.
If you prefer to add a tooltip (to notify users the link is for a PDF document), click on the Advanced tab to
continue (below).
This interface stores your uploads in the root of your assets, so if you want to place all PDFs into folders for organization, you should use the Asset Manager to load your files, then select the files while editing content.
The Advanced tab allows you to set both classes (for styling or functionality) and tooltips.
Key text into Advisory Title if you want text to appear when a mouse arrow hovers over the link (Optional,
see below for more about titles and accessibility).
Stylesheet Classes can be used to apply style,
or more commonly the speedbump warning. On links going to a third party sites, a pop-up warning telling site visitors that they are leaving your secure site is frequently needed for compliance reasons.
For an external link, type the word “external” (lowercase, without quotes) in Stylesheet Classes.
For an email link, type the word “email” (lowercase, without quotes).
Additionally, your website’s Style Guide page may show you other classes available.
The additional fields should not be filled in, as they are for advanced HTML users. Click OK to return to the rich text editor, and then Save to save your changes.
You’ve just added a hyperlink!
To meet Accessibility Standards, you don’t want links on your website that just say “Click Here” or “Read More.” Clients using screen reader software won’t know what the link is referencing. Add descriptive Title text to these links to clarify. Examples would be “Click here to view our current rates” or “Read more about our Mortgage Loan Program”
e. Adding Images
Adding an image to your page is also easy to do using the CMS. When editing your content, place the cursor where you wish to add an image, and then click the Image icon to get started.
The dialog for the images looks similar to the links dialog.
If you already have the URL of an image (for example, from the Asset Manager), you can paste it into the URL field. This field will populate once you upload the image here, though.
Another dialog will open on top of the Image window, for you to select or upload.
On the left, select the folder you need. If you forget to pick a folder, your upload will be placed in the root folder. Click on the Upload icon which
looks a little like a tin can with a blue arrow. The Upload File dialog allows you to drag a file
over the red bar, or click Add File(s)... to use
your operating system’s file manager. Once your file (or files) have been dragged or added, click Start Upload(s). If you are replacing an image, be sure to check the Override box at the bottom. There’s also a Cancel button at the bottom if you need to back out of the dialogs.
Tip: Keep your images organized into folders rather than just uploading everything into the site root. This will make it much easier to find them later!
You should see a progress bar...
and then the file dialog again.
You can click on your image, then click OK at the
bottom left of the dialog. Leave the URL Type set to
Relative URL.
You’ll come back to your original Images dialog, with your image now showing in Preview (if it is a large
image, you may only see part of the image).
Alternative Text (alt text) is probably the most
important field on this dialog. Using alt text allows a website to be accessible to any impaired site visitor. The text does not have to be elaborate, only descriptive of the image so that special browser interfaces can “read” the image to someone unable to see. This field is a best practice to use each and every time you place an image. Do not use the words “photo”, “image”, “icon”, or “logo” - the screen reader already announces that. See more on
Always upload the correct size image - don’t use the Width and Height fields to “resize” it. Loading a 1200 x 1200 pixel image and then “shrinking” it in the image properties still causes a 1200 x 1200 pixel image to load even if you’ve set it for 50 x 50 pixels. Your site visitors will wonder why your page is taking so long to load!
HSpace/VSpace (optional) - use these fields to create space around an image, if you do
not want text touching the image. You may not have that issue, or you may need to have additional space added in certain cases.
Alignment will allow your image to float to the left or right with the text flowing around it.
f. Using the Accessibility Checker
You may have noticed the first button on the toolbar for the Accessibility (A11y) Checker. You can use this
checker to make sure you’ve not forgotten to add alternative text, whether it was this edit or something done last month. Click the button to open the checker. For the screenshots, the alt text added earlier has been removed.
Items that should be adjusted will get flagged like this example. Your image is missing alt text? Add that text now, and click Quick Fix.
Click OK at the bottom to see
your image.
You may see you accidentally picked the wrong alignment, or in fact loaded a big image.
Double click or Right click
the image to open the dialog again for adjustments.
A quirk of the checker is that the “notice” will correct error of “title” on images - which in fact is not as necessary as the alternative text. As mentioned earlier, the title text will display if you hover over the item, whether it is a link or an image.
If you had added an image without adding your alternative text, you’d see this blank value field on the error.
But look what happens if you filled in your text and clicked Quick Fix:
The issue numbers changed, and the text you entered earlier populates here. Click Quick Fix again, and
the checker should show no more errors (ideally, this modal will be what you see any time you use the
A11y checker!).
If you’re still worried that something may be amiss, click on the Source button to see your HTML, and you’ll
g. Previewing Your Changes
One option for viewing your changes as mentioned above is to open an incognito browser window where you are not logged in so you can see the page as your customers would. However, this only works if the page is already published. What if you want to view your
changes while editing?
In the Edit Footer, mouseover the “eye” icon and you will be given the option to preview your changes as they would appear on a desktop, tablet, or phone.
2. Modules
a. Adding a New Module
Available panes are outlined with a blue dotted line and show three block icons. These three icons are the easiest way of adding content and getting started. The first two (text and image) will add a new Text/HTML
module and open the inline editor immediately.
The third option, the cube, is to add a custom module. You will usually not have any custom modules
available, so click one of the first two icons to add your new module.
The HTML Pro Module (also called HTML or HTML/Text) is the most commonly used module on DNN sites.
Text, images, lists, tables, videos, links, and more can all be used within an HTML module, and edited as needed. Special modules may require assistance, but most HTML modules can easily be edited by users with little web experience.
b. Changing a Module Title
After your site goes live, it should have all modules already titled. You can see (and edit) module titles from the Page Manager, or from the page itself. When you add a new module, it will by default be named Text/
HTML.
The easiest way to see (and edit) the module’s title is by holding your cursor over the content in that section. In the top right you will see a cog wheel icon (Settings) an arrow icon
(Move) and the module’s name.
Note the example shows “Text/HTML” instead of something like “Banner”, “Consumer Checking”, “Mortgages”, or “Online Banking Access.”
To update this, mouse over the Settings icon and click on Settings. Change the title, and click Update.
Why are Module Titles Important?
1. Search engine optimization results (SEO). If you have a lot of
unnamed modules, you’re missing out on opportunity to talk about your products, bank branches, or customer-attracting information. Search engines look for keywords, which are not only configured in your page settings but used in your content.
2. Sharing modules across pages. In the next section we will show you how to copy a module to other
pages. (Think of a Quick Links section you’d like to have on multiple pages.) You won’t know which module to copy if you only see a list of “Text/HTML” modules.
c. Adding an Existing Module
Since adding an existing module is a little different than just clicking the “A” icon we looked at earlier, here
is some information about this useful feature.
There are two times when you might want to use an existing module in your content: you want to copy a module that is identical to another one so you can use the styling and formatting, or, you want to share a module across pages so that you only have to edit one, but update them all (typically, this module could be on every page - think Quick Links again).
Copying Style
To copy from a template or master page for style, open Edit Mode on your target page (you’re
adding a module to Personal Checking? Edit Personal Checking). Click on the Add
Existing Module icon in
the Edit Footer.
A dialog will open. At first, it’s going to be blank, but that is because you have not selected your supplying page yet. You can search, or click on the arrow to see what’s available. For this example we’re using the Master Page as the supplier page. Notice the Make a copy box at the top - it’s
checked. If you make a copy (checked), you’ll have an identical but unlinked module.
You may have a “master” page or a template page on your website, where your developer has added styled placeholder modules for use or study, as well as the “source” versions of modules already shared across your pages. Start here.
When you’ve selected a page, the dialog will populate with all the module options you have to select from. (They are all Text/HTML! I should have named them so I’d know which to pick!)
Click the module you want to copy and it will appear on your page, where you can click and drag it over to whichever section you’d like it to appear.
Linked Modules/Display on Every Page
Adding a linked module across the entire site is the same, just with one extra step.
Add a new module (or copy an existing, if you need the styling), and add your content. When it looks good and is ready to publish (module title included!), then open
up the module settings.
Check Display Module on All Pages and then Update. This
setting can be unchecked or checked at any time, so if you have a module that should no longer be on every page, you can uncheck it later.
A good use for this would be when you want a separate but nearly identical footer module, for example a page that cannot have the FDIC logo. The steps for this case may be
something like this:
1. Delete the footer module on the page in question (don’t worry, it’ll be in the Recycle Bin!) 2. Add Existing Module with “Make a copy” checked
3. Edit module to remove the FDIC logo
Your copied module is now on your page, and while it still has the content of the original, the two are not linked. Make your content changes, and publish!
d. Moving a Module
Modules can be moved around the page between individual panes simply by drag-and-drop. Remember, panes available for use will have a dotted blue outline.
Click on the top of the module and while holding down your mouse button, drag the module over the pane where you’d like it to go, then let go.
3. Pages
a. Adding New Pages
There are two options for adding new pages - creating a completely blank page, or duplicating an existing page. Most likely you will want to duplicate an existing page so you can retain the formatting. If you duplicate a page, you’ll only have to edit the content on the new page, which will already be styled and in the correct locations (panes.)
To begin, open the Pages menu in the Persona Bar. On the left-hand side, click
on the page you’d like to duplicate, click the three dots, then select Duplicate.
Fill in the Name of the new page (you can do the Title, Description and Keywords now, or come back to it), determine its location in the menu by
using the Parent Page dropdown, and decide if it should Display in Menu.
(Reference pages 6-7 for details.)
Since you are duplicating a page, the Workflow and Permissions will copy
over, as will the Modules. Since this is a new page, you’ll want to determine
which modules you’d like to copy over. Click to the Advanced tab to be
presented with your options. Notice in the screenshot I’ve selected both modules to copy over. I picked “Copy” for the main
content, and “Reference” for the
Quick Links, since that’s a module that’s shared across all pages (but we only want to edit in one location.)
It doesn’t let you update the module titles here, so once you’ve made the new you will need to remember to do that.
Click the Add Page button and you will have a duplicate page.
b. Editing the Current Page’s Settings
Access the settings of the page you are currently on by either clicking the “Gear” icon in the Edit Footer or
by opening the Pages menu in the Persona Bar.
c. Deleting a Page
If you’ve created a page you no longer need, click on the page on the left-hand side to get to its settings, then scroll to the very bottom. You’ll see a Delete button.
4. User Accounts
a. Adding a New User
*Only Content Managers have access to add new users
To add another website editor, there are two steps. The first step is to actually add the user. Mouseover
the Manage icon on the Persona Bar and click on User. In the top right corner of the Users page you will
see an Add User button.
If you delete a page, module, or user by accident, you can always restore it from the Recycle Bin!
The section will expand, allowing you to fill in the details of your new user. All fields are required, and the username must be at least 5 characters long and an alphanumeric value. It’s typically easiest to click
“Random Password,” as when you check the box “Send an Email to New User” it will email the user with
their new account details along with a link for them set their own password.
Click Save and you will see the new user added to the list.
Step two is to make them a Content Manager or Content Editor so they can actually edit the website.
Content Managers: Have permission to manage (add/delete/modify/reposition) content
within a page.
Clicking on the Shield icon to the right of the user’s details will open the Roles dialog.
Start typing the word “Content” and your two options will appear for selection. Pick one and click Add. If
you leave “Send Email” checked it will notify the user that you have added them to a role.
5. Recycle Bin
The Recycle Bin will allow you to recover any pages, modules, or users you have accidentally deleted.
Mouseover the Content icon in the Persona Bar and click on Recycle Bin to access this section.
The tabs across the top allow you to access the different deleted items, and the icons under Actions allow
you to restore or delete.
Nothing will leave the Recycle Bin unless it is manually deleted or you click the blue Empty Recycle Bin button, and both ask for confirmation first.
6. Where to Go for Help
If you need help editing your website or you need changes that the CMS does not allow you to make, simply create a ticket through the FIS Client Portal for Website Services or call 877-554-4221, option 3. We will respond within 24 hours to assist.
The correct settings to reach the Website Services from Client Portal are:
Additionally, we have Maintenance Plans available if you have more changes than you have time for! Visit