Understanding how to link pages in Elementor is essential for creating smooth navigation across your WordPress website. This guide walks you through linking buttons, menus, containers, and sections using Elementor’s powerful drag-and-drop editor.
How to Link Pages in WordPress Elementor
Understanding how to link pages in Elementor is essential for creating smooth navigation across your WordPress website. This guide walks you through linking buttons, menus, containers, and sections using Elementor’s powerful drag-and-drop editor.
How to Link a Button to Another Page in WordPress Elementor
To link a button to another page in Elementor, you can use the built-in link field available in the button widget settings. This allows you to direct users to another part of your website or even an external resource with just a few clicks. It's one of the most common and useful features for driving traffic between pages and improving overall site usability.
- Select the button element in the Elementor editor.
- Go to the Content tab in the left panel.
- In the Link field, enter the URL or select a page from the WordPress dropdown.
- Click Update to save changes.
How to Link a Button or Menu to a Section in Elementor
To scroll to a section when a button or menu item is clicked, you'll need to add anchor links:
Prepare the section anchor
- Click on the section you want to scroll to.
- Go to Advanced settings.
- In the CSS ID field, enter a unique ID (e.g., "services").
Link the button or menu
- Select the button or menu item.
- In the Link field, enter "#services" (replace with your actual ID).
How to Link Menu Items to Sections in WordPress Elementor
For menu items that scroll to specific sections on the same page:
- Use Elementor's Nav Menu widget or the WordPress menu editor.
- For each menu item, use a Custom Link with a hash (#) followed by the section's CSS ID.
- Example: #contact for a section with CSS ID "contact".
How to Add a Link to a Container in Elementor
To hyperlink an entire container in Elementor:
- Select the container: Click on the container, column, or section that you want to make clickable.
- Open the Advanced tab: In the left panel, go to the Advanced tab where link settings are located.
- Enable and set the link: Turn on the link option (available in Elementor Pro) and input your desired URL or anchor (e.g., "/pricing" or "#faq").
How to Add a Link to Text or Headings in Elementor
Linking text is straightforward in Elementor:
- Highlight the text in the text editor widget.
- Click the Insert/Edit Link icon.
- Add your URL or anchor reference.
You can also hyperlink entire headings using the same method.
Best Practices for Internal Linking in Elementor
Effective internal linking improves SEO and user navigation. Here are tips to keep your links organized:
- Use clear and descriptive link text (e.g., "Learn More About Us").
- Stick to relative URLs for internal links to prevent future issues during domain changes.
- Test your anchor links to ensure they scroll correctly on all devices.
- Group related content using buttons or inline text links to guide users contextually.
- Revisit your links periodically to check for broken or outdated URLs.
- Use anchor links in long-form content to help users jump to relevant sections quickly.
Troubleshooting Common Link Issues in Elementor
If your links aren't working, check the following:
| Issue | Solution |
|---|---|
| Button doesn't navigate | Ensure the URL or anchor is correctly entered. |
| Anchor link not scrolling | Verify the CSS ID matches exactly, with no extra spaces. |
| Menu links broken | Confirm you're using "Custom Links" and that the menu is on the same page. |
Useful Links
How to Use the Button Widget in Elementor – Covers selecting the Button widget, adding your URL in the Content tab’s Link field, and options like opening links in a new tab. Supports your “linking a button” section.
How to Use the Menu Anchor Widget in Elementor – Explains how to add the Menu Anchor widget, assign it a CSS ID, and link buttons or menus to it using hash (#) links. Perfect for your anchor/section linking guide.
Your Elementor Website Can Do Even Better!
Elfsight created dozens of useful widgets to make your Elementor website more attractive and boost its performance in so many ways. Try these no‑code solutions for free on Elementor!
Conclusion
Mastering how to link pages, sections, and elements in WordPress Elementor allows you to build intuitive and interactive websites. Use anchor links, buttons, menus, and containers wisely to enhance navigation and user experience. With these techniques, your Elementor website will feel seamless and easy to use.
