loading Loading...
add chat to your website

Sync Page

The Sync Page feature in the editor is a powerful option that lets you snyc pages or add clickable hyperlinks to your page. You can link to pages or email addresses, as well as control the way they look and work.


Sync a Page

To sync a pge to another page in ProProfs, press the  button on the toolbar. If you want the sync to be assigned to certain text, select that text first. If no text is selected, the page's title will automatically display.

An overlay will appear listing all the published pages. This table is the same table as the view All Pages feature.


  1. Select the page you want to link to by clicking that page title.
  2. The link will be created.
Editing other page's URLs will not break your links. Internal page links use the page's permalink.

External Links

To insert a link into your page, press the  button on the toolbar or use the Ctrl+L keyboard shortcut. If you want the link to be assigned to certain text, select that text first. If no text is selected, the link URL or email address will appear on the page as is.
 

The Link dialog window that will open let's you choose the link type and configuration options pertaining to your choice. It contains tabs that group link options, depending on the link type:

 

Link Type > URLs

The Link Type is set to URL by default so you can add a website address to your page. For this Link Type, all three tabs of the Link dialog window are available.

Link Info

The Link Info tab is the default tab that opens after you press the button on the toolbar. It allows you to choose the Link Type as well as set the link Protocol and URL.

Below is an overview of all Link Info tab elements:

  • Link Type – This is the category of the link that will be inserted into the page. You can choose one of the following options:
    • URL – the web address of anything available on the Internet, such as a website, a PDF document, or an image
      Example:

      http://example.com/about.html
      http://example.com/image1.jpg

    • Link to anchor in the page – an internal link to a designated point in your page
      Example:
      #anchor1
    • E-mail – an email address
      Example:
      myname@example.com
  • Protocol – This is the communication protocol used with the web address.
    You can choose one of the following options: http://, https://, ftp://, news://, or .
  • URL – This is the website address for the external resource that the link is pointing to.
    • Use the full absolute path.
      Example:
      http://example.com/about.html
      http://example.com/image1.jpg
  • Browser Server - You can also browse the server to select an image or file. If you upload a file using the file manager you can add a link on a page to download the file.
  • Link to Topic - This will open an overlay to link to another page.

 

Advanced

The Advanced tab lets you configure additional link options such as assigning an ID, a class, a tab index, a tooltip, or CSS-style properties. It is meant for advanced users with knowledge of HTML and CSS.

Below is the overview of all Advanced tab elements:

  • Id – A unique identifier for the link element in the page (id attribute).
  • Language Direction – The direction of the text: Left to Right (LTR) or Right to Left (RTL) (dir attribute).
  • Access key – A keyboard shortcut to access the link element (accesskey attribute).
  • Name – The name of the link element (name attribute).
  • Language Code – The language of the link element specified according to RFC 1766 (lang attribute).
  • Tab Index – The tab order of the link element (tabindex attribute).
  • Advisory Title – The text of the tooltip that is shown when the mouse cursor hovers over the link (title attribute).
  • Advisory Content Type – The content type of the link (type attribute).
  • Stylesheet Classes – The class of the link element (class attribute). Note that a link element might be assigned more than one class. If this is the case, separate class names with spaces. See CSS.
  • Linked Resource Charset – The character set of the linked resource (charset attribute).
  • Relationship – The relationship between the current page and the link target (rel attribute).
  • Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces. See CSS.
     

Link Type > Email

It is easy to insert clickable email addresses to your pages and even add the subject and body of the email message that will be created when you click the link. If you want to add a hyperlinked email address to the page, select E-mail from the Link Type drop-down list.

The Link Info tab contains the following fields that let you configure the recipient and the message content:

  • E-Mail Address – This is the address of the recipient of the email message. This field is required for the email link to work.
  • Message Subject – This is the default text that will be pasted into the subject line of the email message.
  • Message Body – This is the default text that will be pasted into the email message as its content.

For a detailed description of all Advanced tab elements, refer to the Advanced section above.

 

Link Type > Link to anchor in the text

If you want to point to an anchor previously set in the page, select Link to anchor in the text from the Link Type drop-down list under the Link Info tab.

The Link Info tab contains the following options that make selecting an anchor an easy task:

  • By Anchor Name – This is a drop-down list containing the names of all anchors established in the page. 
  • By Element Id – This is a drop-down list containing the identifiers of all anchors established in the page that contain the ID attribute.

If you do not have any anchors defined in your page, a message telling you so will be displayed in the Link Info tab.

 

An anchor tag URL would be in the format :  URL$AnchorName


Here's an example of how an anchor tag would look like -  http://knowledgebase.proprofs.com/links$type-anchor  

 

In the above example, 

  • URL is http://knowledgebase.proprofs.com/links  
  • AnchorName is type-anchor.

 

Link Type > Add an external link using HTML 

This example shows how you can link certain textual fragments (in this case "email campaign") to webpages or online documents, using HTML. To add the link click on Soruce on the WYSIWYG Editor as shown below. 

 

 

Clicking on Source shows you the HTML of the page. Now, locate the text you want to link and add the HTML tag mentioned below.  

 

 

As shown in the above image, paste this HTML tag and replace the link and achor text with your desired ones. 

 

<a href="ADD YOUR LINK HERE" target="_blank">ADD THE ANCHOR TEXT FOR THE LINK</a>

 


Anchors

Video on anchor links: 
 

Unable to display content. Adobe Flash is required.

 

To use anchor links, you will need to insert anchors in the page. To insert an anchor, press the button on the toolbar. The following Anchor Properties window will appear:


In order to create an anchor, enter its name in the Anchor Name text box. Once you click OK, the icon will appear in the page.

To remove an anchor, select it and press Delete.
 

Do not use spaces between words in the Anchor Name. If you need a space, put a dash such as "how-to."

Removing a Link

Removing a link is just as easy as adding it. When the cursor is placed on a link, the button on the toolbar becomes active. Pressing the button removes the link and leaves plain text. Alternatively, you can also open the element's context menu by right-clicking, or using the Menu/Application key on your keyboard and choosing the Unlink command.

Link to Download a File

After you have uploaded a file, you can insert a hyperlink that will download that file.  

  • Edit the page.
  • From the editors toolbar select the hyperlink option.
  • From the links overlay select Browse Server, and select the file you want to insert from the file manager.
  • A hyperlink will be inserted in the page.