Have you ever been on a website that has a ton of information, only to find yourself endlessly scrolling to find what you originally came for? This can be extremely frustrating and time-consuming. Thankfully, Elementor provides an easy solution to this problem: jumping to sections. Jumping to sections, also known as internal linking, refers to the process of linking different sections of a webpage from within the same page. It is often achieved by adding CSS ID to specific sections and then internal linking through the CSS ID you chose. It is an essential feature of any well-designed website because it enables visitors to easily access specific content without having to navigate through your entire page.
For example, if you have a long landing page with multiple sections, you can use internal linking to enable visitors to jump directly to the section that interests them the most. This is usually the case for one-page websites, where each tab on the menu is it’s own section. Another popular use of internal links can be found in blogs or sites like Wikipedia, where the use of subheadings is needed. Many blogs will list the topics covered throughout the post, and each one of those topics will be internally linked, allowing readers to jump to the sections that are relevant to them. In addition, giving visitors the ability to jump to sections can improve the overall user experience of your website by making it easy to find information and navigate throughout your site. With Elementor, implementing internal linking is a breeze, and in this post, we’ll show you how you can use this feature to increase your user engagement.
How to Link to the Same Page in Elementor
As we all know, jumping to a section of a website is super convenient. It makes for stress-free surfing and can greatly improve the overall experience of your site. Whether it’s a landing page or even an employment page, utilizing internal links can be highly beneficial. Let’s take a look at how you can internally link your sections.
- First, start by finding the section you’d like to link to. Then, select it and head over to the Advanced tab.
- In the Advanced tab, find the CSS ID option.
- Give your section a CSS ID. It can be a simple abbreviation such as “sec1”. Then, update your edits.
- Once you have given the section a CSS ID, it’s time to turn it into a link.
- Linking Options:
- Buttons/Headings/Image Box/Icons: Content Tab -> Link -> Enter “#” then add your CSS ID.
- Icon Box: Content Tab -> Read More -> Turn on Global Link -> Enter “#” then add your CSS ID.
- Image: Content Tab -> Link -> Custom URL -> Enter “#” then add your CSS ID.
- Text: Content Tab -> Highlight the text you’d like to add a link to -> Find the chain-link icon in the text editor -> Enter “#” then add your CSS ID.
- Buttons/Headings/Image Box/Icons: Content Tab -> Link -> Enter “#” then add your CSS ID.
- Once you are satisfied with your internal linking, be sure to update your changes!
Conclusion:
Internally linking with the use of CSS ID is a powerful tool that all web owners and designers should utilize. By creating internal links and allowing visitors to jump to sections, you can greatly improve the user experience and overall navigation of your site. Additionally, creating internal links with CSS ID is a simple and straightforward process that can be done in just a few steps. Interested in making your site more user-friendly? Start internally linking today!
