Embedding Hyperlinks and Documents

This guide describes the embedding of hyperlinks and documents onto a page.

 

Embedding Hyperlinks

 

There are two types of hyperlinks you can create – 1) a link to different page 2) a link to a later (or earlier) section of the same page.

 

Linking to a different page
  1. To add a link to another page, select the insert/edit link button while highlighting the text you want to use as the link base.

 

 

2.  Fill in the link to the page you are pointing the link to.

 

3. If you want the link to open the page in a new tab, select Link Options (the gear button next to apply) and select the option [open a link in a new tab].

 

 

Linking to the same page

To add a link to the same page, the process is simpler if you are using the DIVI framework, but it is also possible if you are not using DIVI.

 

Within the DIVI framework –

  1. You can easily link to a module in DIVI. To do this, select your module of choice and go to Custom CSS page.

 

2.Subsequently, fill into the custom CSS file anchor name that succinctly describes this module. You can now use this anchor name as the destination for a link

 

3. the link will be the address your blog, with an added hex symbol and then the anchorname (eg http://…..current_address/#anchor_name ) So for example on the page

https://blog.nus.edu.sg/usrwordpressresources/adding-documents-and-hyperlinks/

and with an anchor name actual_anchor_name in the custom CSS section,, the correct link to input would be

https://….and-hyperlinks/#actual_anchor_name

 

 

Without DIVI framework –

Without the DIVI framework, we will have to create the destination anchors ourselves. This is done using the <a id=” “>Destination Name</a> tag. First, go to the text tab in wordpress.

Key in the script tags  <a id=”anchor_name”>Destination Name</a>. Replace anchor_name with the custom id you can use to point to this anchor, and Destination name as the text you want to show your users when they float their mouse over that destination link.

You can now generate a link to this anchor, using the same structure as DIVI. Assuming the id is videos (id=”videos”) and the webpage is …. the correct link would be …./#videos

 

You can embed documents using a link, or with an accompanying viewer. Links will bring the user to a different page with the document, while the viewer will show the document on that page itself.

 

 

Embedding Documents (Link Only)

To embed a document as a link,

  1. Select the add media button, not the add documents button. The add media function is better for displaying a link to the document in a separate page, while the add document button instead shows an embedded file.

 

2. Select the document you wish to upload, and for the display settings make sure the link is to a media file.

 

3. There will now be a usable link to your document from the page.

 

 

 

 

Embedding Documents (With Viewer)

  1. To embed documents, first select the Add Document option above the main text box.

2. This should open up the add document tab, where you can choose how you want to upload the video. The two main styles are uploading a document (which will open up the typical open media prompt). Adding from a url will prompt you to paste the url that you want to link the document from.

3. Whichever upload method you choose, once you have uploaded the document, you will be brought to a page to change the options of the page. You can modify the width and height of the document, whether they can download it as well as the software used to display the document. Once you are done hit insert, and the document will be uploaded.