{"id":1038,"date":"2017-10-26T17:23:52","date_gmt":"2017-10-26T21:23:52","guid":{"rendered":"http:\/\/amy.imarketbeta.com\/blog\/?page_id=1038"},"modified":"2017-11-14T12:20:38","modified_gmt":"2017-11-14T20:20:38","slug":"links","status":"publish","type":"page","link":"http:\/\/amy.imarketbeta.com\/blog\/part-2-staff-user-guide\/creating-and-editing-pages-and-weblinks\/special-content-types\/links\/","title":{"rendered":"Links"},"content":{"rendered":"<h1>Links<\/h1>\n<p>The iMarket CMS Manager allows you to easily add a link in the content of your document to another page on your site or to another website.<\/p>\n<p><strong>Note<\/strong>: This entry is about content links only (i.e., it does not have information about adding weblinks to the Site Tree.) For information about adding weblinks to the Site Tree see: <a href=\"http:\/\/amy.imarketbeta.com\/blog\/part-2-staff-user-guide\/creating-and-editing-pages-and-weblinks\/creating-and-editing-weblinks\/\">Creating and Editing Weblinks. <\/a><\/p>\n<ol>\n<li>To add a link, highlight the text or image you wish to use as a link. Then, click on the link icon in the TinyMCE toolbar. A dialog box will open where you can configure the settings of your link.<img loading=\"lazy\" class=\"alignnone size-full wp-image-1220\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/select-text.png\" alt=\"\" width=\"1130\" height=\"486\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/select-text.png 1130w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/select-text-300x129.png 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/select-text-768x330.png 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/select-text-1050x452.png 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><\/li>\n<li><strong>When linking to an internal page on the website:<\/strong> Click on the dropdown labeled \u201cLink list\u201d. This will give you a list of all of the pages on your site. Click on the page to which you wish to link.<br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-1224 size-full\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/internallinkselect-1.jpg\" alt=\"\" width=\"1130\" height=\"491\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/internallinkselect-1.jpg 1130w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/internallinkselect-1-300x130.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/internallinkselect-1-768x334.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/internallinkselect-1-1050x456.jpg 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><strong><br \/>\nWhen linking to an external website: <\/strong>Enter the link&#8217;s full URL (e.g. http:\/\/www.google.com) by typing it or pasting it into the \u201cLink URL\u201d text field. Then, click on the drop-down menu labeled \u201cStyles\u201d and choose \u201cExternal Link\u201d. External Links should be used for links to other web sites but not to link to other pages on your web site, because it makes the page you\u2019ve linked to open in a new browser tab.<img loading=\"lazy\" class=\"alignnone wp-image-1223 size-full\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/exteranllinkselect.jpg\" alt=\"\" width=\"1126\" height=\"485\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/exteranllinkselect.jpg 1126w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/exteranllinkselect-300x129.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/exteranllinkselect-768x331.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/exteranllinkselect-1050x452.jpg 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><strong>When linking to a file (such as a Word or PDF document)<\/strong>: Click on the \u201cBrowse\u201d link to the right of the Link URL field. A window will pop up that will allow you to choose a file from the web server, as well as to upload new files from your computer\u2019s hard drive. At the bottom of this window there is an \u201cUpload a new file in this folder\u201d field. Click on the \u201cBrowse\u2026\u201d button and choose the file you wish to upload from your hard drive and click \u201cOK\u201d. Once you have done this, click the \u201cUpload\u201d button. Once the file has been uploaded, it will be available in the menu of linked documents. Click on the file to select it as the target of the link.<img loading=\"lazy\" class=\"alignnone size-full wp-image-1226\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linktopdf.jpg\" alt=\"\" width=\"1051\" height=\"475\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linktopdf.jpg 1051w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linktopdf-300x136.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linktopdf-768x347.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linktopdf-1050x475.jpg 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><\/li>\n<li>All links should have be titled using the Title field. When users place their cursor over the link, the title will display as a tooltip (text inside of a small box). This is useful for providing extra information about the link and is also good for search engines.<img loading=\"lazy\" class=\"alignnone size-full wp-image-1227\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addtitlefield.jpg\" alt=\"\" width=\"1051\" height=\"475\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addtitlefield.jpg 1051w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addtitlefield-300x136.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addtitlefield-768x347.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addtitlefield-1050x475.jpg 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><\/li>\n<\/ol>\n<p>Once you have set the link URL or chosen a link from the Link list, click the \u201cInsert\u201d button in the lower left corner of the window to insert the link into your document.<\/p>\n<h2>Adding On-Page Anchors<\/h2>\n<p>There may be situations where the amount of content on a single page calls for the use of on-page anchor tags \u2013 links that allow users to automatically jump from one spot to another instead of scrolling up and down the page. You may have seen this type of navigation on the Frequently Asked Questions section of some websites.<\/p>\n<p>This is a two-step process \u2013 you\u2019ll need to create both an anchor and then a link to it.<\/p>\n<ol>\n<li>First, to create an on-page anchor tag using the TinyMCE editor, place your cursor in the text box where you want the anchor to occur. An anchor is the spot on the page that the user will be sent to when the associated link you\u2019ll create in step two is clicked. Click the anchor icon in the TinyMCE editor and name the anchor in the pop-up window that appears. When naming the anchor, make sure to use all lowercase letters and don\u2019t use any spaces &#8211; use hyphens (-) in their place. Click the \u201cUpdate\u201d button and you\u2019ll see the anchor icon appear in the content area (Note that users will not see this icon on the site).<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-1229\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addanchor.jpg\" alt=\"\" width=\"1102\" height=\"472\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addanchor.jpg 1102w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addanchor-300x128.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addanchor-768x329.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/addanchor-1050x450.jpg 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><\/li>\n<li>Next you\u2019ll need to set the link to that spot on the page, a process you\u2019re already partly familiar with from the previous section. Create a link just as you would any other \u2013 add and select text that will act as the referring link and click the \u201cLink\u201d button in the formatting bar, but instead of using the \u201cLink List\u201d drop-down as you would for links to other pages and websites, select the on-page anchor link from the \u201cAnchors\u201d drop-down. Click \u201cUpdate\u201d and save the page. <img loading=\"lazy\" class=\"alignnone size-full wp-image-1230\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linkanchor.jpg\" alt=\"\" width=\"1052\" height=\"447\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linkanchor.jpg 1052w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linkanchor-300x127.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linkanchor-768x326.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/linkanchor-1050x446.jpg 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><br \/>\nNow, when you visit the page you\u2019ve just edited on your website, you\u2019ll notice when you click the link you\u2019ve just created, the page jumps to the spot where you had previously inserted an anchor.<\/li>\n<\/ol>\n<h2>Best Practices<\/h2>\n<ul>\n<li><strong>Links to internal pages on the website should always be built using the dropdown &#8220;Link List&#8221; rather than entering in the URL manually.<br \/>\n<\/strong>If the page you are linking to is moved or renamed at a later date, it will still function properly using this method.<\/li>\n<li><strong>When linking to an internal resource, never link to a weblink.<br \/>\n<\/strong>If linking to another resource on the existing site, be sure to link to the actual page and not a weblink of the page.<\/li>\n<li><strong>Links to external website should always have the the Class &#8220;external&#8221; selected.<br \/>\n<\/strong>This will force the external link to open in a new tab, as well as adding a hover effect letting the user know the new tab will be opened.<strong><br \/>\n<\/strong><\/li>\n<li><strong>All links should have be titled using the Title field.<\/strong><br \/>\nWhen users place their cursor over the link, the title will display as a tooltip. This provides a better user experience and is also good for search engines.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to add links to the content of a webpage.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":512,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/1038"}],"collection":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/comments?post=1038"}],"version-history":[{"count":1,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/1038\/revisions"}],"predecessor-version":[{"id":1659,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/1038\/revisions\/1659"}],"up":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/512"}],"wp:attachment":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/media?parent=1038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/categories?post=1038"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/tags?post=1038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}