What are HTML Anchors?
An HTML Anchor allows you to create a link directly to a specific section of the page, rather than the whole page. This is achieved by assigning a custom name to an element, which can then be used as a target for hyperlinks. These are often also called jump links.
How it Works
In Refoundry, the HTML Anchor feature is available in the Settings Tab (under the Advanced section) for both Container and Column Blocks. This feature allows you to set a custom anchor name for these elements, creating a specific point within your webpage that users can link to directly. This is especially useful for long pages, enabling users to jump to a specific section without having to scroll through all the content.
Here’s how it works:
Setting an Anchor Name: In the Refoundry block settings, navigate to the Advanced section of the Settings Tab. There, you’ll find a field labeled “HTML Anchor.” By entering a custom name into this field, you create an anchor point within the page.
Linking to the Anchor: Once the anchor name is set, you can link to this specific point from anywhere within your site or even from external sites. To create a link to this anchor, you simply add a hash (#) followed by the anchor name to the end of your URL. For example, if your anchor name is “contact-section,” your link would look like this: www.yoursite.com/page#contact-section.
Navigating with Anchors: When users click on a link that targets your anchor, they will be taken directly to the section of the page where the anchor is set. This is particularly useful for creating a table of contents, navigating between sections on a single page, or linking to important information directly from other pages.
For more information on using HTML anchors and best practices, you can refer to the MDN Web Docs on HTML Anchors. This resource provides detailed insights into how anchors function and how they can be effectively used to enhance navigation within your website.
HTML Anchor Settings
These settings are how you configure your HTML Anchor, so it can be used as a jump link.
HTML Anchor Field
An HTML anchor text field in Refoundry allows you to create a custom link target for specific blocks, enabling users to jump directly to that section of the page via a link. Here’s how to use it:
Enter an Anchor Name: Type a unique, lowercase anchor name (without spaces) in the field. For example, “section-one”.
Link to the Anchor: To link to this section, create a link with # followed by the anchor name (e.g., https://website.com/page-name#section-one).
This will allow users to jump directly to that specific block from another part of the page.
More about
Global Styles
