{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/D4CCqSZ2vT42LFIuapwH/oQeQaVTiLq7piAg6PF3i/w5NbLIeXQ-2.js"],
  "sourcesContent": ["import{jsx as e,jsxs as t}from\"react/jsx-runtime\";import{Link as n}from\"framer\";import*as a from\"react\";export const richText=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"It includes various tools and capabilities, such as localized text and images, adaptive designs, and content specific to each locale. The built-in AI Translation in Framer is specifically optimized for website translation, ensuring that links, images, CMS variables, and other elements are maintained across languages.\"}),/*#__PURE__*/e(\"p\",{children:\"To streamline the localization process, Framer provides a Localization Table, which offers an optimized workflow for managing translations. Additionally, you can use the Canvas feature to iterate and make adjustments within the context of your website.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h1\",{children:\"FAQ\"}),/*#__PURE__*/e(\"h3\",{children:\"How many languages are available in Framer?\"}),/*#__PURE__*/e(\"p\",{children:\"There are over 500 locales available for use in Framer.\"}),/*#__PURE__*/e(\"h3\",{children:\"How do we set up the URL structure?\"}),/*#__PURE__*/t(\"p\",{children:[\"Locales are automatically served at \",/*#__PURE__*/e(\"code\",{children:\"yourwebsite.com/[locale-slug]/example-page\"}),\". For example \",/*#__PURE__*/e(\"code\",{children:\"framer.com/nl/meetups\"}),\" . The slug can be customized in the Locale settings.\"]}),/*#__PURE__*/e(\"h3\",{children:\"How do I make a draft of my Locale while I work on it?\"}),/*#__PURE__*/e(\"p\",{children:\"Draft Locales are actively being worked on. Until then, we recommend using the Staging & Deploy feature to let you test on staging and deploy to your production URL when ready.\"}),/*#__PURE__*/e(\"h3\",{children:\"How do we ensure URLs point to the right page within Framer?\"}),/*#__PURE__*/e(\"p\",{children:\"All links within your website will retain the active Locale. Such as viewing your home page in the German Locale and clicking a link to your About page, will automatically route to the German version of the About page.\"}),/*#__PURE__*/e(\"h3\",{children:\"What if I do not translate everything? What if pieces are missing?\"}),/*#__PURE__*/e(\"p\",{children:\"If any piece of content has not been translated, the fallback language will be shown for that specific piece of content. This also scales to entire pages. This does not affect the active locale or URL.\"}),/*#__PURE__*/e(\"h3\",{children:\"Can you translate whole slugs?\"}),/*#__PURE__*/e(\"p\",{children:\"Currently, you cannot translate whole slugs in Framer. However, this is a feature we're considering for a future release.\\xa0\"}),/*#__PURE__*/e(\"h3\",{children:\"Do you set up URLs for some sites hosted outside of Framer but need the right URL?\"}),/*#__PURE__*/e(\"p\",{children:\"At the moment, Framer does not support localized links for sites hosted outside of Framer.\"}),/*#__PURE__*/e(\"h3\",{children:\"Can we add custom links to the localization toggle?\"}),/*#__PURE__*/e(\"p\",{children:\"The Locale Picker component in Framer automatically only supports the locales within Framer. We'd love to hear more about your use case for adding custom links.\"}),/*#__PURE__*/e(\"h3\",{children:\"You mentioned we use Href lang tags, but the sitemap doesn\u2019t show them. Where are they?\\xa0\"}),/*#__PURE__*/e(\"p\",{children:\"Yes, this is expected. You can see the hreflang tags in the HTML of every page.\"}),/*#__PURE__*/e(\"h3\",{children:\"What is the performance impact of adding Translations?\"}),/*#__PURE__*/e(\"p\",{children:\"Web page Localizations are loaded asynchronously, which means they don't block the rendering of the rest of your page. This is a good thing for performance, as it means users can start interacting with your page even if all Localizations haven't loaded yet.\"}),/*#__PURE__*/e(\"p\",{children:\"For smart components, Localizations are loaded synchronously, and all the translated strings are loaded per component. This could potentially be an issue if you have very large very text-heavy components, but this is not a common scenario.\"}),/*#__PURE__*/e(\"h3\",{children:\"How does Localization affect SEO?\"}),/*#__PURE__*/e(\"p\",{children:\"The Localized pages in Framer are deeply optimized for SEO. They include all the same performance and SEO features as base language pages in Framer. Along with this, we include the html lang tag and hreflang tags that Search engines are looking for in order to link to the correct pages.\"}),/*#__PURE__*/e(\"h3\",{children:\"What if I don\u2019t want something Translated?\"}),/*#__PURE__*/e(\"p\",{children:\"Non-translated items will always use the fallback value instead, if you want to have these still marked as \u201CDone\u201D and contribute to your Locale completion percentage, you can right-click them and select \u201CIgnore\u201D\"}),/*#__PURE__*/e(\"h3\",{children:\"How does it play with reverse proxy and already set language paths?\\xa0\"}),/*#__PURE__*/e(\"p\",{children:\"If you have a setup where you're using a reverse proxy and have language paths set up, and you have a page inside your Framer project with the same path as a locale, it will override the locale.\"}),/*#__PURE__*/e(\"p\",{children:\"For example, if you have a page in your Framer project at /en/p and you're also using a reverse proxy to direct /en/p to a non-Framer page, the Framer page will take precedence and be displayed instead.\"}),/*#__PURE__*/e(\"h3\",{children:\"Can I create Locales with specific regions?\"}),/*#__PURE__*/e(\"p\",{children:\"When creating a new Locale, first select a language and then you may optionally specify a region. This list displays common regions for the Locale, such as The Netherlands and Belgium for the Dutch language. For advanced Localization, projects on an Enterprise plan can define non-standard language / region pairings, such as English (Netherlands). \"})]});export const richText1=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Discovering the New Transforms Section\"}),/*#__PURE__*/e(\"p\",{children:\"There\u2019s a brand new section available in the property panel called \u2018Transforms.\u2019 Here, you\u2019ll find a collection of new properties including the option to add rotation with a new control that lets you pick between a 2D and a 3D rotation. Setting it to 3D gives us access to X, Y, and Z rotation axes.\"}),/*#__PURE__*/e(\"h3\",{children:\"Enhancing 3D Appearance with Perspective\"}),/*#__PURE__*/e(\"p\",{children:\"While rotating, our layer might still appear quite flat. To enhance the 3D effect, we can add perspective by setting it to a value like 1000. This significantly impacts the rendering of our layer. Uniquely, our entire selection UI can be projected in 3D space, allowing for more dynamic editing and interaction with transformed layers.\"}),/*#__PURE__*/e(\"h3\",{children:\"Implementing 3D Effects and Animations\"}),/*#__PURE__*/e(\"p\",{children:\"Next, I\u2019d love to demonstrate how to use the new origin property alongside effects to animate and transform elements dynamically. By copying the rotation and effects settings to another layer and adjusting the origin point, we gain tremendous control over our animations, impacting both the visual outcome and editing experience on the canvas.\"}),/*#__PURE__*/e(\"h3\",{children:\"Creating a Card Flip Animation\"}),/*#__PURE__*/e(\"p\",{children:\"Now, let's delve deeper into creating a card flip animation using these 3D tools. Starting with two images representing the front and back sides, we add looping effects to both. To prevent the back of the cards from showing during the flip, we utilize the back face property set to hidden. Adjusting the rotation settings allows the cards to hide interchangeably, creating a seamless flip effect.\"}),/*#__PURE__*/e(\"h3\",{children:\"Optimizing Animation with Single Effect\"}),/*#__PURE__*/e(\"p\",{children:\"To simplify our setup, we can group both cards under one frame and apply a single looping effect to control both, ensuring synchronization and smoother transitions. Adding the preserve 3D property ensures that all nested layers maintain their spatial relationship, enhancing the 3D effect.\"}),/*#__PURE__*/e(\"h3\",{children:\"Combining Effects for Enhanced Interactivity\"}),/*#__PURE__*/e(\"p\",{children:\"As a final enhancement, we can add a drag effect to our setup, allowing for user interaction with the card flip animation. This demonstrates how easily different effects can be combined in Framer to create complex, interactive 3D animations.\"}),/*#__PURE__*/e(\"h3\",{children:\"Ensuring Compatibility with Interactive Tools\"}),/*#__PURE__*/e(\"p\",{children:\"In Framer, 3D transforms are compatible with all existing interactive tools and components. This compatibility extends to custom cursor features, interactive components like slideshows, and projection of assets onto 3D planes, showcasing the versatility and power of 3D transformations in enhancing interactive and creative experiences.\"}),/*#__PURE__*/e(\"p\",{children:\"Framer\u2019s integration of direct manipulation, animation, and interactive tools not only facilitates new ideas but also enriches the creative process, leading to innovative designs and solutions in a playful, explorative environment.\"})]});export const richText2=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"While remaining simple on the surface, these features add powerful Localization flexibility, empowering you to meet the needs of a global audience. Hiding CMS Items and Web Pages per Locale lets you provide the most relevant content for each site visitor, while Localized Slugs & Redirects give you full control over your site URLs. In addition, the new Set Locale action in Components enables you to build fully custom Locale pickers to match the specific needs of your site.\"})});export const richText3=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\" Design interactive cursors using components, with infinite ways to customize. Tap into the power of Variants, Effects, and Transitions to design interactions with an incredible fidelity. Get started by adding a custom cursor to your Page, then switch its Variants on any layer. Choose between \u201CReplace\u201D to swap the default cursor with a Component, or \u201CFollow\u201D to add to it. It\u2019s a simple feature at first glance, but as you delve deeper you\u2019ll find it\u2019s remarkably versatile. We can\u2019t wait to see what you\u2019ll come up with.\"})});export const richText4=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Explore the latest creative tools we've added to the insert panel on your website! Located just under the elements section, this cool new feature is packed with fresh components and presets to jazz up your site. In this video, we walk you through creating an eye-catching spinning arc around an icon \u2013 it\u2019s super easy. Just drag and drop, tweak the size, color, and text, and choose a funky typeface to make it pop.\"}),/*#__PURE__*/e(\"p\",{children:\"We\u2019re also showing off some neat stuff like the countdown component, time and date feature, and some slick pattern presets including wave, grid, and noise. These aren\u2019t just pretty to look at; they\u2019re a breeze to customize to fit your style. Plus, there are these awesome scribbles and patterns you can quickly add to your designs.\"}),/*#__PURE__*/e(\"p\",{children:\"Whether you want to spruce up your site with cool text arcs, fun scribbles, or handy countdowns, these tools are simple to use and adapt. Check them out and keep an eye out for more updates coming your way!\"})]});export const richText5=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"In this video, we explore how to use a Framer template. Framer offers over a thousand templates, catering to various use cases. These templates are a mix of free and paid options, ensuring there\u2019s something for everyone.\"}),/*#__PURE__*/e(\"h4\",{children:\"Selecting and Using a Template\"}),/*#__PURE__*/e(\"p\",{children:\"Once you find a template like 'Nanoc Card,' which we used in the demo, you can start using it immediately. For free templates, simply click 'Use for Free.' If it\u2019s a paid template, you\u2019ll typically receive an email with a link to access it. Upon selection, the template creates a copy in your dashboard.\"}),/*#__PURE__*/e(\"h4\",{children:\"Editing Your Template\"}),/*#__PURE__*/e(\"p\",{children:\"Framer templates are essentially pre-made projects. You can edit everything in the template just like any other project. This includes changing text, modifying images, and altering design elements. We demonstrated how to change text to 'My Amazing Website' and tweak the color of an element.\"}),/*#__PURE__*/e(\"h4\",{children:\"Publishing Your Project\"}),/*#__PURE__*/e(\"p\",{children:\"Ready to go live? You can publish your project as a website directly from Framer. For a free template, it's published on a free domain. If you're looking to upgrade to a paid plan for features like a custom domain, you can easily do so in the project settings.\"}),/*#__PURE__*/e(\"h4\",{children:\"Upgrading and Customizing Further\"}),/*#__PURE__*/e(\"p\",{children:\"Under project settings, you'll find options to upgrade your project. Here, you can attach a custom domain or unlock additional features. This upgrade is ideal if you expect high traffic to your website or need more advanced features.\"}),/*#__PURE__*/e(\"h4\",{children:\"Support and Assistance\"}),/*#__PURE__*/t(\"p\",{children:[\"If you already have a paid plan and want to apply it to a new template, reach out to \",/*#__PURE__*/e(n,{href:\"mailto:support@framer.com\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"support@framer.com\"})}),\". They can assist in transferring your plan to the newly selected template, ensuring seamless integration.\"]})]});export const richText6=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Understanding Stack Variables in Framer: Enhancing Component Customization\"}),/*#__PURE__*/e(\"p\",{children:\"In this tutorial, we delve into the exciting world of stack variables in Framer. The addition of variable support for layout properties in components is a game-changer, allowing for more customizable components such as navigations. This feature is especially handy for controlling layout via a CMS.\"}),/*#__PURE__*/e(\"h3\",{children:\"Case Study: Pop-Out Navigation Menu\"}),/*#__PURE__*/e(\"p\",{children:\"Let\u2019s examine a practical example: a pop-out navigation menu from Nav Do Supply. This menu showcases a dynamic layout that changes based on the screen size. On a desktop view, it displays a horizontal layout of links. However, when resized to a phone breakpoint, the layout shifts to a vertical arrangement, and the gap between elements adjusts accordingly.\"}),/*#__PURE__*/e(\"h3\",{children:\"Simplifying Layouts with Variables\"}),/*#__PURE__*/e(\"p\",{children:\"Traditionally, achieving this kind of layout customization required multiple variants: open, closed, mobile open, and mobile closed. This approach, while effective, could lead to errors and complications, particularly in collaborative environments. The risk of creating unintended layout overrides was high.\"}),/*#__PURE__*/e(\"p\",{children:\"To streamline this process, we can reduce the variants to just two: open and closed. This simplification eliminates the need for mobile-specific variants. We focus on two key properties for customization on the phone breakpoint: direction (horizontal or vertical) and gap (distance between elements).\"}),/*#__PURE__*/e(\"h3\",{children:\"Implementing Layout Variables\"}),/*#__PURE__*/e(\"p\",{children:\"To implement these changes using variables, we follow these steps:\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\",\"--list-style-type\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Creating Variables:\"}),\" We start by selecting the stack containing the links. For the 'direction' property, we create a variable with the default set to 'horizontal' for desktop and tablet breakpoints. Similarly, for the 'Gap' property, we set the default to 10, and customize the stepper control for better adjustment.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Applying Variables on Different Breakpoints:\"}),\" Back on the homepage, we notice that our phone breakpoint variant resets to the primary variant due to the deletion of the mobile-specific variants. But now, any instance of our component has new controls for 'Direction' and 'Gap'. For the phone breakpoint, we set the direction to vertical and the gap to 20.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Preview and Testing:\"}),\" After adjusting the variables and setting the variant back to closed, we preview the navigation. The result is a seamless transition between a vertical layout on mobile and a horizontal layout on desktop. The interactions are driven by the two variants, while the responsiveness is managed by the two variables.\"]})})]}),/*#__PURE__*/e(\"p\",{children:\"This approach provides a flexible and easily customizable setup. By leveraging stack variables, we can significantly reduce the complexity and potential errors associated with managing multiple layout variants. This feature not only simplifies the design process but also enhances the adaptability and functionality of components in Framer.\"}),/*#__PURE__*/e(\"p\",{children:\"Stay tuned for more updates and insights into leveraging Framer's capabilities to create dynamic and responsive designs!\"})]});export const richText7=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Setting Up Shopify API Integration\"}),/*#__PURE__*/e(\"p\",{children:\"To integrate Shopify into a Framer site, the first step involves setting up Shopify. This process requires utilizing the Shopify API. In the Shopify dashboard, you need to set up an app and obtain an access token. Keep this token and your Shopify domain handy, as you'll need them multiple times throughout the integration process.\"}),/*#__PURE__*/e(\"h3\",{children:\"Utilizing Magic Import for Product Data\"}),/*#__PURE__*/e(\"p\",{children:\"If your store has a large inventory, manually adding products to Framer can be tedious. To simplify this, you can use a tool to export Shopify products into a CSV file, which can then be imported into Framer's CMS. The tool, available at framercommerce.com, requires your Shopify domain and storefront API access token to generate the CSV.\"}),/*#__PURE__*/e(\"h3\",{children:\"Creating a Shop CMS Collection in Framer\"}),/*#__PURE__*/e(\"p\",{children:\"In Framer, create a new CMS collection for your store, naming it as you wish. Ensure the fields in your CMS collection match the necessary product details. Once set up, import your CSV file into this collection. The import process includes tags and product types, which can be customized or removed based on your needs.\"}),/*#__PURE__*/e(\"h3\",{children:\"Copying & Pasting Design Components\"}),/*#__PURE__*/e(\"p\",{children:\"The next step is to add Shopify components to your Framer site. Start by copying the Shopify wrapper component from a base template, such as the Framer Commerce base template. This component, which you need to paste into your Framer site, contains fields for your Shopify domain and access token.\"}),/*#__PURE__*/e(\"p\",{children:\"For navigation, you can either integrate Shopify components into your existing navigation or use the navigation component from the base template. This component includes a cart with a live counter and modal overlay for cart management.\"}),/*#__PURE__*/e(\"h3\",{children:\"Setting Up Product Displays\"}),/*#__PURE__*/e(\"p\",{children:\"To display products, copy the product card (along with the CMS collection it's within) from the base file and paste it into your Framer site. You can configure this to display all products, featured products, or products filtered by collections. Adjust the layout and design to match your site's aesthetic.\"}),/*#__PURE__*/e(\"h3\",{children:\"Finalizing and Testing the Integration\"}),/*#__PURE__*/e(\"p\",{children:\"After setting up all components and ensuring they are properly configured with your Shopify data, publish your site. Test the functionality, such as adding products to the cart and viewing the cart. Make any necessary adjustments to the styles and layouts to seamlessly integrate the Shopify store into your Framer site.\"}),/*#__PURE__*/e(\"p\",{children:\"This integration allows you to leverage Framer's design capabilities with Shopify's robust e-commerce functionality, creating a seamless and efficient online shopping experience.\"})]});export const richText8=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Importance of Preparing Your Template for Submission to Framer\"}),/*#__PURE__*/e(\"p\",{children:\"Submitting a template to Framer requires careful preparation to ensure a higher chance of acceptance. This involves aligning pages, cleaning up unnecessary elements, organizing the left panel, and updating components.\"}),/*#__PURE__*/e(\"h3\",{children:\"Aligning Pages and Cleaning Up Unnecessary Elements\"}),/*#__PURE__*/e(\"p\",{children:\"First, align all pages to ensure they look good when someone duplicates your template. Remove extraneous elements from the canvas that aren't part of the template. This step ensures the template appears neat and professional.\"}),/*#__PURE__*/e(\"h3\",{children:\"Organizing the Left Panel\"}),/*#__PURE__*/e(\"p\",{children:\"In the left panel, delete unnecessary pages like 'test pages' or 'exploration pages' that aren't meant to be part of the final template. This helps in presenting a clean, organized template to users.\"}),/*#__PURE__*/e(\"h3\",{children:\"Cleaning Up the Assets Panel\"}),/*#__PURE__*/e(\"p\",{children:\"Ensure the assets panel is tidy by naming components logically and deleting duplicates or unused components. This makes it easier for users to understand and use your template.\"}),/*#__PURE__*/e(\"h3\",{children:\"Updating Components and Deleting Unused Ones\"}),/*#__PURE__*/e(\"p\",{children:\"Update all components to the latest versions, especially if they're not your own. Remove any components that aren't being used in the template to streamline it.\"}),/*#__PURE__*/e(\"h3\",{children:\"Publishing the Template and Checking for Errors\"}),/*#__PURE__*/e(\"p\",{children:\"Publish your template to check for any errors. If there are warnings, download the error file to identify issues like nested 'a' tags, which can affect site optimization and SEO. Resolve these errors before finalizing your submission.\"}),/*#__PURE__*/e(\"h3\",{children:\"Optimizing the Site and Setting a Nice Title and Description\"}),/*#__PURE__*/e(\"p\",{children:\"Optimize your site for speed and SEO. Set a descriptive title, a proper language setting, and a favicon to enhance the template's appeal. These small details can significantly impact the perceived professionalism of your template.\"}),/*#__PURE__*/e(\"h3\",{children:\"Getting a Custom Framer Subdomain\"}),/*#__PURE__*/e(\"p\",{children:\"Consider claiming a custom Framer subdomain for your template. This not only makes your template look more professional but also enhances its marketability.\"}),/*#__PURE__*/e(\"p\",{children:\"By following these steps, you can significantly increase the chances of your template being accepted on the Framer website. Remember to review these common issues if your template isn't accepted initially, and good luck with your submissions!\"})]});export const richText9=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Getting Started with AI Style\"}),/*#__PURE__*/e(\"p\",{children:\"To begin, navigate to the localization table in Framer and find AI Style under the local options. Here's where the magic happens. You can tailor translations to your website's tone and context. For example, setting a casual tone and specifying it's a band website helps the AI provide more accurate and relevant translations.\"}),/*#__PURE__*/e(\"h3\",{children:\"Fine-Tuning Translations for Accuracy\"}),/*#__PURE__*/e(\"p\",{children:'AI Style isn\\'t just about broad strokes; it\\'s incredibly detail-oriented. Suppose your band\\'s name, \"Cottonwood,\" is also a common noun. The AI might mistakenly translate it. But no worries \u2013 AI Style lets you specify words like \"Cottonwood\" to remain untranslated, ensuring brand consistency across languages.'}),/*#__PURE__*/e(\"h3\",{children:\"Seamless Integration Across Your Site\"}),/*#__PURE__*/e(\"p\",{children:\"Once AI Style is set up, it works everywhere \u2013 from site settings to CMS items. The new filter function, a much-requested community feature, adds another layer of control, allowing you to translate individual CMS items effectively.\"}),/*#__PURE__*/e(\"h3\",{children:\"Experience Your Site in Dutch (or Any Language!)\"}),/*#__PURE__*/e(\"p\",{children:\"Switching to Dutch on the canvas, you'll notice how seamlessly AI Style integrates, maintaining the essence of your content while adapting to the new language. This feature isn't just limited to Dutch; it's a universal tool for any language you wish to target.\"}),/*#__PURE__*/e(\"h3\",{children:\"Automatic Localization for User Preference\"}),/*#__PURE__*/e(\"p\",{children:\"Another standout feature is Automatic Local, found in the site settings under the general section. When enabled, it automatically presents the site in the visitor's preferred language based on their browser settings. This intuitive feature ensures a personalized experience for each visitor, regardless of their language preference.\"})]});export const richText10=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Disclaimer: \"}),/*#__PURE__*/e(n,{href:\"https://framerauth.com/\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"FramerAuth\"})}),\" is not an official Framer product and requires an additional subscription purchased with the creators of Framer Auth. \",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Exciting news for Framer website creators! A third-party tool, Framer Auth, now enables you to add authentication features to your site. This means you can create exclusive member-only areas, offering sign-up, sign-in, and password recovery functionalities. It's a fantastic way to build a premium, gated content experience for your audience.\"]}),/*#__PURE__*/e(\"h3\",{children:\"Creating a Member-Only Experience\"}),/*#__PURE__*/e(\"p\",{children:\"Imagine building a Patreon-like website where users must become supporters to access exclusive content. Using Framer Auth, you can set up a seamless process where users sign up for a free trial, receive a license key, and upon purchase, activate their account. This process not only ensures secure access but also enhances user engagement with your content.\"}),/*#__PURE__*/e(\"h3\",{children:\"Setting Up FramerAuth\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Initial Setup:\"}),\" After receiving an email invitation from Framer Auth, you start by naming your website and linking it to your Framer project.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Integration with Lemon Squeezy:\"}),\" To monetize your content, integrate with Lemon Squeezy, enabling you to set up payment options and manage subscriptions.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"API Key Configuration:\"}),\" Ensure you're in the correct mode (test or live) when adding your Lemon Squeezy API key for a successful connection.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Product and Subscription Setup\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Creating Products:\"}),\" In Lemon Squeezy, set up products with variants like annual or monthly subscriptions, including free trials and license keys.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Publishing Products:\"}),\" Once your product variants are set up, publish them and sync with Framer Auth for seamless user experience.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Implementing Framer Components\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Adding Components:\"}),\" Utilize components like the sign-up form, sign-in form, and password reset form. Customize these components to match your site's design and functional requirements.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Using Overrides:\"}),\" Apply overrides for additional functionality like auto-filling license keys or conditional display based on user status (logged in/out).\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Locking and Managing Content\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Locking Pages:\"}),\" Easily lock pages in Framer to restrict access to members only. You can customize access based on different subscription plans.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"User Account Management:\"}),\" Add features like managing subscriptions, displaying user names, and email addresses for a personalized touch.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Finalizing and Testing\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Testing User Flow:\"}),\" It's crucial to test the entire user journey from signing up, accessing content, managing accounts, to ensuring all locked content is appropriately gated.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customization and Personalization:\"}),\" Fine-tune your site's look and feel, ensuring it aligns with your brand while providing a smooth user experience.\"]})})]}),/*#__PURE__*/e(\"p\",{children:\"Incorporating Framer Auth into your Framer site opens up a world of possibilities for creating exclusive, member-only content. Whether it's for educational material, digital products, or community-based content, the tools at your disposal are powerful and user-friendly. Remember, the Framer community is always here to support you. If you have any questions or need assistance, don't hesitate to reach out!\"})]});export const richText11=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Creating Links Made Easy\"}),/*#__PURE__*/e(\"p\",{children:\"With the Link property, adding connectivity to any text layer or frame is a straightforward process. Whether it's an intra-site page link or a connection to an external URL, the selection process is as simple as a click.\"}),/*#__PURE__*/e(\"h3\",{children:\"Building Anchors with Target\"}),/*#__PURE__*/t(\"p\",{children:[\"Another exciting feature we offer is the ability to link to specific sections within a page using a 'Target'. 'Targets' act as anchors and need to be pre-defined in the layer you plan to link. The setup process is straightforward: navigate to the element you want to anchor to and enable the Scroll Target property. Once you've assigned a name to the target, it becomes available in the link dropdown list. For a live example, feel free to check \",/*#__PURE__*/e(n,{href:\"https://viewport.framer.wiki/#october\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"this link\"})}),\".\"]}),/*#__PURE__*/e(\"h3\",{children:\"Personalizing Links with Link Styles\"}),/*#__PURE__*/e(\"p\",{children:\"To enhance the user experience, we give you the liberty to customize the appearance of your text links. To define a 'Link Style', you can use the Style property, located within the Link section on the properties panel. From there, you can either choose from our select pre-defined link styles or let your creativity run wild by creating your own.\"}),/*#__PURE__*/e(\"h3\",{children:\"Unleashing the Flexibility of Link Styles\"}),/*#__PURE__*/e(\"p\",{children:\"Link Styles aren't standard text styles; they're much more flexible and customized. Firstly, they involve only a subset of overridable properties such as color and decoration. This design choice saves you the hassle of dealing with every property, resulting in a smoother, faster design process. Furthermore, they come with predefined states like default, hover, and active. This ensures the link style is rendered dynamically based on its state, delivering a more interactive navigation experience.\"})]});export const richText12=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Introducing Page Effects in Framer, an exciting feature built on top of the Vue Transitions API, designed to allow you to create custom animations between pages. What sets this apart is that Framer is one of the very first tools offering this level of functionality.\"}),/*#__PURE__*/e(\"h3\",{children:\"The New Page Effects UI\"}),/*#__PURE__*/e(\"p\",{children:\"We have worked on introducing an effects panel where you can add page effects to either all pages or to a single page. This became an essential realization when we noticed for larger sites, the same transition was often desired across all pages. So in the effects panel, you have the ability to target a specific page or animate between all pages.\"}),/*#__PURE__*/e(\"h3\",{children:\"Handy Presets and Custom Animations\"}),/*#__PURE__*/e(\"p\",{children:\"Our new Page Effect UI is packed with a bunch of useful presets to choose from. Alongside these, there's a room to design custom exit animations of the current page and custom enter animations for whichever page you are navigating to, offering a broad spectrum of creativity.\"}),/*#__PURE__*/e(\"p\",{children:\"And for those who have used Framer effects before, these panels would feel homey. We have incorporated a whole slew of properties that can be animated along with the provision to define custom transitions.\"}),/*#__PURE__*/e(\"h3\",{children:\"Transitioning With Elegance\"}),/*#__PURE__*/e(\"p\",{children:\"The moment you add a page effect and give it a preview, a soothing shift in experience is observable. As you navigate between pages, each page doesn't just appear instantly but gently transitions into view. This creates a unique, elegant feel augmenting your website user journey.\"}),/*#__PURE__*/e(\"h3\",{children:\"Creating Unique Transitions with Page Effects\"}),/*#__PURE__*/e(\"p\",{children:\"Our functionalities do not stop at just creating same transition effects for all pages. Imagine you wanted to add a distinctive transition when opening a blog post, Framer's page effects tool can help you achieve that with a few simple steps.\"}),/*#__PURE__*/e(\"p\",{children:\"Target the blog pages from the CMS, add a new page effect, and choose a preset that suits your needs. For example, you could use the 'wipe left' preset and customize it using the mask property. This specialized control for page effects introduces a plethora of masking options you can use, giving more creative control over your web designs. All of these masks can be individuated enhancing the uniqueness of your transition effects.\"}),/*#__PURE__*/e(\"h3\",{children:\"Creating Customized Transition Paths\"}),/*#__PURE__*/e(\"p\",{children:\"Creating reverse effects is as simple as creating the original effect. You could easily add another page effect pointing back to the blog index page from the blog pages. Likewise, you could also add crossfade effects when maneuvering back and forth pages other than the blog page.\"}),/*#__PURE__*/e(\"h3\",{children:\"Endless Possibilities With Framer\"}),/*#__PURE__*/e(\"p\",{children:\"We offer a vast array of effects to experiment with; circular masking, blinds, zigzag masking, and inset are just a few to name. Each of these effects is highly customizable, extending endless possibilities for your web design journey. You also won't have to worry about browser compatibility, as these effects can adjust to being instant to ensure nothing looks out of line.\"})]});export const richText13=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Effects in components are a new way to add animations and interactions to your components. With effects in components, you can define animations for any property of a component, including opacity, position, scale, and rotation. You can also trigger animations based on events, such as scroll, hover, and click.\"}),/*#__PURE__*/e(\"h3\",{children:\"Benefits of effects in components\"}),/*#__PURE__*/e(\"p\",{children:\"There are many benefits to using effects in components. Some of the benefits include:\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Reusable animations:\"}),\" You can define animations once and then reuse them in multiple components. This can save you a lot of time and effort.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"More complex animations:\"}),\" You can create more complex animations than you could with our previous animation system.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Easier to maintain:\"}),\" Effects in components are easier to maintain than animations that are defined in code.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"How to use effects in components\"}),/*#__PURE__*/e(\"p\",{children:\"To use effects in components, you will need to use the new Effects panel. The Effects panel is a drag-and-drop interface that makes it easy to define animations.\"}),/*#__PURE__*/e(\"p\",{children:\"To define an animation, you will first need to select the component that you want to animate. Then, you will need to add an effect to the component. You can add effects to components by dragging and dropping them from the Effects panel.\"}),/*#__PURE__*/e(\"p\",{children:\"Once you have added an effect to a component, you can customize the animation by editing the properties of the effect. You can also preview the animation in real time.\"}),/*#__PURE__*/e(\"h3\",{children:\"Examples of effects in components\"}),/*#__PURE__*/e(\"p\",{children:\"In the video, we show several examples of how to use effects in components. For example, we show how to create a navigation bar that animates out of view when you scroll down, and how to create a header that animates in gradually when you load a page.\"}),/*#__PURE__*/e(\"h3\",{children:\"Conclusion\"}),/*#__PURE__*/e(\"p\",{children:\"Effects in components are a powerful new feature that will make it easier to create reusable and animated components. We are excited to see how you will use effects in components to create amazing websites.\"})]});export const richText14=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"We're thrilled to extend our array of scroll and appear effects with the addition of four dynamic ones - Hover, Drag, Loop, and Press. Each of these allows for unique interactions and experiences and are customizable as per your needs.\"}),/*#__PURE__*/e(\"h3\",{children:\"Hover Effect\"}),/*#__PURE__*/e(\"p\",{children:\"Our journey starts with the Hover effect. This can be accessed from the simplified and redesigned effects panel in Framer. Tweaking properties like scale and rotation is straightforward, and the real-time preview on the canvas inspires quick prototyping. Even 3D rotation or offset can be manipulated to your liking. Upon previewing, it becomes apparent how simple it is to add interactive hover effects to elements on your web page. Although you can still use components with hover variants, this release no longer makes it a necessity if your goal is to incorporate an intuitive hover effect.\"}),/*#__PURE__*/e(\"h3\",{children:\"Drag Effect\"}),/*#__PURE__*/e(\"p\",{children:\"Besides the Hover effect, we've introduced a Drag effect. Here, you get to experiment with properties related exclusively to dragging items. By keeping free form and snapback active, and just adjusting the transition, you create an interaction where the layer can be dragged freely and bounced back to its original place, thanks to the snapback feature.\"}),/*#__PURE__*/e(\"p\",{children:\"With this release, a new feature to highlight is the layer panel indicator, which shows layers with an effect applied. It\u2019s small touches like these that make managing complex projects a lot easier.\"}),/*#__PURE__*/e(\"h3\",{children:\"Loop Effect\"}),/*#__PURE__*/e(\"p\",{children:'Next up is the Loop effect, a personal favorite, which proves extremely powerful yet simple in achieving continuous animations. By fiddling with the offset property, you can set movement in any direction, revealing a seamless loop when previewed. For more organic animations, setting the loop type to \"mirror\" will cause the loop to bounce back and forth. This, combined with adding a spring transition curve and layer delay, can bring any static web page to life.'}),/*#__PURE__*/e(\"h3\",{children:\"Press Effect\"}),/*#__PURE__*/e(\"p\",{children:\"Lastly, we have the Press effect. This features an automatic scale reduction on press to partner efficiently with the Hover effect. By manipulating the rotate and transition properties, a layer reacts with rotation on mouse-down and returns to its original state upon mouse-up.\"}),/*#__PURE__*/e(\"h3\",{children:\"More is Better - Combining the Effects\"}),/*#__PURE__*/e(\"p\",{children:\"The fun doesn't stop at just using individual effects. A unique feature of these new additions is their combinability. You can apply all four effects onto a single layer. If we take a simple layer such as the 'pinwheel', you get an upscaling on mouse hover, downscaling on mouse press, infinite rotation, and constrained draggable capability within a predefined area. It gets better with simulated physics that captures the dragging velocity- you can toss the layer around and watch it bounce off the sides using custom transitions.\"}),/*#__PURE__*/e(\"p\",{children:\"Finally, Framer\u2019s intelligent enough to assign default cursors for interactive layers. For instance, a draggable layer gets a 'grab' cursor on hover and 'grabbing' cursor while dragging.\"})]});export const richText15=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"Carlos, an illustrator and web developer, walks you through the process of building this feature using Smart Components, Code Components & Overrides, and optimizing it for mobile devices. The tutorial covers the construction and transition dynamics of the component, as well as how to create a progress bar using Code Components. Carlos also demonstrates how to expose properties for flexible customization and provides tips for adapting the layout to different screen sizes. Click the remix link for the final result.\"})});export const richText16=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"In the video, I provide a step-by-step tutorial on setting up the project in Framer. This involves creating frames, positioning videos within a container, adding scroll transform effects, and adjusting the scale and rotation of the elements. I also address common issues, such as videos appearing clipped or scrolling out of view.\"}),/*#__PURE__*/e(\"p\",{children:\"Throughout the tutorial, I share valuable insights and tips for achieving the desired result. Additionally, I add extra functionality to the grid by incorporating a play button and overlay that allows users to view videos in full screen.\"})]});export const richText17=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"You\u2019ll learn how to create a totally gnarly wave effect with just three layers that rotate on a linear curve. From drawing a frame to setting a radius, this tutorial will have you hanging ten in no time. And with the ability to add elements and customize colors and positions, the possibilities for making a wave of your own are endless! Don\u2019t be a beach bum, check out the video for a step-by-step guide and a remix link to make your own totally rad waves.\"})});export const richText18=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"By following the steps I demonstrate, you'll learn how to set up a sticky section that sticks to the top of the page as you scroll, add a slideshow within that section, and apply scroll transform effects to achieve the scaling and scrolling behavior. I'll also provide additional tweaks to improve the appearance of the slideshow, such as adjusting video duration, resizing arrows, and showing all videos within the slideshow. Additionally, I demonstrate how to add a text layer with scroll transform and create a card ticker effect for the next section. By the end of the tutorial, you'll have a project that closely resembles the Apple effect, and you can try it out yourself using the remix project.\"})});export const richText19=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"I'm excited to show you how to create a fantastic draggable canvas effect using Framer. The canvas mimics the interactive canvas on the Framer website, allowing users to effortlessly drag and reposition elements. I'm also thrilled to share that other websites like Sketch and Jitter have implemented similar interactive features.\"}),/*#__PURE__*/e(\"p\",{children:\"To get started, I begin by explaining the step-by-step process. I draw a frame that spans the entire page and pin it to the top left and right corners. This frame serves as the canvas. Next, I create a large draggable layer within the canvas, which will contain all the movable elements. By adding the drag effect to this layer, users can easily pick up and move it around.\"}),/*#__PURE__*/e(\"p\",{children:\"Now comes the fun part: adding elements to the canvas. I provide examples like videos, tweets, logos, images, and more. These elements can be freely dragged and positioned within the canvas. Additionally, I demonstrate how to enhance the user experience by adding hover effects, press effects, and custom cursors to the elements. This way, when users hover over the elements, they become responsive and intuitive.\"}),/*#__PURE__*/e(\"p\",{children:\"I also show you how to fine-tune the canvas for different breakpoints, such as tablet and mobile. This ensures that the layout and positioning of the elements adapt to smaller screen sizes, making the canvas fully responsive.\"}),/*#__PURE__*/e(\"p\",{children:\"Finally, I mention that the project can be published as a real website. When viewed in a browser, the canvas effect is preserved, allowing users to drag and interact with the elements. I provide a link to the project for you to explore and create your own draggable website.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})})]});export const richText20=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Creating an Account on Lemon Squeezy\"}),/*#__PURE__*/e(\"p\",{children:\"To start selling your Framer template on Lemon Squeezy, first, navigate to Lemon Squeezy's website and create an account. If you already have an account, simply sign in. During account creation, you'll need to provide some basic information. Once your store is set up, you can begin adding products.\"}),/*#__PURE__*/e(\"h3\",{children:\"Adding a New Product on Lemon Squeezy\"}),/*#__PURE__*/e(\"p\",{children:\"To add a new product, click on the 'Plus' icon on the top right corner and select 'New Product'. Here's what you need to do next:\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\",\"--list-style-type\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Product Name and Description\"}),\": Enter a name for your product. Include a detailed description that outlines what your template includes, its uses, and any special features. This helps potential buyers understand what they're purchasing.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Product Details\"}),\": Scroll down to select 'Single Payment' for a one-time fee. Set your price (e.g., 49 euros). You can also upload images of your template. Remember, the first image you upload will be the primary image displayed on your store page.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Redirecting to the Remix Link\"}),\": Since you're selling a Framer template, you won't need to upload any files directly. Instead, you'll redirect customers to a remix link of your Framer project. This means they'll get a copy of your project in their own Framer account upon purchase.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Generating a Remix Link for the Framer Template\"}),/*#__PURE__*/e(\"p\",{children:\"In Framer, open the template project you want to sell. Go to the menu, select 'File', and then 'Copy Remix Link'. This link allows buyers to obtain a copy of your project.\"}),/*#__PURE__*/e(\"h3\",{children:\"Adding the Remix Link to the Product Page and Purchase Confirmation Email\"}),/*#__PURE__*/e(\"p\",{children:\"Paste the remix link in the appropriate field so that after purchasing, customers are immediately redirected to your template. Also, add this link to the button in the purchase confirmation email. This way, if customers lose the template, they can always retrieve it from the email.\"}),/*#__PURE__*/e(\"h3\",{children:\"Publishing the Product on Lemon Squeezy\"}),/*#__PURE__*/e(\"p\",{children:\"After finalizing your product details, click 'Publish'. You don't need to add a custom thank you note; the default option works fine.\"}),/*#__PURE__*/e(\"h3\",{children:\"Using the Share URL to Submit the Template to Framer\"}),/*#__PURE__*/e(\"p\",{children:\"When you're ready to submit your template to Framer, use the share URL provided by Lemon Squeezy. This URL remains constant, even if you make changes to your product listing, ensuring a stable link for your customers and for submission purposes. Share this URL on social media or directly with Framer for template submission.\"})]});export const richText21=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"To update your website's meta info, head over to the top right of the project and go to your project settings. Then, head over to the General tab. This is where you can set the meta info for your entire website.\"}),/*#__PURE__*/e(\"p\",{children:\"As you can see, you can set a title, description, and site language. You can also preview what this will look like on Google.\"}),/*#__PURE__*/e(\"h3\",{children:\"Updating Your Page's Meta Info\"}),/*#__PURE__*/e(\"p\",{children:\"You can also overwrite the meta info for individual pages. To do this, head over to the page you want to update and go to the View all of the Fusion updates. Then, hit save.\"}),/*#__PURE__*/e(\"p\",{children:\"Now, this specific page has a specific title and page description. So, if you find this page on Google or share the URL to this page on something like Twitter, this is the info that will show up.\"}),/*#__PURE__*/e(\"h3\",{children:\"Additional Info\"}),/*#__PURE__*/e(\"p\",{children:\"There is some extra info that you can adjust for pages. For example, you can make sure that a page shows up in a search engine or not. By default, this will be enabled, but you can disable it if you want.\"}),/*#__PURE__*/e(\"p\",{children:\"You can also decide if you want this page to show up in your own site search. So, if you have search enabled on your website, you can decide whether this page is indexed by the search on your own website.\"}),/*#__PURE__*/e(\"h3\",{children:\"Checking Your Meta Info\"}),/*#__PURE__*/e(\"p\",{children:\"To check if your meta info is set correctly, you can go to the website metatags.io. Paste the URL of your website into the search bar and hit enter.\"}),/*#__PURE__*/e(\"p\",{children:\"Here, you can check if all of the info is set correctly. You can see the title, description, and social image. You can also see a preview of what this will look like when you share it on Twitter, Facebook, LinkedIn, Pinterest, and Slack.\"}),/*#__PURE__*/e(\"h3\",{children:\"Troubleshooting\"}),/*#__PURE__*/e(\"p\",{children:\"Sometimes, it might happen that if you have updated your title, description, or image, Google or any other website is not parsing the info correctly. This often means that Google has simply not updated the info yet or that, for example, Twitter has cached your website so the info is not showing correctly there yet.\"}),/*#__PURE__*/e(\"p\",{children:\"If metatags.io is showing the correct info, it just means you have to wait a little bit longer for Google to re-index your website or for a platform like Twitter to pick up the new info.\"})]});export const richText22=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"In today's digital landscape, safeguarding your website's content is paramount. This blog post delves into the process of effortlessly adding password protection to your Framer website, ensuring that only authorized individuals can access your valuable content.\"}),/*#__PURE__*/e(\"h3\",{children:\"Enabling Password Protection\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Access Project Settings:\"}),\" Navigate to your project's settings by heading to the top right corner of the project.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enable Password Protection:\"}),\" Locate the 'Password Protection' section and enable the toggle.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Set Password:\"}),\" Choose a strong password that meets your security requirements. Alternatively, utilize the auto-generated password for convenience.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Save Changes:\"}),\" Click 'Save' to apply the password protection settings.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Password Protection Functionality\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Password Prompts:\"}),\" Upon visiting your password-protected website, users will be prompted to enter the correct password to gain access.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Browser Password Retention:\"}),\" Your browser will securely store the password, eliminating the need to re-enter it for subsequent visits.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Password Requirement after Republishing:\"}),\" Republishing your website will necessitate re-entering the password to maintain its protection.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Disabling Password Protection\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Project Settings Access:\"}),\" Navigate to your project's settings once again.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Password Protection Toggle:\"}),\" Disable the 'Password Protection' toggle.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Save Changes:\"}),\" Click 'Save' to remove password protection from your website.\"]})})]}),/*#__PURE__*/e(\"p\",{children:\"By following these simple steps, you can effectively safeguard your Framer website's content, ensuring that only authorized individuals can access sensitive information. Remember, password protection plays a crucial role in maintaining the privacy and integrity of your website.\"})]});export const richText23=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Framer is a powerful tool that allows you to build entire websites without writing any code. However, there may be times when you need to add custom code to your site. This can be done by adding code to the start or end of your head tag or the start or end of your body tag.\"}),/*#__PURE__*/e(\"p\",{children:\"To add custom code to your entire site, go to your project settings and scroll down to the custom code section. Here, you can add code that will run on every page of your site.\"}),/*#__PURE__*/e(\"p\",{children:\"To add custom code to a single page, go to the page settings and add your code to the custom code section. This code will only run on that page.\"}),/*#__PURE__*/e(\"h3\",{children:\"Here are some examples of when you might need to add custom code to your Framer site:\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"To add an intercom chat\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"To add Facebook pixel\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"To add other scripts\"})})]}),/*#__PURE__*/e(\"p\",{children:\"Adding custom code is a great way to extend the functionality of your Framer site. However, it is important to note that adding custom code can also make your site more difficult to maintain.\"})]});export const richText24=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"In this video, we will show you how to connect a custom domain to your Framer project. This will allow you to use your own domain name instead of the default Framer domain.\"}),/*#__PURE__*/e(\"h3\",{children:\"1. Add a Custom Domain\"}),/*#__PURE__*/e(\"p\",{children:\"To add a custom domain, go to your project settings and then head over to the domains tab. By default, when you publish your frame or website, Framer will generate a domain for you. This is great so you can start testing it in the browser, but you can also get a free subdomain from Framer. This could be anything as long as it's not taken yet.\"}),/*#__PURE__*/e(\"h3\",{children:\"2. Connect Your Own Domain\"}),/*#__PURE__*/e(\"p\",{children:\"Once you have added a custom domain, you can connect your own domain. To do this, remove the domain that you just added and head over to the connect domain you own. Enter your domain and hit the check. This means you are now attaching this domain to this project.\"}),/*#__PURE__*/e(\"h3\",{children:\"3. Update Your DNS Records\"}),/*#__PURE__*/e(\"p\",{children:\"The next step is to make sure your DNS records are updated so that your domain provider knows that this domain should point to this Framer project. For some domain providers, Framer supports autoconnect. Framer checks whether your domain is hosted at a domain provider which supports this. If your domain provider supports auto connect, a blue button will show up which will let you auto connect your domain to your Google DNS. If this blue button does not show up, you will have to enter this DNS information in your domain provider to make sure it knows that this project should now be connected to your domain.\"}),/*#__PURE__*/e(\"h3\",{children:\"4. Autoconnect Your Domain\"}),/*#__PURE__*/e(\"p\",{children:\"To autoconnect your domain to your Google DNS, hit autoconnect which will open Google domains which is going to ask you do you want to connect this domain to framer. Click yes and this is automatically going to add all of the DNS records so Google Now confirms that their domain is connected to Framer.\"}),/*#__PURE__*/e(\"h3\",{children:\"5. Verify the Connection\"}),/*#__PURE__*/e(\"p\",{children:\"Finally, go back to Framer and click refresh and Framer now also confirms that your domain is connected. So now if you head over to you're a dot video, you will see that your site is now connected to your custom domain.\"}),/*#__PURE__*/t(\"p\",{children:[\"We hope this video helps you connect a custom domain to your Framer project. If you have any questions, please join the Framer community at \",/*#__PURE__*/e(n,{href:\"www.framer.community\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"www.framer.community\"})}),\".\"]})]});export const richText25=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Redirects are a way to send visitors from one page on your website to another page. This can be useful for a number of reasons, such as when you delete a page or when you want to move content to a new page.\"}),/*#__PURE__*/e(\"p\",{children:'To add a redirect in Framer, go to the project settings and then click on the \"Redirects\" tab. Here, you can create a new redirect by entering the old URL and the new URL. You can also edit or remove existing redirects.'}),/*#__PURE__*/e(\"p\",{children:\"Once you have created a redirect, it will be published to your website immediately. You can test your redirect by typing the old URL into your browser. You should be redirected to the new URL.\"}),/*#__PURE__*/e(\"p\",{children:\"Redirects are a useful tool for managing your website. They can help you to improve your website's user experience and make it easier for visitors to find the information they are looking for.\"})]});export const richText26=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/t(\"p\",{children:[\"Learn how to \",/*#__PURE__*/e(\"strong\",{children:\"Publish\"}),\" new versions, rollback changes, and review previous versions of your website. Explore the settings and options available for \",/*#__PURE__*/e(\"strong\",{children:\"Staging\"}),\", enabling you to deploy the desired version as the live website. Additionally, gain insights into identifying and resolving optimization warnings that may affect site speed and SEO performance.\"]})});export const richText27=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"We offer a built-in analytics solution that is fully GDPR compliant and doesn't require any consent. To view the built-in analytics, go to your project settings and then on the left head over to Analytics.\"}),/*#__PURE__*/e(\"p\",{children:\"In this tab, you'll be able to see how many people have visited your website in the last 30 days or the last week. You can also hover over the graph to see a breakdown per day.\"}),/*#__PURE__*/e(\"p\",{children:\"Scrolling down a little bit, you can see the top sources of traffic to your site, as well as a breakdown of the top pages that visitors are landing on.\"}),/*#__PURE__*/e(\"h2\",{children:\"Metrics\"}),/*#__PURE__*/e(\"p\",{children:\"The Framer analytics provide a powerful core set of metrics:\"}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Unique Visitors\"}),\": Every individual who came by your site\"]})}),/*#__PURE__*/e(\"li\",{children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Page Views\"}),\": Every page load (Typically multiple per visitor)\"]})}),/*#__PURE__*/e(\"li\",{children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Top Sources:\"}),\" All the sites that point to your site (These are a bit approximate as browser have become very strict when the report the referrers for privacy reasons)\"]})}),/*#__PURE__*/e(\"li\",{children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Top Pages:\"}),\" The most visited pages on your site\"]})})]}),/*#__PURE__*/e(\"p\",{children:\"Framer analytics are semi live, they update every minute or two. Perfect for big launches where you need to keep an eye on the total visitors during the day.\"}),/*#__PURE__*/e(\"h2\",{children:\"Quality\"}),/*#__PURE__*/e(\"p\",{children:\"Framer analytics are typically more accurate than other analytics for two reasons:\"}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{children:/*#__PURE__*/e(\"p\",{children:\"They don't get blocked by popular ad blockers because they are part of your site\"})}),/*#__PURE__*/e(\"li\",{children:/*#__PURE__*/e(\"p\",{children:\"They use a combination of JavaScript and backend to count the number of visitors\"})})]}),/*#__PURE__*/e(\"h2\",{children:\"Privacy\"}),/*#__PURE__*/e(\"p\",{children:\"Analytics tools often write a persistent cookie with a user id to identify you which can result in the need for a cookie banner according to privacy laws such as the GDPR. Framer analytics apply a common strategy to completely anonymise your users by using a daily rotating secret (salt), resulting in completely anonymous analytics.\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Note\"}),\": You can combine our built-in analytics with Google Analytics or any other analytics tool. \",/*#__PURE__*/e(n,{href:{pathVariables:{dYw7VMexb:\"how-to-set-up-google-analytics\"},unresolvedPathSlugs:{dYw7VMexb:{collectionId:\"t9gvWQQj9\",collectionItemId:\"hvDgZMr0K\"}},webPageId:\"WFNHz6x0b\"},openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Learn more\"})}),\".\"]})]});export const richText28=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"In this video, we introduce two new components, the carousel component and the ticker component. Both components unlock entirely new use cases when it comes to designing interactive websites.\"}),/*#__PURE__*/e(\"h3\",{children:\"The Ticker Component\"}),/*#__PURE__*/e(\"p\",{children:\"The ticker component is optimized for creating infinitely looping animations. It is highly customizable and works in any direction. It also adds some fun new interactions like the ability to slow it down on hover.\"}),/*#__PURE__*/e(\"p\",{children:\"To use the ticker component, simply drag and drop it onto the canvas. You can then connect it to any layer or component on your canvas. The ticker will automatically handle the duplication for you, figuring out the optimal amount of duplication to create the best performing infinite loops.\"}),/*#__PURE__*/e(\"h3\",{children:\"The Carousel Component\"}),/*#__PURE__*/e(\"p\",{children:\"The carousel component allows you to create scrollable areas either horizontally or vertically. It can optionally include scroll snapping and arrow controls.\"}),/*#__PURE__*/e(\"p\",{children:\"To use the carousel component, drag and drop it onto the canvas. You can then connect it to any layer or component on your canvas. The carousel is also highly customizable and shares a lot of the same styling options as the ticker component.\"}),/*#__PURE__*/e(\"h3\",{children:\"Conclusion\"}),/*#__PURE__*/e(\"p\",{children:\"We are excited to share these components with you and we can't wait to see what you will end up creating. As always, thank you so much for watching and stay tuned for more updates coming soon.\"})]});export const richText29=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Getting Started\"}),/*#__PURE__*/e(\"p\",{children:\"To set up a working cookie banner, you need three things:\"}),/*#__PURE__*/t(\"ol\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"The Cookie Banner component\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"A \",/*#__PURE__*/e(n,{href:\"https://tagmanager.google.com\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Google Tag Manager\"})}),\" container\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"A site on a \",/*#__PURE__*/e(n,{href:{webPageId:\"iZtatOr8S\"},openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Pro plan\"})})]})})]}),/*#__PURE__*/e(\"h2\",{children:\"Adding the component to your site\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,b17nXKNgyTngXrdNGJvqexpzw.png\",\"data-framer-height\":\"1052\",\"data-framer-width\":\"2000\",height:\"526\",src:\"https://framerusercontent.com/images/b17nXKNgyTngXrdNGJvqexpzw.png\",srcSet:\"https://framerusercontent.com/images/b17nXKNgyTngXrdNGJvqexpzw.png?scale-down-to=512 512w,https://framerusercontent.com/images/b17nXKNgyTngXrdNGJvqexpzw.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/b17nXKNgyTngXrdNGJvqexpzw.png 2000w\",style:{aspectRatio:\"2000 / 1052\"},width:\"1000\"}),/*#__PURE__*/e(\"p\",{children:\"To access the Cookie Banner Component, simply go to the Insert Menu and drag it onto the Canvas to begin working with it. Remember to add the component to every page where you want it to be visible. For convenience, it\u2019s recommended to add it to a common component that appears on every page such as a navbar, footer, or sidebar.\"}),/*#__PURE__*/e(\"h3\",{children:\"Previewing\"}),/*#__PURE__*/e(\"p\",{children:\"The Cookie Banner component operates differently from traditional components. It handles the setup of positioning rules, animations, and responsive layouts, eliminating the need for such busy work. To use it, add the component to the desired page. Note that the component on the Canvas serves as the trigger for opening and closing the banner when the user clicks it, and not the actual banner itself.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,aDpMdKBeLqLMUCVOWftv8ZSWPT4.png\",\"data-framer-height\":\"1052\",\"data-framer-width\":\"2000\",height:\"526\",src:\"https://framerusercontent.com/images/aDpMdKBeLqLMUCVOWftv8ZSWPT4.png\",srcSet:\"https://framerusercontent.com/images/aDpMdKBeLqLMUCVOWftv8ZSWPT4.png?scale-down-to=512 512w,https://framerusercontent.com/images/aDpMdKBeLqLMUCVOWftv8ZSWPT4.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/aDpMdKBeLqLMUCVOWftv8ZSWPT4.png 2000w\",style:{aspectRatio:\"2000 / 1052\"},width:\"1000\"}),/*#__PURE__*/t(\"p\",{children:[\"You have the flexibility to place the component anywhere on your page without impacting where the opened banner will appear. For easy customization of your banner\u2019s appearance, there is a \",/*#__PURE__*/e(\"code\",{children:\"Preview\"}),\" option available. Simply turning this option on and off allows you to switch between the component\u2019s appearance on your page and the actual banner\u2019s appearance when it is active.\"]}),/*#__PURE__*/e(\"h3\",{children:\"Hidden Mode\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,xWGg0hgFezpSEPGtjNIWuuvkWSk.png\",\"data-framer-height\":\"1052\",\"data-framer-width\":\"2000\",height:\"526\",src:\"https://framerusercontent.com/images/xWGg0hgFezpSEPGtjNIWuuvkWSk.png\",srcSet:\"https://framerusercontent.com/images/xWGg0hgFezpSEPGtjNIWuuvkWSk.png?scale-down-to=512 512w,https://framerusercontent.com/images/xWGg0hgFezpSEPGtjNIWuuvkWSk.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/xWGg0hgFezpSEPGtjNIWuuvkWSk.png 2000w\",style:{aspectRatio:\"2000 / 1052\"},width:\"1000\"}),/*#__PURE__*/t(\"p\",{children:[\"To open or close the banner, the component serves as the default trigger. However, if you wish to display the banner to visitors without a visible trigger (when they land on your site without consent), you can eliminate the trigger entirely. In the properties panel, open the \",/*#__PURE__*/e(\"code\",{children:\"Trigger\"}),\" options and select the \",/*#__PURE__*/e(\"code\",{children:\"None\"}),\" type. This will produce a placeholder that will not appear in the preview or published site. You can position it anywhere on your page, and it will activate the cookie banner, regardless of whether the component\u2019s opacity is set to \",/*#__PURE__*/e(\"code\",{children:\"0\"}),\".\"]}),/*#__PURE__*/e(\"h3\",{children:\"Controlling Behaviour\"}),/*#__PURE__*/e(\"p\",{children:\"You can adjust the banner settings for both the EU and the rest of the world as per your preferences. Usually, a basic banner is set as the default option, but a more detailed version is used for the EU to comply with GDPR regulations. The relevant banner will be displayed on the Canvas when preview mode is enabled.\"}),/*#__PURE__*/e(\"p\",{children:\"For each region, you have the option to determine the choices that users are presented with: \"}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"No Choice:\"}),\" Default cookies are automatically accepted.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Accept/Reject:\"}),\" Users can choose to accept or reject all cookies.\"]})}),/*#__PURE__*/t(\"li\",{\"data-preset-tag\":\"p\",children:[/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customizable:\"}),\" Users can select from four levels of consent:\"]}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Necessary:\"}),\" Enables security and basic functionality.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Preferences:\"}),\" Enables personalized content and settings.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Analytics:\"}),\" Enables tracking of performance.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Marketing:\"}),\" Enables personalized ads and tracking.\"]})})]})]})]}),/*#__PURE__*/e(\"h2\",{children:\"Connect to Google Tag Manager\"}),/*#__PURE__*/e(\"p\",{children:\"Once you are satisfied with the appearance of your component, connect it to Google Tag Manager. This will enable you to utilize consent mode for tag firing.\"}),/*#__PURE__*/e(\"h3\",{children:\"Setup Container\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,auNcA3aScf3G2Lei8FeahfKLURo.png\",\"data-framer-height\":\"1052\",\"data-framer-width\":\"2000\",height:\"526\",src:\"https://framerusercontent.com/images/auNcA3aScf3G2Lei8FeahfKLURo.png\",srcSet:\"https://framerusercontent.com/images/auNcA3aScf3G2Lei8FeahfKLURo.png?scale-down-to=512 512w,https://framerusercontent.com/images/auNcA3aScf3G2Lei8FeahfKLURo.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/auNcA3aScf3G2Lei8FeahfKLURo.png 2000w\",style:{aspectRatio:\"2000 / 1052\"},width:\"1000\"}),/*#__PURE__*/t(\"p\",{children:[\"If you haven\u2019t done so already, create a container in Google Tag Manager. Then, enable consent mode by going to \",/*#__PURE__*/e(\"code\",{children:\"Admin\"}),\" \u2192  \",/*#__PURE__*/e(\"code\",{children:\"Container Settings\"}),\" \u2192 \",/*#__PURE__*/e(\"code\",{children:\"Enable Consent Overview\"}),\".\"]}),/*#__PURE__*/e(\"h3\",{children:\"Connect to Framer\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,iNckrgka84Y1lgux0aJoztKLZxk.png\",\"data-framer-height\":\"1052\",\"data-framer-width\":\"2000\",height:\"526\",src:\"https://framerusercontent.com/images/iNckrgka84Y1lgux0aJoztKLZxk.png\",srcSet:\"https://framerusercontent.com/images/iNckrgka84Y1lgux0aJoztKLZxk.png?scale-down-to=512 512w,https://framerusercontent.com/images/iNckrgka84Y1lgux0aJoztKLZxk.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/iNckrgka84Y1lgux0aJoztKLZxk.png 2000w\",style:{aspectRatio:\"2000 / 1052\"},width:\"1000\"}),/*#__PURE__*/e(\"p\",{children:\"You can connect your container in Framer by adding its ID to the properties panel. The ID can be found in the top right of the dashboard.\"}),/*#__PURE__*/e(\"h3\",{children:\"Consent types\"}),/*#__PURE__*/t(\"p\",{children:[\"Google Consent mode has \",/*#__PURE__*/e(n,{href:\"https://support.google.com/analytics/answer/12334711?sjid=10794489468416376552-EU\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"5 different types\"})}),\" you can choose from:\"]}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"code\",{children:\"ad_storage\"}),\": Enables storage related to advertising.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"code\",{children:\"analytics_storage\"}),\": Enables storage related to analytics\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"code\",{children:\"functionality_storage\"}),\": Enables storage that supports the functionality of the website or app, e.g., language settings.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"code\",{children:\"personalization_storage\"}),\": Enables storage related to personalization, e.g. video recommendations\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"code\",{children:\"security_storage\"}),\": Enables security-related storage, such as authentication functionality, and fraud prevention.\"]})})]}),/*#__PURE__*/e(\"p\",{children:\"To keep things simple, the Cookie Component maps the consent types from Google to these options in the UI:\"}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Necessary: \",/*#__PURE__*/e(\"code\",{children:\"security_storage\"}),\" + \",/*#__PURE__*/e(\"code\",{children:\"functionality_storage\"})]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Preferences: \",/*#__PURE__*/e(\"code\",{children:\"personalization_storage\"})]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Analytics: \",/*#__PURE__*/e(\"code\",{children:\"analytics_storage\"})]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Marketing: \",/*#__PURE__*/e(\"code\",{children:\"ad_storage\"})]})})]}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,yBreQM7WabSoKawjg8TmBlpL4.png\",\"data-framer-height\":\"1052\",\"data-framer-width\":\"2000\",height:\"526\",src:\"https://framerusercontent.com/images/yBreQM7WabSoKawjg8TmBlpL4.png\",srcSet:\"https://framerusercontent.com/images/yBreQM7WabSoKawjg8TmBlpL4.png?scale-down-to=512 512w,https://framerusercontent.com/images/yBreQM7WabSoKawjg8TmBlpL4.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/yBreQM7WabSoKawjg8TmBlpL4.png 2000w\",style:{aspectRatio:\"2000 / 1052\"},width:\"1000\"}),/*#__PURE__*/e(\"p\",{children:\"You can customize each option by changing its title and description in the properties panel.\"}),/*#__PURE__*/e(\"h3\",{children:\"Google Tag Behaviour\"}),/*#__PURE__*/e(\"p\",{children:\"When consent mode is enabled, Google tags (Analytics, Ads, etc.) will automatically adjust their behavior according to the given consent.\"}),/*#__PURE__*/e(\"p\",{children:\"\u201CWhen you enable consent mode, Google measurement products ensure that a visitor\u2019s consent mode state is preserved across the pages they visit. If consent is denied, tags that fire do not store cookies; instead, they communicate a minimum of information about user activity.\u201D\"}),/*#__PURE__*/e(\"p\",{children:\"For example, when no analytics consent has been given:\"}),/*#__PURE__*/e(\"p\",{children:\"\u201C...cookieless pings are sent to Google Analytics. No Analytics cookies are set, accessed, or read from the device. Consequently, cookieless pings are anonymized and non-identifiable Google Analytics events.\"}),/*#__PURE__*/e(\"p\",{children:\"Cookieless pings, as part of regular HTTP/browser communication, may include the following information: user agent, screen resolution, IP address. Note that Google Analytics 4 does not store or log IP addresses.\u201D\"}),/*#__PURE__*/t(\"p\",{children:[\"\u2014 From the \",/*#__PURE__*/e(n,{href:\"https://support.google.com/analytics/answer/9976101\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Google help page\"})}),\".\"]}),/*#__PURE__*/e(\"h3\",{children:\"Custom Tags\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,PqZykE61MF0o0NI5UO9HuCrWT0.png\",\"data-framer-height\":\"1052\",\"data-framer-width\":\"2000\",height:\"526\",src:\"https://framerusercontent.com/images/PqZykE61MF0o0NI5UO9HuCrWT0.png\",srcSet:\"https://framerusercontent.com/images/PqZykE61MF0o0NI5UO9HuCrWT0.png?scale-down-to=512 512w,https://framerusercontent.com/images/PqZykE61MF0o0NI5UO9HuCrWT0.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/PqZykE61MF0o0NI5UO9HuCrWT0.png 2000w\",style:{aspectRatio:\"2000 / 1052\"},width:\"1000\"}),/*#__PURE__*/e(\"p\",{children:\"You can control when tags are fired based on consent from the UI:\"}),/*#__PURE__*/t(\"ol\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Open any tag\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Go into advanced options\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Open Consent Settings\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Pick a combination of consent\"})})]}),/*#__PURE__*/t(\"p\",{children:[\"Learn more on the \",/*#__PURE__*/e(n,{href:\"https://support.google.com/tagmanager/answer/10718549?hl=en\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Google help page\"})}),\".\"]})]});export const richText30=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"You can find the \",/*#__PURE__*/e(\"strong\",{children:\"Input Component\"}),\" in the \",/*#__PURE__*/e(\"strong\",{children:\"Insert Menu\"}),\", inside the Forms section. Drag and drop it onto your page, connect it to a service of your choosing, and you\u2019re good to go. The component supports Loops.so, MailChimp, FormSpark, and GetWaitlist. On success, you can either redirect to a new page, or open a custom overlay\u2014giving you much more control over the success state design and messaging. It\u2019s extremely customizable too, and captures most common input layout patterns.\"]}),/*#__PURE__*/e(\"h3\",{children:\"Form Alternatives\"}),/*#__PURE__*/t(\"p\",{children:[\"If your use case requires forms beyond a single input, Framer has many integrations built-in to assist you. These integrations range from focused service-integrated forms like Calendly, to custom form builders such as Typeform and MagicForm. These Integrations can be added to your website by searching for them in the Insert Menu. Alternatively, those experienced with building forms in React have the option to utilise our \",/*#__PURE__*/e(n,{href:\"https://www.framer.com/developers/\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"developer features\"})}),\" to build custom forms within Code Components. \"]}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(n,{href:\"https://getmagicform.com/\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"MagicForm\"})}),\" \u2013 Framer focused form builder\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(n,{href:\"https://calendly.com/\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Calendly\"})}),\" \u2013 Book appointments & meetings\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(n,{href:\"https://www.typeform.com/\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Typeform\"})}),\" \u2013 Design friendly form builder\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(n,{href:\"https://www.hubspot.com/\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"HubSpot\"})}),\" \u2013 Integrate input with CRM\"]})}),/*#__PURE__*/t(\"li\",{\"data-preset-tag\":\"p\",children:[/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(n,{href:\"https://www.intercom.com/\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Intercom\"})}),\" \u2013 Customer support\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})})]})]})]});export const richText31=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"In this video, we show you how to add search to your Framer site with just a few clicks. We also cover how to customize the search experience to make it look and feel like your own.\"}),/*#__PURE__*/e(\"h3\",{children:\"Adding Search to Your Site\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Go to the \",/*#__PURE__*/e(\"strong\",{children:\"Insert\"}),\" menu and select \",/*#__PURE__*/e(\"strong\",{children:\"Interactive\"}),\".\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Drag and drop the \",/*#__PURE__*/e(\"strong\",{children:\"Search\"}),\" component into your site.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Publish your site.\"})})]}),/*#__PURE__*/e(\"h3\",{children:\"Customizing the Search Experience\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Scope control:\"}),\" You can control which pages on your site are searchable.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Fonts:\"}),\" You can change the fonts used in the search input and results.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Colors:\"}),\" You can change the colors of the search input, results, and modal.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Animations:\"}),\" You can add animations to the search input and results.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Layout:\"}),\" You can change the layout of the search modal to be a sidebar or a fixed top bar.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Tips\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(31, 31, 31)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Use descriptive titles and descriptions for your pages to improve your search results.\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Make sure your search input is easy to find and use.\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Use a consistent design for your search experience.\"})})]})]});export const richText32=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"We're thrilled to unveil Slideshow Version 2.0, packed with new features and improvements that offer even more creative possibilities for your web designs. In this video, Benjamin walks us through the exciting updates, including the highly-requested drag support and a host of other tweaks. Let's dive right in!\"}),/*#__PURE__*/e(\"h3\",{children:\"Infinite Looping Auto-playing Slideshows\"}),/*#__PURE__*/e(\"p\",{children:\"For those unfamiliar with Slideshow, it's a powerful component that allows web designers to create visually captivating, infinitely looping, and autoplaying slideshows with custom effects. In the previous version, inactive images had a lower opacity and were scaled down, adding a touch of elegance to your slideshows.\"}),/*#__PURE__*/e(\"h3\",{children:\"Introducing Drag Support\"}),/*#__PURE__*/e(\"p\",{children:\"Now, with the release of Slideshow Version 2.0, we're thrilled to introduce drag support as a new feature. By harnessing the power of Framer motion, you can now make your slideshows draggable, adding a whole new level of interactivity to your designs. Updating your existing projects is a breeze \u2014 simply head to the assets panel, locate the slideshow component, and click on the update button. You'll notice a new draggable property that appears. Set it to 'yes,' and watch the magic happen!\"}),/*#__PURE__*/e(\"h3\",{children:\"Seamless Navigation through Swipes and Drags\"}),/*#__PURE__*/e(\"p\",{children:\"Once the draggable feature is enabled, you'll notice a subtle, intuitive change upon previewing your slideshow. A handy little hand cursor appears, signaling the option to swipe and drag to navigate between images. Don't worry \u2014 the smooth transition settings you've defined in your properties will continue to be utilized, ensuring a seamless flow throughout your slideshows.\"}),/*#__PURE__*/e(\"h3\",{children:\"Custom Positioning of Arrows\"}),/*#__PURE__*/e(\"p\",{children:\"In addition to drag support, Slideshow Version 2.0 brings forth several other exciting features. One common request from users has been the ability to control the position of the arrow controls in the slideshow. With the latest update, we're pleased to announce that you now have greater flexibility in this regard. While you could already upload custom images for the arrow controls, the new properties allow you to customize their behavior and positioning even further.\"}),/*#__PURE__*/e(\"p\",{children:\"By setting the position to top right, for example, you can place the arrows exactly where you want them. You can even provide custom offsets, including negative values, to move the controls outside the slideshow's bounding box. This opens up a world of unique possibilities for creating captivating and innovative slideshow layouts.\"}),/*#__PURE__*/e(\"h3\",{children:\"Enhanced Visuals with Negative Offsets\"}),/*#__PURE__*/e(\"p\",{children:\"But wait, there's more! Slideshow Version 2.0 also introduces the use of negative offsets for precise control over the position of dots below the slideshow. With this update, you can achieve a neat and aesthetically pleasing layout, aligning your dots flawlessly. Say goodbye to limitations and explore new creative avenues!\"}),/*#__PURE__*/e(\"h3\",{children:\"Velocity-based Dragging and Manual Positioning\"}),/*#__PURE__*/e(\"p\",{children:\"The team at Framer listened to user feedback and ensured that dragging functionality in Slideshow Version 2.0 is responsive and intuitive. Your dragging velocity is taken into account, enabling quick and seamless swipes for effortless navigation. Need to manually move the slideshow to a specific item? No problem! Slideshow Version 2.0 considers your dragging offsets, ensuring accurate placement and preserving the desired flow in your design. You can even drag across multiple items at once for added convenience.\"})]});export const richText33=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Get Started\"}),/*#__PURE__*/e(\"p\",{children:\"You can access the Framer CMS by clicking on the CMS button in the Toolbar. Then, from the left panel, you can choose to either begin with sample data for a blog, or create a new Collection from scratch.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,r3yxG6YtpytvZTs0sLUfLvHk.png\",\"data-framer-height\":\"1736\",\"data-framer-width\":\"3014\",height:\"868\",src:\"https://framerusercontent.com/images/r3yxG6YtpytvZTs0sLUfLvHk.png\",srcSet:\"https://framerusercontent.com/images/r3yxG6YtpytvZTs0sLUfLvHk.png?scale-down-to=512 512w,https://framerusercontent.com/images/r3yxG6YtpytvZTs0sLUfLvHk.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/r3yxG6YtpytvZTs0sLUfLvHk.png?scale-down-to=2048 2048w,https://framerusercontent.com/images/r3yxG6YtpytvZTs0sLUfLvHk.png 3014w\",style:{aspectRatio:\"3014 / 1736\"},width:\"1507\"}),/*#__PURE__*/e(\"h2\",{children:\"Add and Edit CMS Items\"}),/*#__PURE__*/e(\"p\",{children:\"Once a Collection is created, you can add or edit the content for individual Items within the Collection. If you selected to begin with the sample data, you will see that a few example blog posts have already been created for you. Click on each item to edit the content.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,tLk2OKLFBrqfKEwJONxELGni1xU.png\",\"data-framer-height\":\"1736\",\"data-framer-width\":\"3014\",height:\"868\",src:\"https://framerusercontent.com/images/tLk2OKLFBrqfKEwJONxELGni1xU.png\",srcSet:\"https://framerusercontent.com/images/tLk2OKLFBrqfKEwJONxELGni1xU.png?scale-down-to=512 512w,https://framerusercontent.com/images/tLk2OKLFBrqfKEwJONxELGni1xU.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/tLk2OKLFBrqfKEwJONxELGni1xU.png?scale-down-to=2048 2048w,https://framerusercontent.com/images/tLk2OKLFBrqfKEwJONxELGni1xU.png 3014w\",style:{aspectRatio:\"3014 / 1736\"},width:\"1507\"}),/*#__PURE__*/e(\"h2\",{children:\"Edit the Input Fields\"}),/*#__PURE__*/e(\"p\",{children:\"You can choose to set up different types of input fields depending on your content. For instance, a blog might have a title, a slug, and a long-form field for formatted content. These may be different for a product directory or a photo blog, where you may need to add an image field. To edit the fields each CMS item will have, click on any of the column titles. This will trigger a modal to add new fields, where you can also re-arrange the fields or modify or delete the existing ones.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,oHVlxMLZczwky8cLGXia4VG7DCE.png\",\"data-framer-height\":\"1736\",\"data-framer-width\":\"3014\",height:\"868\",src:\"https://framerusercontent.com/images/oHVlxMLZczwky8cLGXia4VG7DCE.png\",srcSet:\"https://framerusercontent.com/images/oHVlxMLZczwky8cLGXia4VG7DCE.png?scale-down-to=512 512w,https://framerusercontent.com/images/oHVlxMLZczwky8cLGXia4VG7DCE.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/oHVlxMLZczwky8cLGXia4VG7DCE.png?scale-down-to=2048 2048w,https://framerusercontent.com/images/oHVlxMLZczwky8cLGXia4VG7DCE.png 3014w\",style:{aspectRatio:\"3014 / 1736\"},width:\"1507\"}),/*#__PURE__*/e(\"h2\",{children:\"Add Content to the Canvas\"}),/*#__PURE__*/e(\"p\",{children:\"After setting up the content, go back to the canvas. Your collection will now be accessible from the Insert menu. Open the Insert menu, navigate to the CMS Content section, and drag and drop your collection onto the canvas. This will add a special stack with layers connected to your data. From here, you can edit the visual properties on the right, just as you would do with a regular Stack.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,vQzctqC6oLCVOKq8tfXA7BdmTDM.png\",\"data-framer-height\":\"1736\",\"data-framer-width\":\"3014\",height:\"868\",src:\"https://framerusercontent.com/images/vQzctqC6oLCVOKq8tfXA7BdmTDM.png\",srcSet:\"https://framerusercontent.com/images/vQzctqC6oLCVOKq8tfXA7BdmTDM.png?scale-down-to=512 512w,https://framerusercontent.com/images/vQzctqC6oLCVOKq8tfXA7BdmTDM.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/vQzctqC6oLCVOKq8tfXA7BdmTDM.png?scale-down-to=2048 2048w,https://framerusercontent.com/images/vQzctqC6oLCVOKq8tfXA7BdmTDM.png 3014w\",style:{aspectRatio:\"3014 / 1736\"},width:\"1507\"}),/*#__PURE__*/e(\"h2\",{children:\"Add a Page with Content\"}),/*#__PURE__*/t(\"p\",{children:[\"If you wish to add a page instead that will automatically be populated with data from the CMS, navigate to the left panel. One you are in the \",/*#__PURE__*/e(\"strong\",{children:\"Pages\"}),\" tab, click on the \",/*#__PURE__*/e(\"code\",{children:\"+\"}),\" button next to the CMS section. If you add the \",/*#__PURE__*/e(\"strong\",{children:\"Index\"}),\" page, a page will be added with a list of all of the items in your collection. If you add the \",/*#__PURE__*/e(\"strong\",{children:\"Detail\"}),\" page, you will be presented with a page with content from your individual items.\"]}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Note\"}),\": If you chose to add the sample data, a new detail page called \",/*#__PURE__*/e(\"code\",{children:\"/blog\"}),\" will be added to your website, and you will find the stack of content added into the page for you.\"]}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,ArZJvdl8HdZUP3EXEvngLVBZAo.png\",\"data-framer-height\":\"1736\",\"data-framer-width\":\"3014\",height:\"868\",src:\"https://framerusercontent.com/images/ArZJvdl8HdZUP3EXEvngLVBZAo.png\",srcSet:\"https://framerusercontent.com/images/ArZJvdl8HdZUP3EXEvngLVBZAo.png?scale-down-to=512 512w,https://framerusercontent.com/images/ArZJvdl8HdZUP3EXEvngLVBZAo.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/ArZJvdl8HdZUP3EXEvngLVBZAo.png?scale-down-to=2048 2048w,https://framerusercontent.com/images/ArZJvdl8HdZUP3EXEvngLVBZAo.png 3014w\",style:{aspectRatio:\"3014 / 1736\"},width:\"1507\"}),/*#__PURE__*/e(\"p\",{children:\"The detail page will display content pulled from the first entry of the collection by default. In order to preview other items in the collection, change the content by selecting a different item from the dropdown menu.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,5agL1lMduqgYXQ075kRtSNCu18.png\",\"data-framer-height\":\"1736\",\"data-framer-width\":\"3014\",height:\"868\",src:\"https://framerusercontent.com/images/5agL1lMduqgYXQ075kRtSNCu18.png\",srcSet:\"https://framerusercontent.com/images/5agL1lMduqgYXQ075kRtSNCu18.png?scale-down-to=512 512w,https://framerusercontent.com/images/5agL1lMduqgYXQ075kRtSNCu18.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/5agL1lMduqgYXQ075kRtSNCu18.png?scale-down-to=2048 2048w,https://framerusercontent.com/images/5agL1lMduqgYXQ075kRtSNCu18.png 3014w\",style:{aspectRatio:\"3014 / 1736\"},width:\"1507\"}),/*#__PURE__*/e(\"h2\",{children:\"Link an Article\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,awZALCbGbheYENwZPpAYgWMtixY.png\",\"data-framer-height\":\"1736\",\"data-framer-width\":\"3014\",height:\"868\",src:\"https://framerusercontent.com/images/awZALCbGbheYENwZPpAYgWMtixY.png\",srcSet:\"https://framerusercontent.com/images/awZALCbGbheYENwZPpAYgWMtixY.png?scale-down-to=512 512w,https://framerusercontent.com/images/awZALCbGbheYENwZPpAYgWMtixY.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/awZALCbGbheYENwZPpAYgWMtixY.png?scale-down-to=2048 2048w,https://framerusercontent.com/images/awZALCbGbheYENwZPpAYgWMtixY.png 3014w\",style:{aspectRatio:\"3014 / 1736\"},width:\"1507\"}),/*#__PURE__*/e(\"p\",{children:\"Once you have your collections and items set up, you should be able to find the pages via the dropdown in the link property. Simply select the item of your choice to link a layer to the specific page.\"})]});export const richText34=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"This article will teach you the basics of how to prepare your content for importing, how to import your content, and things to look out for.\"}),/*#__PURE__*/e(\"h2\",{children:\"How to Import\"}),/*#__PURE__*/t(\"ol\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Prepare your CSV file\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Prepare your CMS Collection\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Import your CSV file\"})})]}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,WBhSUOJGTIRgcU3O6yxK0eB69IY.png\",\"data-framer-height\":\"876\",\"data-framer-width\":\"1454\",height:\"438\",src:\"https://framerusercontent.com/images/WBhSUOJGTIRgcU3O6yxK0eB69IY.png\",srcSet:\"https://framerusercontent.com/images/WBhSUOJGTIRgcU3O6yxK0eB69IY.png?scale-down-to=512 512w,https://framerusercontent.com/images/WBhSUOJGTIRgcU3O6yxK0eB69IY.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/WBhSUOJGTIRgcU3O6yxK0eB69IY.png 1454w\",style:{aspectRatio:\"1454 / 876\"},width:\"727\"}),/*#__PURE__*/e(\"h2\",{children:\"Prepare your CSV file\"}),/*#__PURE__*/e(\"p\",{children:\"Make sure your file is exported as a \u201CCSV\u201D file, also known as a \u201CComma Separated Values\u201D file. If you encounter any issues you'll want to verify your file is UTF-8 encoded and less than 5mb. If your file is larger than that, try removing columns you may not need. See below for additional information on specific fields.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"em\",{children:\"Tip: You do not have to import every column from your CSV. Only fields set up in your CMS collection in the next step will be imported.\"})}),/*#__PURE__*/e(\"h3\",{children:\"Rich Text Fields\"}),/*#__PURE__*/e(\"p\",{children:\"Formatted text content needs to be formatted as HTML. Many tags are supported, such as paragraphs and headers <p>,<h1>, <h2>), formatting (<em>, <i>, <strong>), links (<a>), lists (<ol>, <ul>, <li>) and images (<img>). Images from URLs will be automatically downloaded from their original source and imported into Framer.\"}),/*#__PURE__*/e(\"h3\",{children:\"Image Fields\"}),/*#__PURE__*/e(\"p\",{children:\"Images in your CSV content must be URLs to an image. They will be downloaded and imported into Framer. Relative paths are not supported.\"}),/*#__PURE__*/e(\"h3\",{children:\"Date Fields\"}),/*#__PURE__*/e(\"p\",{children:\"Recommended format is ISO8601 compliant, for example: 2023-12-17T14:42:00. The shorthand value of year-month-day is also supported, for example: 1982-12-01. Long format strings may work, but will depend on your browser, for example: Tue May 12 2020 18:50:21 GMT-0500 (Central Daylight Time). All time data, including time zone information, will be stripped from the date.\"}),/*#__PURE__*/e(\"h3\",{children:\"Color Fields\"}),/*#__PURE__*/e(\"p\",{children:\"A color formatted as CSS hexadecimal RGB code, rgb, hls or hlv expression, or a named color. All variants with an alpha value are also supported. Examples: #00ffee, rgb(0, 153, 255), hsla(204, 100%, 50%, 0.5), blue, darkgreen, rebeccapurple.\"}),/*#__PURE__*/e(\"h3\",{children:\"Toggle Fields\"}),/*#__PURE__*/e(\"p\",{children:\"A boolean value. Y, yes, TRUE, 1 will be interpreted as the toggle being \u201CYes\u201D, all other values will be \u201CNo\u201D.\\xa0\"}),/*#__PURE__*/e(\"h2\",{children:\"Prepare your CMS Collection\"}),/*#__PURE__*/e(\"p\",{children:\"Here is a checklist to prepare your CMS collection for importing.\"}),/*#__PURE__*/t(\"ol\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Verify each field/column in your CSV has a matching field in your CMS collection with the \",/*#__PURE__*/e(\"em\",{children:\"same name.\"})]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Include a unique field for each item, often named \u201CSlug\u201D\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Verify that your data types match \",/*#__PURE__*/e(\"em\",{children:\"(eg. a CMS Date field for a date field in your data)\"})]})})]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/t(\"em\",{children:[\"Tip: Framer uses your Slug field to identify each item, and will use it to update that item with repeat imports.\",/*#__PURE__*/e(\"br\",{})]})}),/*#__PURE__*/e(\"h2\",{children:\"Import your CSV file\"}),/*#__PURE__*/t(\"p\",{children:[\"You can find the Import feature by going to the CMS in your project, and clicking \u201CImport\u201D in the toolbar. From there, you can select your CSV file for importing. You may also drag & drop your CSV file directly into the CMS collection interface.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/t(\"em\",{children:[\"Tip: Importing supports Undo / Redo actions. If you\u2019re not happy with the import, you can simply undo the change with \",/*#__PURE__*/e(\"strong\",{children:\"CMD+Z\"}),\" on MacOS or \",/*#__PURE__*/e(\"strong\",{children:\"CTRL + Z\"}),\" on Windows. Redo will not re-run the import, but instantly apply the changes to the collection.\"]})]}),/*#__PURE__*/e(\"h2\",{children:\"Updating or Re-Importing\"}),/*#__PURE__*/e(\"p\",{children:\"To update your content, you can import into the same collection again. If any item in the new import has a slug field that matches one of the items in your collection, you will be able to update it or skip importing it again.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,fjyUikiBKFiAuNAanYmQ8z0TK8.png?originalFilename=cms-import%402x.png\",\"data-framer-height\":\"876\",\"data-framer-width\":\"1454\",height:\"438\",src:\"https://framerusercontent.com/images/fjyUikiBKFiAuNAanYmQ8z0TK8.png\",srcSet:\"https://framerusercontent.com/images/fjyUikiBKFiAuNAanYmQ8z0TK8.png?scale-down-to=512 512w,https://framerusercontent.com/images/fjyUikiBKFiAuNAanYmQ8z0TK8.png?scale-down-to=1024 1024w,https://framerusercontent.com/images/fjyUikiBKFiAuNAanYmQ8z0TK8.png 1454w\",style:{aspectRatio:\"1454 / 876\"},width:\"727\"}),/*#__PURE__*/e(\"h2\",{children:\"FAQ\"}),/*#__PURE__*/e(\"h3\",{children:\"What content is imported?\"}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Rich Text Content (Text, Images, Formatting, Lists, Links)\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Plain Text Fields\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Date Fields\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Image Fields\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Color Fields\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Link Fields\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Number Fields\"})}),/*#__PURE__*/t(\"li\",{\"data-preset-tag\":\"p\",children:[/*#__PURE__*/e(\"p\",{children:\"Toggle (Boolean) Fields\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})})]})]}),/*#__PURE__*/e(\"h3\",{children:\"What content is not imported?\"}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Multi-Image Fields\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Inline Code\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Code Blocks\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Embeds\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Media\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Styles\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Custom CSS\"})})]})]});export const richText35=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"With Framer\u2019s CMS filtering feature, you can effortlessly maintain all your content in a single collection while effortlessly customizing how it appears across various web pages. Whether you're developing app documentation and need to filter articles by topic on your homepage or creating a blog and wish to categorize and filter blog posts, Framer's CMS filtering capability provides a seamless solution. We recommend watching the tutorial above to gain a comprehensive understanding of how to utilize CMS filtering in Framer effectively.\"})});export const richText36=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/t(\"p\",{children:[\"The \",/*#__PURE__*/e(\"strong\",{children:\"Color\"}),\" and \",/*#__PURE__*/e(\"strong\",{children:\"Number\"}),\" Transforms enable you to create layouts that dynamically react to your content and properties by changing color, rotation and more.  Watch the video to learn all about how it works.\"]})});export const richText37=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"You can link into CMS Content directly, as well as apply Scroll Effects like Scroll Animations and Scroll Transforms, unlocking all new creative use cases.\"})});export const richText38=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"If your Text style uses the built-in web fonts, these styles set up automatically. Plus, we have added Required Fields and Max Length options in CMS Fields. These empower you to configure constraints for your content, ensuring that even with 100s of CMS items, your site will match your design. Watch the video above or remix the template to get started.\"})});export const richText39=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"We have integrated these features deeply with our performance pipeline with no flashes on page load, and by utilising the power of Sandpack for Code Blocks, the editing experience gives you a 1:1 consistency with your output. Watch the video above to learn more, or remix our docs template here.\"})});export const richText40=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/t(\"p\",{children:[\"We have many categories on the \",/*#__PURE__*/e(n,{href:{webPageId:\"usKkEYowD\"},openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Framer templates page\"})}),\", all of which come from our CMS. This allows us to have a single template for building all category pages. This video will teach you how to set this up for yourself.\"]})});export const richText41=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"There are two ways of dealing with viewport in Framer. You can select a layer and set the position type to \",/*#__PURE__*/e(\"strong\",{children:\"Fixed\"}),\", after which you\u2019ll see a viewport line appear. This will allow you to pin layers relative to the viewport. You can resize the viewport line, but it won\u2019t affect your published layout. Instead, it allows you control how it will appear on canvas. See our feature overview of Fixed and Absolute positioning \",/*#__PURE__*/e(n,{href:{pathVariables:{IEns_MINJ:\"fixed-and-absolute-positioning\"},unresolvedPathSlugs:{IEns_MINJ:{collectionId:\"E_0f9mL03\",collectionItemId:\"ZRc8gcrXb\"}},webPageId:\"OEPNo3ANO\"},openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"here\"})}),\".\"]}),/*#__PURE__*/t(\"p\",{children:[\"The second way of designing with Viewport is by using the Viewport Height unit. You can select a layer, and set its height to \",/*#__PURE__*/e(\"strong\",{children:\"Viewport\"}),\". This will default to \",/*#__PURE__*/e(\"strong\",{children:\"100vh\"}),\", which means it occupies the entirety of the viewport (the height of your browser). This allows you to design landing pages with consistent browsing experiences: you can ensure that the same content (within a single section) is visible on all devices. In short, it gives you control over what appears above and below the fold.\"]})]});export const richText42=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h3\",{children:\"Introducing Color Styles with Theming in Framer\"}),/*#__PURE__*/e(\"p\",{children:\"Color styles with theming allows you to create a color palette that works for both light and dark modes, ensuring your website designs align with the appearance settings of various devices and operating systems. The process is simple: design your color palette once, and then seamlessly use it throughout your entire project, including within animations.\"}),/*#__PURE__*/e(\"h3\",{children:\"Creating and Using Color Styles\"}),/*#__PURE__*/e(\"p\",{children:\"To demonstrate the power of this new feature, let\u2019s consider a demo project, a simple blog template. The process begins with selecting the fill property of your page. In this new release, the UI has been redesigned to make color styles more accessible. You can create a new color style for your page background and define both light and dark versions of this style. For instance, you might want a white background in light mode and a black one in dark mode. Once created, these color styles are easy to manage and organize.\"}),/*#__PURE__*/e(\"h3\",{children:\"Enhancing Text with Theming\"}),/*#__PURE__*/e(\"p\",{children:\"These color styles aren\u2019t limited to backgrounds; they extend to text styles as well. For example, you can have an H1 style that changes color based on the theme - black on light mode and white on dark mode. This ensures that your text layers are compatible with both themes, streamlining your design process.\"}),/*#__PURE__*/e(\"h3\",{children:\"Integrating Color Styles in Animations and Interactions\"}),/*#__PURE__*/e(\"p\",{children:\"Color styles in Framer are versatile and can be integrated into various elements, including effects. For instance, in a collection list with a hover effect, you can animate the fill property to transition to a themed color style. This feature simplifies the process of creating animations and interactions that are compatible with both light and dark modes.\"}),/*#__PURE__*/e(\"h3\",{children:\"Enhanced Assets Panel for Easy Management\"}),/*#__PURE__*/e(\"p\",{children:\"Framer\u2019s assets panel has been updated for better usability. It's now simpler to differentiate between text styles and link styles, and all color styles are accessible from this panel. Editing color styles is straightforward \u2013 select the style from the panel and adjust the light and dark values as needed. This allows for quick iterations on your website designs. The panel also offers options to rename, duplicate, delete, or clear the dark style of a color.\"}),/*#__PURE__*/e(\"h3\",{children:\"Toggling Between Light and Dark Modes\"}),/*#__PURE__*/e(\"p\",{children:\"A new icon has been added to the canvas toolbar in Framer, allowing you to toggle between dark and light modes. This feature updates the app UI and all the color styles to their respective themes, enabling you to preview your website in each theme without having to publish it. This functionality extends beyond web pages, even allowing you to design canvas elements that are legible and appealing in both modes.\"}),/*#__PURE__*/e(\"p\",{children:\"In summary, Framer's new color styles with theming support is a significant enhancement, making it easier to design websites and applications that are visually cohesive and responsive to user preferences across different modes.\"})]});export const richText43=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h4\",{children:\"Adding Basic Shadows\"}),/*#__PURE__*/e(\"p\",{children:\"When working with Framer, adding shadows to your design elements like cards can significantly enhance their visual appeal. It's straightforward to add a basic shadow: just select your element (such as a card) and navigate to the 'shadows' property. Here, you can add a new shadow that creates a box shadow, similar to how CSS handles shadows. This feature allows you to adjust various aspects like offset and blur, tailoring the shadow to your specific needs.\"}),/*#__PURE__*/e(\"h3\",{children:\"Switching to Realistic Shadows\"}),/*#__PURE__*/e(\"p\",{children:\"But what if you're aiming for a more realistic shadow effect? Framer offers an exciting option for this. By selecting the type property and setting it to 'realistic,' you unlock additional properties to play with: diffusion and focus. These new properties provide a more nuanced control over how your shadow looks and interacts with other elements.\"}),/*#__PURE__*/e(\"h3\",{children:\"Customizing Realistic Shadows\"}),/*#__PURE__*/e(\"p\",{children:\"To get a better grasp of how diffusion and focus affect your design, it's best to experiment by tweaking these values. For instance, adjusting the 'y' value can alter the shadow's vertical position, while playing with the color settings helps the shadow blend seamlessly with your background. Keeping the alpha value high initially can be beneficial as it makes the effects of your adjustments more visible.\"}),/*#__PURE__*/e(\"p\",{children:\"As you adjust the focus value, you'll notice how Framer creates multiple shadows and blurs them based on the properties you've set. A focus value of around 0.4 and diffusion set to 0.6 is a good starting point. These settings can be further refined by modifying other properties like the 'y' value and color, allowing for a subtle, more integrated shadow effect.\"}),/*#__PURE__*/e(\"h3\",{children:\"Final Touches\"}),/*#__PURE__*/e(\"p\",{children:\"After these adjustments, you'll find that your design element now casts a shadow that not only looks more realistic but also harmonizes better with your overall design. This enhancement is just one of the many ways Framer enables you to increase the fidelity of your designs, offering tools that go beyond basic functionalities to add depth and realism to your projects.\"})]});export const richText44=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"Simply create a Text Layer, head over to the Size property and set it to Fit. You can also use Fit Text on multiple lines of text, which you can create by hitting enter when you want your line to break. Define minimum and maximum font sizes by using the Min Width and Max Width properties. This can be done on the Text Layer itself, or any parent layer. Best of all, this feature keeps your sites blazing fast. Framer can render your typography at the right size even before JavaScript runs on your website. No flashes on refresh, and no expensive calculations on resize. We think you\u2019ll love it.\"})});export const richText45=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Creating an intricate web design isn't as daunting as it seems. With Framer, you can unlock a variety of desktop navigations and utilize viewport units within the Min and Max height properties. These connections facilitate a smoother workflow, allowing you to set up stunning designs effortlessly.\"}),/*#__PURE__*/e(\"h3\",{children:\"Jumping into Action\"}),/*#__PURE__*/e(\"p\",{children:\"To vividly illustrate this concept, let's walk through developing a desktop navigation from scratch. Take an everyday top-bar, featuring a logo and a button. Through Framer, we can convert this basic model into a component, forming the backbone of our desktop navigation.\"}),/*#__PURE__*/e(\"h3\",{children:\"Crafting Component Variants\"}),/*#__PURE__*/e(\"p\",{children:\"Two variants are constructed- the 'open' (or expanded navigation) variant and the 'closed' one. The 'open' variant captures the expanded navigation state, while the 'closed' variant denotes the initial state of the top bar. To adapt these features to your design seamlessly, you ought to name your variants appropriately. Doing so gives you less hassle as you apply the design across different layouts, and allows your design to become responsive based on viewport height.\"}),/*#__PURE__*/e(\"h3\",{children:\"Interactions and Adding Links\"}),/*#__PURE__*/e(\"p\",{children:\"Framer isn\u2019t just about static designs. Interactive elements bring user interfaces to life. By turning the layer labels in each variant into clickable links, we optimize our design for navigation, leading users seamlessly between the two states using Framer's interaction feature.\"}),/*#__PURE__*/e(\"p\",{children:\"Next on the agenda is enriching your menu. You can add links to a text layer. Ensure to give each navigation item a distinctive and intuitive label. This quick tip goes a long way in promoting an effortless user experience.\"}),/*#__PURE__*/e(\"h3\",{children:\"Optimizing Height Properties\"}),/*#__PURE__*/e(\"p\",{children:\"A critical objective is to ensure that the component animates from its 'closed' state of 64 pixels to an 'open' state that spans the viewport, when the links are set to fill. Applying the \\\"Min height\\\" property to the links and switching them to viewport ensures that they occupy the entirety of the viewport. This results in a smooth transition from a 'closed' state to an entirely filled viewport.\"}),/*#__PURE__*/e(\"h3\",{children:\"Finalizing your Design\"}),/*#__PURE__*/e(\"p\",{children:\"With the basics in place, it\u2019s time for refining.\"}),/*#__PURE__*/t(\"ol\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Set the initial variant to the 'closed' variant.\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"To keep your navigation at the top of the viewport regardless of scrolling, set the position type to 'fixed'.\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"To facilitate the animation of the height, set the 'height' property to 'auto'.\"})})]}),/*#__PURE__*/e(\"p\",{children:\"These adjustments enable your menu navigation to animate successfully from 64 pixels to fill the entirety of the viewport. It's highly advised to experiment with your transition settings, to attain an animation speed that feels natural to your design. Consider elements like stiffness and damping to promote fluidity in your work.\"}),/*#__PURE__*/e(\"p\",{children:\"Think about the aesthetics of your navigation too \u2014 adjusting the alpha of the background allows you to modulate the transparency, permitting the underlying design elements to subtly shine through. This adds a sophisticated layer of complexity and depth to the user interface.\"}),/*#__PURE__*/e(\"p\",{children:\"But remember, this is only scratching the surface of what can be accomplished with Framer. Consider exploring and adding custom appearances, hover variants, and much more to take your design to the next strata. In the realm of Framer, the only limit is your imagination.\"})]});export const richText46=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/t(\"p\",{children:[\"By utilizing \",/*#__PURE__*/e(\"code\",{children:\"Viewport\"}),\" units for \",/*#__PURE__*/e(\"code\",{children:\"Min Height\"}),\" and \",/*#__PURE__*/e(\"code\",{children:\"Max Height\"}),\" in our component, we can create a seamless mobile menu that smoothly adjusts to the user's screen. When we combine this approach with the \",/*#__PURE__*/e(\"code\",{children:\"Overscroll\"}),\" property, we ensure that the menu becomes scrollable whenever the content exceeds its boundaries.\"]})});export const richText47=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Instead of the typical height animation commonly seen in mobile menus, Framer also enables you to smoothly fade your menus using separately controlled transitions. Combined, these features allow many types of mobile navigations\u2014beyond ones that animate to fill the viewport height:\"}),/*#__PURE__*/t(\"ul\",{children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"code\",{children:\"Viewport\"}),\" unit support to the \",/*#__PURE__*/e(\"code\",{children:\"Height\"}),\" property of any layer within a \",/*#__PURE__*/e(\"code\",{children:\"Variant\"}),\". This helps you design new interactions, such as backdrops that should fade in-and-out. \"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Setting a \",/*#__PURE__*/e(\"code\",{children:\"Transition\"}),\" property on individual layers inside your \",/*#__PURE__*/e(\"code\",{children:\"Variants\"}),\". This gives you precise control over your animations, allowing you to target specific layers to animate, and exclude others. \"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Add \",/*#__PURE__*/e(\"code\",{children:\"Transitions\"}),\" to your \",/*#__PURE__*/e(\"code\",{children:\"Link Styles\"}),\" so all of your links can now be animated on \",/*#__PURE__*/e(\"code\",{children:\"Hover\"}),\". \"]})})]})]});export const richText48=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"First, we\u2019re adding separate Overflow X and Overflow Y properties, giving you much more control. Second, we\u2019re adding the Scrollbars property, enabling you to show or hide scrollbars of specific layers. Combined, these new styles allow you to design completely responsive navigations without variants.\"})});export const richText49=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/e(\"p\",{children:\"You can use this new Trigger type with both Scroll Animations and Scroll Variants\u2014unlocking powerful new navigation patterns. \"})});export const richText50=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"Relative Overlays can be added to Frames, Text, and even Components. We\u2019ve also updated all Navigations in the Insert Panel, and added new Menus that you can drop onto any layer to instantly create new Overlays. Design dropdowns, menus, and tooltips within minutes.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Creating a Dropdown Menu\"}),\": Begin by selecting the item you want to add a dropdown to. In the insert panel, you'll find a new category called 'menus' which offers various custom-designed menu templates. Dragging one of these onto your text layer adds it as a relative overlay.\"]}),/*#__PURE__*/e(\"h3\",{children:\"Exploring the New Overlay Edit Mode\"}),/*#__PURE__*/e(\"p\",{children:\"Once you've added a dropdown menu:\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\",\"--list-style-type\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customization Options\"}),\": The new edit mode allows you to directly customize each item in the menu. This saves time as you don't have to manually set up these common menu layouts.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Adjusting Overlay Properties\"}),\": On the right side, there are properties to customize your overlays, such as alignment, positioning, and triggers. For instance, you can easily adjust the distance between the menu item and the dropdown using keyboard shortcuts.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Using Overlays within Components\"}),/*#__PURE__*/e(\"p\",{children:\"For practical application in real projects:\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\",\"--list-style-type\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Component Integration\"}),\": To create a consistent navigation experience across all pages, turn your navigation with overlays into a component. This allows for reusability and consistency.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Overlay Edit Mode for Components\"}),\": Framer provides a special overlay edit mode for components, ensuring the dropdown menus in your navigations are reusable and customizable within the component structure.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Adding and Customizing Overlays from Scratch\"}),/*#__PURE__*/e(\"p\",{children:\"For more flexibility:\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\",\"--list-style-type\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Starting from Scratch\"}),\": You can add new relative overlays from scratch, customizing a Frame to your liking.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Swapping Overlays with Menus\"}),\": Framer allows you to swap different types of menus into your overlay, offering the flexibility to experiment with various designs.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Advanced Customization and Componentization\"}),/*#__PURE__*/e(\"p\",{children:\"Taking your design to the next level:\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\",\"--list-style-type\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Componentizing Links\"}),\": Convert all links into components for use in different contexts, like mobile menus, with variants to adjust styling.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customizable Triggers\"}),\": Create components for your menu triggers with different variants for open and closed states.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Dynamic Safe Area\"}),\": Framer intelligently handles the gap between the trigger and the menu, preventing accidental menu dismissal.\"]})})]}),/*#__PURE__*/e(\"h3\",{children:\"Navigations in the Insert Menu\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"16px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\",\"--list-style-type\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enhanced Navigation Section\"}),\": The insert menu in Framer has been refreshed to include advanced navigation options that adapt to different breakpoints, ensuring responsive design.\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Cross-Breakpoint Consistency\"}),\": Any edits you make to these navigation components will be reflected across all breakpoints, maintaining design consistency.\"]})})]})]});export const richText51=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"In this video tutorial, we walk through the process of creating a responsive navigation menu with dropdowns from scratch. The tutorial demonstrates the step-by-step approach to designing and implementing the menu for both desktop and mobile devices.\"}),/*#__PURE__*/e(\"p\",{children:\"The initial setup involves creating a navigation stack with an icon and a title. We then proceed to add text layers onto the stack and apply pre-made text styles for the desired appearance. By duplicating and modifying these items, we create multiple navigation options.\"}),/*#__PURE__*/e(\"p\",{children:'To enable dropdown functionality, we introduce a carrot component and group it with the navigation items. Adjustments are made to the width, height, and gap settings to ensure proper alignment. With the component in place, we define different variants, such as \"default\" and \"open,\" each with its own styling and opacity.'}),/*#__PURE__*/e(\"p\",{children:\"The next step involves adding dropdown menus to the navigation items. This is achieved by selecting the component instance and dragging a suitable dropdown menu from the asset panel. Customization options, including appearance, transition effects, and height, are then adjusted to achieve the desired look.\"}),/*#__PURE__*/e(\"p\",{children:\"To activate the dropdowns, we set triggers to open the appropriate variants. Additionally, we customize the hover interactions and link the menu items to relevant website URLs. This ensures that the dropdown menus are functional and provide a seamless user experience.\"}),/*#__PURE__*/e(\"p\",{children:'To address responsiveness, we convert the navigation stack into a component and create a \"phone\" variant. The layout is modified to fit mobile breakpoints, including resizing, flipping, and adding a menu icon. We make sure to adjust the visibility and layout properties to suit different device types.'}),/*#__PURE__*/e(\"p\",{children:\"Furthermore, we create additional links for the phone variant and make necessary adjustments to maintain consistency. The order and styles of the links are matched across variants, ensuring smooth transitions between them.\"}),/*#__PURE__*/e(\"p\",{children:\"Throughout the tutorial, we provide tips and suggestions to enhance the navigation menu's design and responsiveness. By the end of the video, you will have a fully functional and visually appealing responsive navigation menu with dropdowns.\"})]});export const richText52=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"We're diving deep into how to set up smooth scrolling websites in Framer. We'll leverage scroll targets to animate to page-specific sections, with a kiss of Parallax for extra flair.\"}),/*#__PURE__*/e(\"h3\",{children:\"Creating Your Basic Setup\"}),/*#__PURE__*/e(\"p\",{children:\"The demo project starts with a stack page containing three sections, each with filling width and a height set to 100 VH. This setting allows your sections to occupy the full height of the viewport. It also includes a sidebar pinned to your screen's bottom-left corner with a fixed position.\"}),/*#__PURE__*/e(\"h3\",{children:\"Linking to Specific Sections\"}),/*#__PURE__*/e(\"p\",{children:\"The essence of smooth scrolling revolves around linking text items to corresponding sections. By selecting a text item, you head into the link section where you'll specify your home page. But before you carry on any further, you need to assign scroll targets to your sections. These are unique identifiers you can assign to any layer on your web page. For instance, our first section's scroll target might be named 'Horizon'.\"}),/*#__PURE__*/e(\"p\",{children:\"Once you do this and return to your link, you'll find a new property named 'Target', allowing you to select assigned scroll targets. By connecting each of your sidebar's text items with the respective scroll targets, you get a page smoothly scrolling to each section as desired.\"}),/*#__PURE__*/e(\"h3\",{children:\"Working with Component Links\"}),/*#__PURE__*/e(\"p\",{children:\"But, what if your links are part of components? Let's use our simple item component as an example. On hover, this component animates to the right, adjusting the left padding to 10 pixels and the opacity from 0.6 to 1.\"}),/*#__PURE__*/e(\"p\",{children:\"When you replace text layers with components and add links as usual, all links point to a single section. This happens because of the absolute path defined for each item within the component. Instead, you need to create variables for link properties to allow overrides and definitions from outside the component. With variables in place, each component can now be set to point to its unique scroll target.\"}),/*#__PURE__*/e(\"h3\",{children:\"Adding Scroll Speed Effects for a Parallax Impact\"}),/*#__PURE__*/e(\"p\",{children:\"The cherry on top of your smooth scrolling design is the parallax-like effect you can achieve with scroll speed effects. With images contained within each section, you can add a scroll speed effect for a cascading effect. For instance, setting speed to 50% on an image and adjusting the position to scroll lets you control cropping for the images to enhance the visuals. Play around with these values to get your desired effect.\"}),/*#__PURE__*/e(\"p\",{children:\"Finally, let's give it a spin. When you publish and preview your design, the scroll speed addition generates a cascading effect, delivering a parallax-like feel to your website. Of course, you can fine-tune this to align perfectly with your preference.\"})]});export const richText53=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Add a Sticky Element\"}),/*#__PURE__*/e(\"p\",{children:\"To make a sticky header, select it and head over the properties panel where you\u2019ll find the Sticky property. Here you\u2019ll see four position properties to customize its distance from top, bottom, left, and right. These properties represent the position of the sticky element relative to its parent layer.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,rrsh7HlADdjsNiKIVkDuillbUpM.jpg\",\"data-framer-height\":\"1060\",\"data-framer-width\":\"1400\",height:\"530\",src:\"https://framerusercontent.com/images/rrsh7HlADdjsNiKIVkDuillbUpM.jpg\",srcSet:\"https://framerusercontent.com/images/rrsh7HlADdjsNiKIVkDuillbUpM.jpg?scale-down-to=512 512w,https://framerusercontent.com/images/rrsh7HlADdjsNiKIVkDuillbUpM.jpg?scale-down-to=1024 1024w,https://framerusercontent.com/images/rrsh7HlADdjsNiKIVkDuillbUpM.jpg 1400w\",style:{aspectRatio:\"1400 / 1060\"},width:\"700\"}),/*#__PURE__*/e(\"h2\",{children:\"Fixing Mobile Issues\"}),/*#__PURE__*/e(\"p\",{children:\"Sticky will only work if all parent layers have overflow set to visible, which may cause issues on mobile. Specifically, an overflowing element in the web page (like the one pictured below) can cause the site to be scrollable horizontally on a mobile device, leading to unwanted results. To prevent this from happening, make sure to double check for overflowing elements in your page and, if necessary, wrap them in a parent layer and set its overflow property to hidden.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,3JZKg0x5BITm3hfYOle6ndkdYs.jpg\",\"data-framer-height\":\"1060\",\"data-framer-width\":\"1400\",height:\"530\",src:\"https://framerusercontent.com/images/3JZKg0x5BITm3hfYOle6ndkdYs.jpg\",srcSet:\"https://framerusercontent.com/images/3JZKg0x5BITm3hfYOle6ndkdYs.jpg?scale-down-to=512 512w,https://framerusercontent.com/images/3JZKg0x5BITm3hfYOle6ndkdYs.jpg?scale-down-to=1024 1024w,https://framerusercontent.com/images/3JZKg0x5BITm3hfYOle6ndkdYs.jpg 1400w\",style:{aspectRatio:\"1400 / 1060\"},width:\"700\"})]});export const richText54=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"We are thrilled to introduce our new feature in Framer: Scroll Animations! It's all about bringing the magic of Framer motion to the Framer app that enables you to do a lot more. Let's delve into the intricacies of this exciting feature.\"}),/*#__PURE__*/e(\"h3\",{children:\"Understanding how Scroll Animations Work\"}),/*#__PURE__*/e(\"p\",{children:\"The first thing you'll notice in the demo project is a top bar attached to the viewport's top. Then, there is a header covering the entire viewport's height, followed by a few sections each with its unique name. The names are reflected in the layers panel, making them easy to identify.\"}),/*#__PURE__*/e(\"p\",{children:\"While previewing, you observe that the top bar is fixed on the screen, accompanied by a header that takes up the full viewport height. Often, for landing pages, you might want to animate your navigation when scrolling fast or within a specific section.\"}),/*#__PURE__*/e(\"h3\",{children:\"Developing an Appealing Top Bar\"}),/*#__PURE__*/e(\"p\",{children:\"Creating an appealing top bar can enhance the user interaction with the webpage. Having variants for different sections would facilitate changing the bar's color as per the section's theme. With Framer, you can not only maintain their visibility through your webpage but also exhibit stunning top bar transitions as users navigate from one section to another.\"}),/*#__PURE__*/e(\"p\",{children:\"You start by setting the 'Appear Animation' for the top bar by choosing 'section in view' as the triggering point. It triggers the animation as you scroll past a specific section. Also, the top bar's visibility adjusts as you scroll down, courtesy of the replay property. The top bar would continue to stay in view on and post the banner.\"}),/*#__PURE__*/e(\"h3\",{children:\"Optimizing the Top Bar Variants\"}),/*#__PURE__*/e(\"p\",{children:\"With the toolbar variants, you can make it more engaging by using the scroll variant. It enables you to select a variant to animate within specific sections. You can adjust the variant color that suits the theme of your current scrolling section. An added advantage is crafting a little sequence for your top bar. It starts with a light variant, switches to yellow as you scroll past the bundle section, and moves to the dark variant as you scroll beyond the bundle section towards the spec section.\"}),/*#__PURE__*/e(\"p\",{children:\"Creating this fully functional sequence using scroll animations and scroll variants makes web designing much more fun. And these features are fully compatible with smooth scrolling. By adding links to each section using the 'smooth scroll' setting, your webpage would not only look pleasing but also provide a smooth navigation experience.\"}),/*#__PURE__*/e(\"h3\",{children:\"Accommodating a Scroll Animation for Videos\"}),/*#__PURE__*/e(\"p\",{children:\"Scroll animations are not just limited to text and images. You could effectively use them in videos as well. For instance, you have a video component with two variants - one with a paused video and another with the video playing. You might want to engage your viewer by playing the video when he/she scrolls to the video section.\"}),/*#__PURE__*/e(\"p\",{children:\"By adding a scroll variant effect to the feature video, you enable the video to play as the user scrolls onto that section. As soon as the 'video' section enters the viewport, the video starts playing. And when the 'video' section scrolls out of view, the video goes back to the paused state. This flawless video play-pause on scrolling is so seamless to include thanks to Framer.\"})]});export const richText55=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Scroll Transforms aren't just about improving usability; they bring static elements to life. For instance, let's consider a badge. By using the scroll transform UI and introducing rotation along with a spring curve, the result is a dynamic, engaging element that feels buttery-smooth and truly interactive.\"}),/*#__PURE__*/e(\"h3\",{children:\"Enriching App Experiences with Scroll Transforms\"}),/*#__PURE__*/e(\"p\",{children:\"But it doesn't stop there. Scroll Transforms can be applied effectively to features like an application window in the headers. By introducing a layer in view, an entrancing entrance effect can be achieved, adding a touch of animation to usually static elements.\"}),/*#__PURE__*/e(\"p\",{children:\"Continuing this trend, we delve into nested Scroll Transforms, which offer even greater dynamism. One exciting application allows for site previews within the app window, giving users a glimpse of the depth your design offers. To top it off, by introducing a shimmer effect which transforms from left to right, the overall visual engagement is significantly elevated.\"}),/*#__PURE__*/e(\"h3\",{children:\"Synchronization with \u201CSection in View\u201D\"}),/*#__PURE__*/e(\"p\",{children:'An essential aspect of Scroll Transforms is the \"Section in View,\" enabling synchronization of transformations within a specific section, irrespective of layer size or position. This functionality comes to the fore especially when working with nested transforms on a feature like a ticker within a stack, showcasing powerful, dynamic visual cues.'}),/*#__PURE__*/e(\"h3\",{children:\"Scrolling Transforms and Video Sections\"}),/*#__PURE__*/e(\"p\",{children:\"One of the flexible areas Scroll Transforms truly shine is within video sections. Here, by leveraging the 'Section in View' control, changing characteristics like the section's opacity and scale becomes a breeze. Additionally, it becomes exceedingly simple to correct spacing issues with an offset Y attribute.\"}),/*#__PURE__*/e(\"p\",{children:\"The often overlooked play icon also benefits from these changes. Using a nested transform feature, its appearance timing can be adjusted with the viewport control, enhancing user experience and overall design aesthetics.\"})]});\nexport const __FramerMetadata__ = {\"exports\":{\"richText36\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText24\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText12\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText26\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText49\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText55\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText43\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText38\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText11\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText47\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText32\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText3\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText34\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText29\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText15\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText54\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText5\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText6\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText14\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText22\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText46\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText16\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText40\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText8\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText53\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText28\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText31\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText30\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText41\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText7\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText45\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText33\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText9\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText44\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText50\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText27\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText13\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText51\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText18\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText25\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText42\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText19\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText10\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText48\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText1\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText20\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText2\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText35\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText52\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText37\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText4\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText23\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText17\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText21\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"richText39\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "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",
  "names": ["richText", "u", "x", "p", "richText1", "richText2", "richText3", "richText4", "richText5", "Link", "richText6", "richText7", "richText8", "richText9", "richText10", "richText11", "richText12", "richText13", "richText14", "richText15", "richText16", "richText17", "richText18", "richText19", "richText20", "richText21", "richText22", "richText23", "richText24", "richText25", "richText26", "richText27", "richText28", "richText29", "richText30", "richText31", "richText32", "richText33", "richText34", "richText35", "richText36", "richText37", "richText38", "richText39", "richText40", "richText41", "richText42", "richText43", "richText44", "richText45", "richText46", "richText47", "richText48", "richText49", "richText50", "richText51", "richText52", "richText53", "richText54", "richText55", "__FramerMetadata__"]
}