You can make One Page websites with menu items linking to different sections of the front page. The page will scroll down to a section on the page when the site visitor clicks a menu item.
This is not just limited to creating menu items for front page sections.
For example: On a page/post, you can add links to different sections of the article. This is often seen when we have a long article, and want to add a ‘Table of content’ at the top linking to different sections of that article.
This process can be broken into 3 parts:
- Get ID of the Target Element
- Create the Link to the Target
- Add the Link created (to the menu or manually to the ‘Table of Content’ on the page)
Step 1. Get ID of the Target Element
The first step in creating a scrollpoint is to find the target element’s ID.
► Widget ID Useful for targeting sections on FrontPage
If you have a widget on your screen that you want to scroll down to, you can use its Widget ID. You can view the widget ID right below each widget in the Appearance > Widgets screen
► Frontpage Modules ID To target sections on FrontPage
IDs for various Frontpage modules included in our themes are: (these may differ a bit depending upon the theme you are using, but the syntax stays the same)
- Slider A / HTML Slider:
frontpage-html-slider - Slider B / HTML Slider:
frontpage-img-slider - Widget Area A:
frontpage-area_a - Widget Area B:
frontpage-area_b - Widget Area C:
frontpage-area_c - Widget Area D:
frontpage-area_d - Widget Area E:
frontpage-area_e - Frontpage Conent:
frontpage-page-content
► Add Custom IDs to Headings To target sections on a Post/Page article
When you add a Heading block to your Page/Post content, you can give it a unique custom ID.
Select the Heading block. Goto Block settings in the right sidebar. Under the Advance tab, give this heading a unique ID in HTML Anchor field.
For example: In the screenshot below, we added a unique ID section-1-title to our Heading block
► Add Custom IDs using HTML To target sections on a Post/Page article
If you want to target a section, but it does not have a Heading preceding it, you can use the Custom HTML block to insert the Unique ID.
Add a Custom HTML block at the target location. Make sure you are in the HTML view. Now add a <span> with your unique target ID. For example: <span id="section-2-title"></span>
Step 2. Create Link to the Target Section
Once you have your target ID from step 1 above, the next step is to create a link to it. Lets assume from our example above that we want to create a link to the Heading with ID section-1-title which has been added to our Sample Page.
Creating the link to this target location is pretty straightforward. The link consists of 3 parts.Page URL where target is present + # + Target ID
So if our page url is http://example.com/sample-page, then the link to the target location will become:
RESULT:http://example.com/sample-page/#section-1-title
Step 3. Add the Link created
The final step is to add the link we created above. You can do this in 2 ways:
1. Add the Link to your Menu
Use the Custom Link option in your WordPress menu to add the link.
2. Manually add the link anywhere
Add links like you normally do in the editor:
To let the theme know that these are scrollable links, add the class scrollpointscontainer to the container block (in the Advance tab of Block Settings)
