Hyperlinks and Buttons

December 25, 2050 / Tags: Basic Training, OmniUpdate, Buttons, CMS, Content Management System, URL, Editing, Hyperlinks, Dependency Tag

Call to Action (Hyperlink Basics)

Hyperlinks without any styling are just links. Use a regular link inside of a paragraph of text to make a subtle call out to the service when available.

Example:

For the best SEO and to aid visually impaired users, surround your link with context.

Example without Context: (Don't do this!)

Academic information can be found: here

Why is this bad?

#1: don't use 'Click Here' or 'Here'. Imagine you were instructing someone with visual impairments, you wouldn't say 'Walk there to get to the bathroom'. Also everyone knows how links work, you click them, no need to instruct people on how links work.

#2: 'Academic Information' alone is vague, like 'Academic Stuff' or 'Academic Things', but introducing 'important dates for the semester' is a good example of what they get by clicking the link.

#3: The hyperlink should be placed on the page that you are going to. They're going to the Academic Calendar page, not the 'Here page'.

Creating a link

After typing out a call to action, highlight the text that you want to make into a hyperlink, then right-click > 'Link...'.

right click

Alternatively, you can highlight the text and click the link icon in the toolbar.

A new menu will appear:

Insert menu

For the URL, never copy and paste the url to your page. Use the search icon:

This will open a menu, where you must navigate to the page that you want to link. What this does is, if we move the page that you are linking to, the url will break if you copied and pasted.

BUT- If you use the search tool, it provides a 'Dependency Tag' which will always keep the links attached. It will usually look like {{f:######}}

dependency tag

Once you've navigated to your page, 'Insert', which will apply the dependency tag.

Insert button

The other important setting is whether you want it to open in a new tab (select new window) or in the current page (Current Window).

New Window

Click 'Save', then your link has been applied.

Can I paste urls?
Toggle More Info

You can paste urls only if they're external links, ie, outside of fgcu.edu.

Example of pages that are external:
fgcu360.com
winknews.com
florida.gov
youtube.com
instagram.com

Example of pages that are internal:
fgcu.edu/academics
webdev.fgcu.edu
fgcu.edu/

Note: When using external links, choose 'New Window'.
When do I use new window vs current window?
Toggle More Info
Most of the time, keep it as current window. Don't choose new window for every link, the user will have hundreds of tabs navigating your pages. This becomes even more annoying on mobile (~60% of our audience are on mobile!)

When to use new window?
- When the link is external (outside of fgcu.edu)
- When the user needs to keep the previous page open and the newly clicked page. (This is extremely uncommon, don't abuse this rule)
How do I know they will need two tabs open?

If a student is looking at offered courses and they come from the catalog and want to check out the courses BA page, this may be a good time to use a new tab.

Buttons

Buttons are a bit more advanced to use and can often be misused. Context is also very important for buttons and everything from the hyperlink examples.

To create a button, edit your link that you've created (see previous instructions on creating a link), then click the 'Class' drop down:

Class dropdown