Anchor ID

The Anchor ID addon lets you link straight to an accordion panel, a tab, a slider frame or a carousel item. When a visitor opens a panel or tab, or the slider moves to a new frame, the page URL changes. Copy that URL, or write it yourself, and use it in a menu, a button or an email. When a visitor opens the link, the widget opens that panel, tab, frame or item and the page scrolls to it.

View the Anchor ID demo.

Requirements

Go to SiteOriginPremium Addons and activate Anchor ID. This also activates the Hero Image, Image Slider and Layout Slider widgets. To use the Accordion, Tabs or Anything Carousel widget, activate it at PluginsSiteOrigin Widgets.

The Tabs widget form with Add anchor ID in the URL turned on and the Anchor ID set to services

Supported Widgets and Settings

The addon adds two settings to each supported widget. The second setting shows when you turn on the first.

Accordion and Tabs
Directly above the Design section: Add anchor ID in the URL and Anchor ID. The Anchor ID is optional.

Hero Image and Layout Slider
In the Slider Controls section: Add slide anchor ID in the URL and Anchor ID. The Anchor ID is required.

Image Slider
In the Controls section: Add slide anchor ID in the URL and Anchor ID. The Anchor ID is required.

Anything Carousel
In the Settings section: Add item anchor id in the URL and Carousel anchor. If you leave Carousel anchor empty, the widget uses its Title. Set one of the two.

For a predictable link, use only lowercase letters, numbers and hyphens in an Anchor ID, for example services. Give each widget on a page a different Anchor ID.

  1. Edit the widget and turn on Add anchor ID in the URL (or the slide or item setting).
  2. Enter an Anchor ID (Carousel anchor in the Anything Carousel), for example services.
  3. Save the page and view it on the front end.
  4. Open the panel or tab, or move to the frame or item, that you want to link to. The URL in the address bar changes.
  5. Copy the URL. Use it in a menu item, a button or any other link.

A link to the same page, such as a menu item, opens the item and scrolls to it without a page reload. A link from another page loads the page, opens the item and scrolls to it.

URL Format

You can also write the URL yourself. The part after the # sign depends on the widget.

Accordion and Tabs with an Anchor ID
The Anchor ID, a hyphen, and the panel or tab name. For a Tabs widget with the Anchor ID services and a tab titled “Web Design”, the link is https://example.com/about/#services-web-design.

Accordion and Tabs without an Anchor ID
Only the panel or tab name, for example #web-design. For an Accordion widget, the URL lists each open panel, separated by commas, for example #pricing,delivery.

The panel or tab name comes from its title: lowercase, with hyphens in place of spaces and most punctuation removed. A panel or tab without a title gets a generated name. Give each panel and tab a unique title. If two accordion panels have the same title, the second one gets a random name that can change when the page is built again, so you can’t link to it reliably.

Hero Image, Image Slider and Layout Slider
The Anchor ID, a hyphen, and the frame number. The first frame is 0. For the Anchor ID home-hero, the link to the third frame is #home-hero-2.

Anything Carousel
The Carousel anchor (or the widget title), a hyphen, and the item number. The first item is 0. For example #team-3.

Several widgets in one link
Put the parts for each widget after one # sign, separated by commas. For example #services-web-design,home-hero-1 opens the Web Design tab and moves the hero to its second frame. The page scrolls to the first widget in the list.

Things to Know

  • When the widget changes the URL, it adds an entry to the browser history. A slider or carousel with autoplay changes the URL on each frame, so the Back button steps through the frames.
  • When an Accordion widget has an Anchor ID, a link with more than one open panel opens only the first panel. To link to several panels, leave the Anchor ID empty.

Advanced Customizations

Add PHP snippets with a plugin such as Code Snippets, or in a child theme’s functions.php file.

Change the scroll offset

When the page scrolls to a linked item, it leaves 90px of space above the item. This keeps the item clear of a sticky header. Use this filter to change the space. The value is in pixels.

add_filter( 'siteorigin_premium_anchor_id_scrollto_offset', function( $offset ) {
	return 120;
} );