The link, also known as a hyperlink, is a reference to another document or webpage.  There are 4 different link types that are used on the Drupal site.

Internal Path
To link to a page on your site, use an internal path which is a relative path. This is the recommended method for linking to content on your site. 
 
URL
To link to a document on your site or an external website select URL. 
 
Link to anchor in the text
Select this option when linking to text on the same page. 
 
E-mail
Select this option when linking to an email address. 
 
Add a button
Select this option when inserting a button with a link. 
 
Link to an Internal Path

Insert Link - Internal Path

To insert the internal path link, follow the steps below:

Step 1

In the body field of your content type (basic page, article, etc) select the linking text. Click the link (WYSIWYG link icon) icon to open the dialog window.

Select linking text

 

Step 2

Select the option, internal path.

Select link type

 

Step 3

Select the link type, Internal path. Start typing the name of the page that will be linked to in the Link field.  The system will auto-complete available matches.

Type name of page in link field

 

Step 4

Select the applicable page and click OK to insert the link. The page name is displayed along with the system reference in brackets.

Click ok

The link is inserted.

Link is inserted

 

 
Link to an External Site

Insert Link - URL for External Site

Step 1

In the body field of your content type (basic page, article, etc) select the linking text. Click the link (WYSIWYG link icon) icon to open the dialog window.

Select linking text

 

Step 2

Select the option, URL.

Select Link Type URL

 

Step 3

Select the Protocol drop-down and select the appropriate one for the external site. Enter the full URL.

 

 

Step 4

Click OK to apply the link and Save the webpage.

Link Inserted for URL

 

Link to a pdf or document

Insert Link - URL link to document

Step 1

In the body field of your content type (basic page, article, etc) select the linking text. Click the link (WYSIWYG link icon) icon to open the dialog window.

Select linking text

 

Step 2

Select the Link Type option, URL.

Select Link Type URL

 

Step 3

Select the <other> Protocol from the drop-down list and click Browse Server to navigate to the File Browser to select the file on the server.

Browser Server

 

Step 4

File Browser displays.  Double click on the document to link to.

File Browser to select document

 

Step 5

The relative URL path for the pdf document is inserted. Click OK to apply the link and Save the webpage.

File thing path added

The linked text displays.

Link Inserted for URL

Link to an Anchor in text

Insert Link - Anchor in text

Linking to an anchor in the text is a two-stage process.

  1. Create an anchor on the page.
  2. Create an internal link pointing to the anchor.

 

Step 1

Select the text to use as the anchor where you would like to direct the user and click the anchor icon.

Selected text for Anchor

 

 

Step 2

Insert a name for the Anchor and click OK.

Name the Anchor

 

The Anchor is created.

Anchor in Text

 

Step 3

Select the anchor text the user will click on to navigate to another location and click the link icon.

Create link for Anchor

 

Step 4

Select the Link Type, Link to anchor in the text. Select the Anchor by anchor name and click OK.

Select Anchor Name

 

Anchor text is hyperlinked.

Anchor text hyperlinked

 

 

 

 

 

 

 
Add a button
Drupal Template: 
UQ School Template

To insert a button on a Website, follow the instructions listed below using:

  1. Link dialog window
  2. Source code

Insert a button using the Link dialog window

Step 1 

Open the Content Type (basic page, article, etc) where the button will be inserted.

 

Step 2

Complete the following:

  1. Highlight the text that will converted to a button
  2. Click the link icon on the WYSIWYG editor to open the link dialog window.

Select text to be converted to a button

 

Step 3

The link dialog window appears. On the Link Info tab

  1. select the link type
  2. insert the link path.

Insert link for button

 

Step 4

On the Advanced Tab, enter button in the stylesheet classes field. 

Tip: ensure the stylesheet class is entered in lowercase.

Insert stylesheet class button

 

Step 5 

Click OK and the button, Register, displays.

Note: the button width setting reflects the text width plus padding. To expand the button width to the 100% width setting proceed to Step 6.

Example of button

The Register button displays:

Add a button - published display

Step 6

Edit the content. Right click on the button and select Edit Link

Edit Button link

 

Step 7

On the Advanced Tab of the link dialog window, enter button expand in the stylesheet classes field. 

Tip: ensure the stylesheet class is entered in lowercase.

Stylesheet class button expand

 

Step 8

Click OK and the button, Register, is saved. 

Updated button in WYSIWYG

The Register button displays at 100% width:

Add a button 100 percent width display


Insert a button using Source Code

Step 1 

Open the Content Type (basic page, article, etc) where the button will be inserted.

 

Step 2

Click Source icon in the WYSIWYG editor.

Select Source code

 

Step 3

Insert the cursor in the location where the button will display. Insert the code of the button type.  In this scenario, the Default Button will be inserted using the code: <a class="button" href="#">Default Button</a>

The # symbol refers to the URL that will be inserted.

inserted code

 

Step 4

Replace the # in the code with the URL that it should link to. In this instance, the # has been replaced with http://jobs.uq.edu.au/caw/en/listing/ and click Save.

URL reference

 

The default button displays:

Default button displays

 


Default Button Code

<a class="button" href="#">Default Button</a>

Replace # in the code with the URL that should be linked to the button.

DEFAULT APPEARANCE: Default button
HOVER APPEARANCE: Default button activated