Adding Links and Buttons | Kent State University

Adding Links and Buttons

Link to Kent State content

Various file types can be uploaded and linked to, however the file must first be added to Drupal as a File content type.

When setting links, “click here” and “read more” should be avoided. Rather, set the link on a descriptive label. For example: Find more information about Wellness Programs (set the link on the wellness programs text).

All links that lead to Kent State content should be linked to a node ID rather than a URL address. Linking to a node ID will prevent the link from breaking if the page or group is ever renamed.

  1. Highlight the text you want to link.
  2. Click the Link to content icon on the toolbar (near the end of the second row of icons). The Link to content properties will open. 
  3. Enter the page title or a keyword phrase in the Search for content field to search for existing pages.  A list of nodes that fit the search criteria will be generated.
    Link to content screenshot
  4. Locate the the page you want to link to from the list, the node URL will automatically populate in the Link URL field. If you are not able to locate the node in the list that is generated, there are two other methods to locate a node ID.
    Locate a node ID screenshot
    1. Navigate to the content (in a separate browser tab or window).  When logged in, users will see the menu bar at the top of every page. The menu bar displays the page's node ID.  If you do not see the black menu bar simply add https:// before the www in the address bar and you will be logged in.
    2. If the content is from your same group you can search for the content and get the node ID by selecting View Group Content from the Group Actions list on the menu bar.
  5. ​After the node id URL is added to the Link URL field by one of the methods above (i.e. /node/184396), click the Insert link button.
    Link to node ID screenshot

Link to an external page

  1. Highlight the text you want to link.
  2. Click the Link to content icon on the toolbar.
  3. Enter the complete URL (i.e. http://www.nonksusite.com) in the Link URL field.
  4. Click the Insert link button.

Creating a button as a link

Buttons are a great way to direct users to a call to action and they provide a great way to separate sections of a page.  To style linked text as a button, highlight the linked text then select the button style from the Styles menu (located in the third row of icons).  Below are samples of each button style available.  Please note, while editing all buttons will display blue with white text; they will not display the true button style.  You will see the style applied once your content is saved.

Small Button sample: Kent State University

Primary Button sample (changes text to all caps): Kent State University

Angled Button sample: Kent State University

Text Button sample: Kent State University

To remove a button style highlight the button text and select the current button style.  This will remove the button style from the text.

To change a button style select the desired button style after removing the current style. 

Anchor Link

A link that will ‘jump’ a user to a specific part of a page.

  1. In order for the link to jump to the top of where you want the link to land a blank line with a space added to it needs to be placed above where you want the link to land.
  2. Highlight the space.
  3. Click the Anchor icon (flag icon - located near the end of the second row of icons).
  4. Enter a name for the anchor location in the Anchor Name field.  Use all lowercase letters with hyphens between the words if more than one word is necessary.
  5. Copy the Anchor Name.
  6. Select the OK button.
  7. Highlight the text that will link to the anchor location.
  8. Click the Link to content icon on the toolbar.
  9. To link to a location on the same page enter a hashtag (#) followed by the anchor location name in the Link URL field. For example, if your location name was schedule, you would enter #schedule in the Link URL field. To link to a location on a different page you would enter the page URL followed by a hashtag (#) and the anchor location.  For example, https://www.kent.edu/summer-sessions#schedule.
  10. Click the Insert link button.