# Adding Inline Links as Overrides in Framer Source: https://www.youtube.com/watch?v=4Dclbf3yY7M Recap page: https://rapidrecap.app/video/4Dclbf3yY7M Generated: 2025-12-30T17:34:06.221+00:00 --- ## Quick Overview Framer enables adding inline links within formatted text elements in components like accordions by utilizing link overrides on specific text fragments, which requires configuring the text content as "Formatted Text" and applying the link style directly to the desired words or phrases within the text properties panel. **Key Points:** - Inline links are added to formatted text within components by using Link Overrides on specific text blocks or phrases, as demonstrated on an Accordion component's answer text. - To enable rich content like links inside an element's text, the text content type must be set to "Formatted Text" instead of "Plain Text" (02:51). - The process involves selecting the relevant text block (e.g., the 'Answer' variable in the Accordion's closed state) and accessing the 'Link' section in the Text properties panel (03:39). - The specific words or phrases intended to be clickable are highlighted, and a link is added via the Link icon, which opens the 'Edit Link' modal (03:23-03:43). - The link style (color, decoration, hover states) can be customized either by editing the global 'Link' style in Assets or directly within the 'Edit Link' modal for instance-specific styling (03:33-03:47). - This method allows for granular control, ensuring that only selected parts of the answer text are clickable, unlike standard link components that apply the link to the entire element (03:00, 03:54). ![Screenshot at 00:33: Demonstration of the Framer interface showing a simple button component with two variants \('Primary' and 'Hover'\) in the Layers panel, setting up the context for link override application.](https://ss.rapidrecap.app/screens/4Dclbf3yY7M/00-00-33.jpg) **Context:** The video provides a tutorial on how to implement inline links within Framer components, specifically focusing on how to make parts of the text content of an accordion answer clickable. The presenter, Justin Jones from Framer Education, demonstrates this technique using component variants to manage the open and closed states of an FAQ-style accordion. ## Detailed Analysis The tutorial explains how to apply link overrides to specific text segments within a component's content in Framer, ensuring that only certain words or phrases within a block of text are clickable, rather than making the entire element a link. This is crucial for elements like accordions where the answer content needs rich text formatting including links, but the question element should remain unlinked. The presenter first sets up a reusable button component with primary and hover variants (00:33). He then moves to an Accordion component, which uses variants to control its open and closed states (01:44). When editing the text content of the answer within the 'Closed' state, the content must be switched from 'Plain Text' to 'Formatted Text' (02:51). Once set to Formatted Text, the user can select specific words or phrases within the text area (e.g., 'Canvas' in the instructions) and use the link icon in the Text properties panel to assign a destination (03:23). This assignment can either point to another page/URL or another component instance, allowing for complex navigation flow within the answer text itself. Furthermore, the presentation emphasizes that link styles can be overridden locally within the 'Edit Link' modal or globally by editing the default 'Link' style found in the Assets panel (03:33). This approach ensures that all dynamically generated content (like FAQ answers driven by CMS variables) remains flexible and scalable while supporting rich, interactive text. ### Link Overrides Setup - Creating a simple button component with Primary/Hover variants - Setting up an Accordion component with Open/Closed variants - The key is applying link overrides to text instances within CMS-driven or variant-controlled content. ### Enabling Rich Text - To add inline links, the text content type must be changed from 'Plain Text' to 'Formatted Text' (02:51) within the element's properties. ### Applying Inline Links - Select the specific words within the text content panel, click the Link icon, and assign a destination (page, URL, or component) (03:23). ### Styling Links - Link styles can be defined globally in Assets under 'Styles > Link' or customized locally using the 'Edit Link' modal that appears upon link creation (03:33-03:47). ### Accordion Example Implementation - The presenter applies this to the 'Answer' variable of a closed accordion state, demonstrating how the link behavior is isolated to the selected text phrase, keeping the question text unlinked (03:37-03:54). ![Screenshot at 00:04: Framer interface showing options to 'Design for free' and 'Watch the video' overlaid on a dark UI.](https://ss.rapidrecap.app/screens/4Dclbf3yY7M/00-00-04.jpg) ![Screenshot at 00:33: The Framer editor showing a simple button component with two variants, 'Primary' and 'Hover', in the Layers panel.](https://ss.rapidrecap.app/screens/4Dclbf3yY7M/00-00-33.jpg) ![Screenshot at 00:51: The 'Link To' interaction menu open, showing options including 'Create Variable', 'Set Variable', and 'Add Fetch'.](https://ss.rapidrecap.app/screens/4Dclbf3yY7M/00-00-51.jpg) ![Screenshot at 02:53: The 'Content' section in the right sidebar showing options to define text content as 'Plain Text' or 'Formatted Text' for the selected element.](https://ss.rapidrecap.app/screens/4Dclbf3yY7M/00-02-53.jpg) ![Screenshot at 03:42: The 'Edit Link' modal open, showing controls for Color \(set to #0099FF\), Decoration, Fill, Radius, and Padding for the newly created inline link.](https://ss.rapidrecap.app/screens/4Dclbf3yY7M/00-03-42.jpg)