How to link within a page (add anchors)?

In Visual Composer, you can link from one element to another element in the same page. For example, you wish to have a button at the top of the page, that, when clicked, will automatically scroll down to a specific section of the page.

You can accomplish that with anchor links and unique element ID that will create the so-called page jumps. Depending on where you want to link from, there are two ways you can add anchors to your links – via Visual Composer link selector or TinyMCE editor.

How to add anchor via Visual Composer link selector

Follow these steps to insert an anchor link through the Visual Composer link selector:

  1. Choose the element you want to ‘jump’ to (a.k.a. the destination);
  2. Open the element edit window;
  3. Add a unique ‘Element ID’ (don’t use spaces);

Add unique id to your content elements and link directly to these elements via anchor

Once you have your Element ID added, it is time to add an anchor link:

  1. Open the edit window for the element where the anchor link is going to be added (ex. Basic Button);
  2. Click on ‘Select URL’;
  3. Add the unique ‘Element ID’;
    Note: make sure to use only letters and numbers without spacing.
  4. Choose “custom” at the URL drop-down.

Visual Composer link selector

How to add anchor via TinyMCE

It’s also possible to add anchor links via the TinyMCE editor in elements like Text Block. To do that, follow these steps:

  1. Choose the element you want to ‘jump’ to (a.k.a. the destination);
  2. Open the element edit window;
  3. Add a unique’Element ID’ (don’t use spaces);
  4. Open the TinyMCE editor;
  5. Select the text you want to add the anchor link to;
  6. Click on the ‘Insert/edit link’ button;
  7. Add the unique element ID.

TinyMCE insert/edit link