QuickSites Menu, Custom URL & Links

Add to Menu

After finalizing your Fields & Widgets and laying out your and publishing your page you may want to add your page to a menu. To do this select Menu Settings tab.

In the Menu Settings area check the Provide a Menu Link box to reveal your menu options. Use the Menu link title box to set the page title to be displayed in the menu.

The Parent Setting dropdown you can set your page as the child of another menu item.  To set your page as a child select the Parent Item you’d like your page link to appear under. If you’d like your page to be a parent item select <Main menu> under the dropdown.

In these settings you can also set the Weight of your menu item, this setting decides where in the numerical menu order your menu item will appear (e.g., The first parent item or first child will have a weight of zero, followed by one, two, etc.).

Custom URL

Quicksites will automatically generate a URL path from your page’s title. You can override this automated path feature in the URL path settings tab. Custom URL paths (referred to as an alias) are useful when transferring content from an old site and you want to match the existing page address. You may also want to match the URL path of a parent page, for easier discovery.

To set a custom URL path select the URL path settings tab and reveal the custom URL settings by un-checking, the Generate automatic URL alias box.

url

Enter your custom path in the URL alias box. You need to use what is known as a relative path for this to work.  For example, to set the alias for the URL path:

https://utmesoamerica.org/casa/study-abroad-antigua-guatemala

You only need to enter the last part of the URL after, https://utmesoamerica.org/

Notice how the alias starts with the first term in the path and doesn’t include the opening back-slash. This is the proper syntax for a relative pathcasa/study-abroad-guatemala

Links

Clicking links is the main interaction visitors have with websites. Be sure to follow linking best practices and make sure your links have good context and appearance.

Visually Hidden

On rare occasions you may need to add non-visible link context. The solution is to apply a CSS class which visually hides contextual text, while still making it readable by Google, adaptive screen readers, and other non-visual displays.

On the QuickSites platform the CSS class is “element-invisible.” Your QuickSite already has the necessary CSS to make the rest of the magic happen. So just follow these simple steps to implement this solution:

Note, that the method for adding links on the QuickSites platform varies according to which Field or Widget you are using. So, it might not be possible to use this solution everywhere. Contact the college Webteam at cofawebmaster@austin.utexas.edu for assistance.

  1. For the purposes of these instructions we will be placing our link as page content, in the WYSIWYG Field.
  2. Login, then add or open an existing page and create a read more link with your contextual verbiage in the WYSIWYG A/B rich text editor. 
  3. Next you’ll need to edit the source code for your link and contextual text. To do this, select Source from the top left corner of the WYSIWYG rich text editor menu.
  4. Follow the example below to add a span tag with the element-invisible class around the text that you’d like to hide.
    Example:
    
    <a href="/about">Read More <span class="element-invisible">about the cutest kittens on the internet</span></a>
  5. Important: In the rich text editor your hidden text will be visible. To see a preview of what your link will actually look like, you need to Save your edits as a draft. If you’ve followed our instructions you should only see a Read More link. When you are satisfied with your link return to your edits, publish and you are done!