Getting Started
Adding Links to Elements
Links are one of the most important building blocks of any website.
Beginner
6 min read
They help visitors navigate between pages, discover content, complete actions, and interact with your site.
In Framer, links can be added to almost any element, including:
Buttons
Text
Images
Cards
Navigation items
Components
Icons
This guide explains the different types of links available in Framer, how to add them, and how to create a navigation structure that improves both user experience and SEO.
Types of Links
Different situations require different types of links.
Understanding when to use each type helps create a more intuitive website.
Internal Links
Internal links connect pages and content within the same website.
Examples include:
Homepage → Pricing page
Pricing page → Contact page
Blog article → Related article
Navigation menu → About page
Internal links help users explore your website and improve content discoverability.
External Links
External links point to websites outside your domain.
Examples include:
Social media profiles
Partner websites
Documentation resources
Third-party tools
External links are commonly used in footers, navigation menus, and resource sections.
Anchor Links
Anchor links jump to a specific section on the current page.
For example:
A navigation item can scroll directly to the Pricing section without loading a new page.
Anchor links are especially useful on long landing pages.
Email Links
Email links automatically open the visitor’s default email application.
Example:
When clicked, the user’s email client opens with the address already populated.
Common use cases include:
Contact pages
Support links
Footer sections
How to Add a Link
Adding links in Framer is straightforward.
Step 1: Select an Element
Choose the element you want to make clickable.
Examples:
Button
Text
Image
Card
Icon
Step 2: Open Link or Interaction Settings
Select the element and locate the linking or interaction options in the Properties panel.
Step 3: Choose a Destination
Define where the link should go.
Common destinations include:
Another page
A CMS page
A section on the page
An external URL
An email address
Once configured, the element becomes clickable.
Linking Common Elements
Buttons
Buttons are one of the most common link targets.
Examples:
Start Free Trial
Contact Us
Book a Demo
View Pricing
Buttons should clearly communicate what happens after clicking.
Text Links
Text links are often used within content.
Examples:
Learn more
Read the full guide
View documentation
Text links should be descriptive and provide context.
Images
Images can also function as links.
Common examples include:
Portfolio thumbnails
Blog featured images
Product previews
Logo links
Clickable images can improve content discovery and engagement.
Cards
Entire cards can be made clickable.
Examples:
Blog cards
Portfolio projects
Team profiles
Resource listings
This creates a larger click area and improves usability.
Internal Linking Best Practices
Internal linking is important for both users and search engines.
A strong internal linking structure helps visitors discover relevant content while helping search engines understand the relationship between pages.
Link Related Content
Connect pages that naturally belong together.
Example:
This creates logical content pathways.
Avoid Orphan Pages
An orphan page is a page with no links pointing to it.
These pages are often difficult for users and search engines to discover.
Every important page should be linked from somewhere on the website.
Use Contextual Links
Links placed naturally within content often perform better than isolated navigation links.
Example:
Instead of:
Use:
This provides context and improves accessibility.
Writing Better Link Labels
The text used for a link matters.
Good link labels help users understand what will happen after clicking.
Avoid Generic Labels
Examples:
Click Here
Learn More
Read More
These provide very little context.
Use Descriptive Labels
Better examples:
View Pricing Plans
Contact Our Team
Download the Guide
Explore Portfolio Projects
Descriptive labels improve usability and accessibility.
Opening Links in New Tabs
Sometimes it makes sense to open links in a new browser tab.
Common examples include:
External websites
Social media profiles
Download links
Documentation resources
This allows visitors to keep your website open while viewing external content.
When Not to Use New Tabs
Internal navigation should generally remain within the same tab.
Examples:
Homepage → About
Pricing → Contact
Blog → Blog article
Opening every link in a new tab can create a confusing experience.
Using Anchor Links
Anchor links are especially useful on long pages.
Examples include:
Landing pages
Documentation pages
Help centers
One-page websites
Visitors can jump directly to relevant content without excessive scrolling.
Common Anchor Link Examples
Each navigation item scrolls to its corresponding section.
This improves usability and content discovery.
SEO Benefits of Proper Linking
Linking is one of the most important aspects of website structure.
Improved Crawling
Internal links help search engines discover pages more efficiently.
The easier a page is to reach, the more likely it is to be crawled.
Better Content Discovery
Related links help visitors find additional content.
This can increase:
Page views
Session duration
Engagement
Stronger Topic Relationships
Internal links help search engines understand how pages relate to one another.
For example:
This creates topical relevance.
Accessibility Considerations
Links should be easy to identify and understand.
Use Descriptive Text
Visitors should understand a link without needing additional context.
Good:
Poor:
Make Links Clearly Visible
Links should stand out from surrounding content through:
Color
Underlines
Hover states
Visual styling
Users should never have to guess what is clickable.
Avoid Link-Only Icons
Icons without labels can create confusion.
Whenever possible, provide supporting text.
Common Beginner Mistakes
Too Many Links
Over-linking can overwhelm users and reduce clarity.
Only link content that provides value.
Broken Links
Broken links create frustration and damage credibility.
Always test navigation before publishing.
Weak CTA Labels
Generic buttons often perform poorly.
Compare:
vs
Specific CTAs generally perform better.
Inconsistent Navigation
Navigation should behave consistently across the entire website.
Changing menu structures between pages often confuses users.
Best Practices
Use descriptive link labels
Link related content together
Test every link before publishing
Make important pages easy to reach
Use anchor links on long pages
Keep navigation consistent
Avoid unnecessary new tabs
Build a logical internal linking structure
Frequently Asked Questions
Can entire cards be clickable?
Yes. Making an entire card clickable often improves usability and click-through rates.
Does internal linking help SEO?
Yes. Internal links improve crawling, content discovery, and topical relevance.
Are anchor links good for long pages?
Absolutely. They improve navigation and help users find content quickly.
Should external links open in a new tab?
In many cases, yes. This helps users return to your website easily.
Can images have links?
Yes. Images can link to pages, URLs, sections, and other destinations.
framerbaseio