How to link to other modules on the same page

There are 2 scenarios in which you may want to link to specific modules on a given page:

→ If you’re looking to create a one-page site

In this case, here’s a comprehensive post covering everything you need to know about creating a one-page site with your modular theme:

Creating a One-Page Site: How to Link Menu Items to Your Page’s Sections in WordPress

→ If you just want a call to action or a simple link to point to a specific module on a page

In this case, follow these steps:

1. Find the ID of the module you want to link to. (Here’s how to find a module’s ID: https://artisanthemes.io/kb/customizing-the-theme/how-to-find-a-module-id/)

2. Now that you know the module’s ID, you can build your link’s URL. For example, if the module ID is “1094”, then your URL will look like this:

#post-1094

But if the module you’re pointing to is not on the same page as the link, then you have to add the full URL of the target page before the module’s ID:

https://www.yourdomain.com/your-page#post-1094

3. Use this URL to build your link. Case scenarios:

a. If you’re working with a Call to Action module or a Headline module, or any other module that allows you to add a button with a link → Simply add the proper URL in the URL/link field as explained above.

b. If you’re creating a simple link inside your site’s copy → Then the structure of the link should be as this:

<a href="#post-1094" class="scroll-to-link">click me!</a>

Or, if it links to a module on a different page…

<a href="https://www.yourdomain.com/your-page#post-1094">click me!</a>

* Notice that in the first link, we added the class “scroll-to-link” to the < a > element. This class will automatically make the page scroll smoothly to the target module once the link is clicked, instead of simply jump to it. If the module is on a different page, then the scroll effect can’t be used.