Add Jump Link(s)

Updated on November 22, 2022

Jumps links are used to send users to a specific areas within a page. Here’s an example. These links can be helpful on pages with a lot of content or in instances when you know exactly where you’d like a viewer to be taken.

The instructions below are for pages or posts built using the SiteOrigin Page Builder.

Rules of IDs

** Row & Widget IDs names have to be done in a specific way.**

  • IDs must be all lowercase.
  • Spaces cannot be included. Feel free to use a dash or underscore in place of a space.
  • IDs must be unique. Don’t use the same id twice. I find it helpful to make sure the id is specific to the page.

Example: I’m on an about page and plan to add a jump link to the company’s history further down on the page. I would add “about-history” as the id for the history widget block.


Add the Target

  1. Go to back end of the page where you’d like to send your users. A target can be added to the full row or an individual widget block on the page. What you choose depends on the design of your page. Consider how the page looks on mobile when making this decision.
    • Full Row: Hover over the wrench icon in the top right corner of the desired row. Click “Edit Row”. You will see a row preview on the left and “Row Styles” on the right. Click “Attributes” and add a “Row ID”. Please read Rules of ID above.
    • Individual Widget: Hover over the desired widget and click “Edit” in the top right corner of the block. Click “Attributes” from the “Row Styles” on the right. Add a “Widget ID”. Please read Rules of ID above.
  2. Click “Done” in the bottom right corner and “Update” your page.

Add the Link

Once the target is added to the page, you need to add the link you want visitors to click on.

Adding into Text

  1. Open the SiteOrigin Editor that contains the text you’d like to add the link to. Highlight the words you’d like to link to the target and click the chain link icon. It will say “Insert/edit link (Ctrl+K)” when you hover over it.
  2. If the target you created is on the same page as the link text, place the id in the provided field PRECEDED by “#”. Example: #exampletarget
  3. If the target you created is on another page, go to the target page on the front end of the site. Copy the page’s web address. Paste that followed by “#” and your the id you created in the provided field. Example: [yourdomain.com]/aboutus#exampletarget
  4. Click “Done” in the bottom right corner.
  5. “Update” your page and verify that the text link works as expected on the site’s front end.

Adding as Button Destination URL

  1. Open your button widget.
  2. If the target you created is on the page your button is on, place the id in the Destination URL field PRECEDED by “#”. Example: #exampletarget
  3. If the target you created is on another page, go to the target page on the front end of the site. Copy the page’s web address. Paste that followed by “#” and your the id you created in the Destination URL field. Example: [yourdomain.com]/aboutus#exampletarget
  4. Click “Done” in the bottom right corner.
  5. “Update” your page and verify that the button works as expected on the site’s front end.

Instructions to Add or Update a Button to your content.

Adding as Image Destination URL

  1. Open your SiteOrigin Image widget.
  2. If the target you created is on the page your image is on, place the id in the Destination URL field PRECEDED by “#”. Example: #exampletarget
  3. If the target you created is on another page, go to the target page on the front end of the site. Copy the page’s web address. Paste that followed by “#” and your the id you created in the Destination URL field. Example: [yourdomain.com]/aboutus#exampletarget
  4. Click “Done” in the bottom right corner.
  5. “Update” your page and verify that clicking on the image works as expected on the site’s front end.

My jump links target. Now back to the top.

Related Posts

No items found