
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua.


George Apostolov

John Doe

Mark Dinn

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff397dd0e157abed90e3/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>First, open your Framer project to get started.</li>
 <li>Click the 'Insert' menu to add new elements to your design canvas.</li>
 <li>Select 'AI Wireframer' to quickly generate professional layout options for your project.</li>
 <li>Type a brief description of what you want to create - be specific for better results.</li>
 <li>Hit the arrow icon to submit your description and let Framer AI generate your portfolio design instantly.</li>
 <li>Watch as Framer AI works its magic, processing your request and generating design solutions.</li>
 <li>See your portfolio design come to life in real-time with the preview feature.</li>
</ol>

Framer AI How to Use

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff397dd0e157abed9102/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click on the 'Insert' menu.</li>
 <li>Launch 'AI Wireframer' to instantly generate professional designs.</li>
 <li>Type your prompt in the empty field. </li>
 <li>Submit the prompt by clicking the arrow icon and wait about 20 seconds for Framer AI to generate a responsive website with multiple breakpoints.</li>
 <li>Review and regenerate if needed.</li>
 <li>Once satisfied, publish your website instantly by clicking the 'Publish' button.</li>
</ol>

Framer AI Website Generator How to Use

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3a7dd0e157abed912f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Access advanced design features and customization options.</li>
 <li>Click 'Browse All...' to launch the plugins.</li>
 <li>Click on the search icon.</li>
 <li>In the search bar, type 'Airtable'.</li>
 <li>Choose and select 'Airtable' from the reults.</li>
 <li>Choose a template for your new project.</li>
 <li>Bring your design to life by clicking 'Create' to start your new project.</li>
 <li>Click 'Log in' to sign in.</li>
 <li>Start with a foundation by adding a base to your project.</li>
 <li>Provide Framer with the necessary permissions to enhance your experience and click 'Grant access'.</li>
 <li>Authentication complete! You're now connected to your Framer account.</li>
</ol>

Framer Airtable Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3b7dd0e157abed9159/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>In Framer, go to the 'Assets' panel to access your design assets library for images, icons, and components.</li>
 <li>Navigate to the 'Code' section and click the add icon.</li>
 <li>Select 'New Code File'. </li>
 <li>Add a title for your new component.</li>
 <li>Click 'Create' and finalize your component and add it to your design library.</li>
 <li>Complete your API configuration with the closing parameter. Save your code changes with the keyboard shortcut Ctrl + S</li>
 <li>Connect your design to dynamic data using the API fetcher.</li>
 <li>Access your API configuration to connect with external data sources.</li>
</ol>

Framer API Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3c7dd0e157abed9182/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Navigate to the 'Insert' menu. </li>
 <li>Search for Calendly-specific components in our template library.</li>
 <li>Drop the 'Calendly' component onto your canvas with a single click.</li>
 <li>Access publishing options to take your Calendly integration live.</li>
 <li>Connect Calendly to add hassle-free scheduling to your Framer website.</li>
 <li>Copy the link to share your Calendly-enabled design with your team.</li>
 <li>Add your details here to personalize your Calendly integration.</li>
 <li>Tweak typography for your Calendly booking page for better readability.</li>
 <li>Click 'Publish' to save your work to keep your Calendly integration settings for later.</li>
</ol>

Framer Calendly Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3d7dd0e157abed919b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project and click the three-dot menu to access site options.</li>
 <li>Click the 'Open Settings' panel to access your site configuration options.</li>
 <li>Head to the 'Domains' section where you can manage all your website addresses.</li>
 <li>Select 'Connect a domain you own' and type in your custom domain name in the field provided.</li>
</ol>

Framer Connect Custom Domain

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3e7dd0e157abed91bd/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Let's start by opening your Framer project where you want to use CRM data.</li>
 <li>Click the 'Plugins' menu to access CRM data directly within your Framer projects.</li>
 <li>Select 'Browse All...' to explore available integrations for your project.</li>
 <li>Select your CRM provider to connect your account and bring your data into your designs.</li>
 <li>Access your CRM account by clicking 'Log In'.</li>
 <li>Connect your CRM account to bring your customer data into your design workflow.</li>
 <li>Select your CRM account to access your Framer designs and templates.</li>
 <li>Click 'Choose account' to link your CRM with Framer.</li>
 <li>Click 'Connect app' to establish the link between Framer and your CRM platform.</li>
</ol>

Framer CRM Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3f7dd0e157abed91e9/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project where you'll set up the ecommerce integration.</li>
 <li>Select 'Text' to create a button with clear, action-oriented text to drive conversions.</li>
 <li>Add a Stripe payment button to let customers check out directly from your site.</li>
 <li>Style your product displays to align with your brand's visual identity.</li>
 <li>Preview your changes to see your ecommerce elements in action.</li>
 <li>Connect your product pages by clicking the add icon to create a smooth shopping flow.</li>
 <li>Adjust product properties like price, description, and SKU in the properties panel.</li>
 <li>Build your store navigation by linking category pages and product collections.</li>
 <li>Configure your button to point to your Stripe checkout URL.</li>
 <li>Your Framer store is now connected to an e-commerce for processing payments.</li>
</ol>

Framer E-commerce Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff407dd0e157abed9210/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click on the 'Plugins'. </li>
 <li>Select 'Browse All...'</li>
 <li>Click on the search icon.</li>
 <li>In the search bar, type 'Figma'.</li>
 <li>Select 'FrameKit'.</li>
 <li>Click 'Open Plugin'. </li>
 <li>Select the Framer project.</li>
 <li>Authentication complete! Return to Framer to continue building your stunning website.</li>
</ol>

Framer Figma Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffe6243f01ed60a4d509/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click on the 'Plugins' button.</li>
 <li>Select 'Google Sheets' to connect your spreadsheet.</li>
 <li>Initialize your new connected data source with 'Create'.</li>
 <li>Click 'Sign in' to authenticate your account to enable the data connection.</li>
 <li>Choose your Google account to establish the connection and click 'Continue'.</li>
 <li>Success! Return to Framer with your spreadsheet now connected.</li>
</ol>

Framer Google Sheets Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffe7243f01ed60a4d531/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click the 'Plugins' menu to access your integrated HubSpot data within your Framer projects.</li>
 <li>Select 'Browse All...'</li>
 <li>Select 'HubSpot' to connect your HubSpot account to enhance your design workflow.</li>
 <li>Access your HubSpot account by clicking 'Log In'. </li>
 <li>Connect your HubSpot account to enable powerful marketing integrations.</li>
 <li>Select your HubSpot account to access your designs and templates.</li>
 <li>Click 'Choose account' to connect to Framer.</li>
 <li>Click 'Connect app' to link your application to enable seamless data flow between platforms.</li>
 <li>Authentication complete! Return to Framer to continue your design journey.</li>
</ol>

Framer HubSpot Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffe9243f01ed60a4d55b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click 'Insert' to add your component to the canvas and build your design.</li>
 <li>Select 'Forms' as your interactive element to configure its behavior.</li>
 <li>Select 'Mailchimp' to integrate Mailchimp and add powerful email subscription capabilities.</li>
 <li>Customize this component to match your design aesthetic.</li>
 <li>Position your element precisely within your layout.</li>
 <li>Enter your Mailchimp form endpoint to connect your subscription service.</li>
 <li>Set a URL destination to create external navigation options.</li>
 <li>Test your integration to ensure smooth data flow.</li>
 <li>Finalize your design by confirming all connections work properly.</li>
</ol>

Framer Mailchimp Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffe9243f01ed60a4d585/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start by opening your Framer project where you want to add the newsletter form.</li>
 <li>Hit 'Insert' to add the newsletter component to your canvas—it's ready for customization.</li>
 <li>Navigate to 'Forms' to set up the interactive elements of your newsletter signup.</li>
 <li>Click 'Newsletter' to access email collection options for growing your subscriber list.</li>
 <li>Adjust the newsletter component's colors and typography to match your site's look and feel.</li>
 <li>Drag to position your newsletter form where it'll get the most visibility and sign-ups.</li>
 <li>Paste your newsletter service endpoint URL here to connect your subscription form.</li>
 <li>Add a URL for where subscribers should land after submitting their email address.</li>
 <li>Send yourself a test submission to verify the form is capturing emails correctly.</li>
 <li>Double-check that your form submits properly and redirects to your thank-you page.</li>
</ol>

Framer Newsletter Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffea243f01ed60a4d5af/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Access the main menu of your framer. </li>
 <li>Explore 'Plugins' to enhance your design capabilities.</li>
 <li>Click 'Browse All...'</li>
 <li>Select the 'Notion' app.</li>
 <li>Launch a new project with the 'Create' button.</li>
 <li>Access your account to manage all your design projects and click 'Log In'.</li>
 <li>Preview the pages you've selected for your prototype.</li>
 <li>Click 'Allow access'. </li>
 <li>Authentication complete! Return to Framer to continue your project.</li>
</ol>

Framer Notion Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffeb243f01ed60a4d5d9/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project where you want to add payment functionality.</li>
 <li>Create a payment button with clear text like "Buy Now" or "Complete Purchase".</li>
 <li>Add a payment button to your page—this is where the Stripe magic happens!</li>
 <li>Style your payment button to stand out while matching your site's design language.</li>
 <li>Connect your checkout page to your product pages by setting up appropriate navigation links.</li>
 <li>Copy and paste your Stripe payment link from your Stripe dashboard.</li>
 <li>Preview your changes to ensure the payment flow works smoothly.</li>
 <li>Set the button to link directly to your Stripe checkout URL.</li>
 <li>That's it! Your Framer site is now ready to accept payments through Stripe.</li>
</ol>

Framer Payment Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffec243f01ed60a4d5f9/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Add dynamic elements from the 'Insert' menu to enhance user engagement.</li>
 <li>Search and choose 'Embed' to add the Salesforce embedded code. </li>
 <li>Adjust the element.</li>
 <li>Embed custom HTML or a URL to enhance your design with advanced functionality.</li>
 <li>Paste your Salesforce URL in the empty field.</li>
 <li>Click 'Publish' to share your site with the world.</li>
</ol>

Framer Salesforce Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffed243f01ed60a4d626/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Create a button and add compelling text content to communicate your message.</li>
 <li>Add interactive elements to engage your visitors.</li>
 <li>Customize your design elements to match your brand identity.</li>
 <li>Enable instant payments with Framer's secure payment button.</li>
 <li>Apply your design changes to see them in real-time.</li>
 <li>Establish connections between pages with intuitive links by clicking the add icon.</li>
 <li>Enter custom properties to tailor your design elements.</li>
 <li>Create powerful navigation by connecting pages with links.</li>
 <li>Set its link to the Stripe payment URL.</li>
 <li>That's it! You've successfully integrated Framer with Stripe. </li>
</ol>

Framer Stripe Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffed243f01ed60a4d655/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Create a button for your WhatsApp from scratch.</li>
 <li>Right- click and select 'Add Stack'. </li>
 <li>Go to your 'Layout' section and adjust the padding and alignment of you button.</li>
 <li>Go to the 'Link' section. </li>
 <li>Under the 'Link' settings, set the link to your WhatsApp link.</li>
 <li>Choose 'Yes' if you want to open the button in new tab if desired.</li>
 <li>Go to 'Insert' and click 'Icons'.</li>
 <li>Select 'Iconic' from the options.</li>
 <li>Select the WhatsApp icon and start designing your icon.</li>
 <li>That's it! You can now initiate the integration process between Framer and WhatsApp.</li>
</ol>

Framer WhatsApp Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffee243f01ed60a4d678/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Use 'Insert' to add new elements to your design.</li>
 <li>Select 'Embed' to access smart components for interactive elements.</li>
 <li>Customize your component library.</li>
 <li>Access HTML elements to customize your code.</li>
 <li>Add custom code to enhance functionality.</li>
 <li>Adjust spacing and alignment for pixel-perfect designs.</li>
 <li>Preview your responsive design across devices and click 'Publish'. </li>
</ol>

Framer WordPress Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a0149243f01ed60a4f074/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Select 'Vector' elements to customize shapes with precision.</li>
 <li>Select 'Path' to refine paths to create custom shapes for your unique design.</li>
 <li>Click once to create the starting point of the line, then click again to create the end point.</li>
 <li>By following these steps, it will draw a straight line segment.</li>
</ol>

How to Add a Line in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a0193243f01ed60a4f622/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click and incorporate 'Vector' graphics for scalable designs.</li>
 <li>Add visual elements to enhance your design.</li>
 <li>Customize the shape style. </li>
 <li>Customize color schemes with an intuitive hex picker.</li>
 <li>Add a Fill color under the right panel.</li>
 <li>Add interactive animations to engage visitors</li>
</ol>

How to Add a Shape in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a01da243f01ed60a4fb81/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Navigate to the 'Layout' tab.</li>
 <li>Click 'Video' to add dynamic video content to engage visitors.</li>
 <li>Then, drag and drop a video component onto the Canvas.</li>
 <li>Go to the 'Video' field and choose 'URL'.</li>
 <li>Paste your video’s link in the empty field.</li>
 <li>Refine your design's interactive elements by adding an image.</li>
 <li>Select an image to enhance your visual design.</li>
 <li>Adjust the layout properties for better alignment.</li>
</ol>

How to Add a Video to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a01f0243f01ed60a4fd17/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Head over to 'Settings' where you can integrate your Adobe Fonts. </li>
 <li>Select 'Tools' to access Framer's font management options. From here, you can connect your Adobe Fonts account.</li>
 <li>Click 'Upload' to add Adobe Fonts to your project. This lets you tap into Adobe's extensive font library to match your brand's personality.</li>
</ol>

How to Add Adobe Fonts to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2cb9a98365d08657008e/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Famer project.</li>
 <li>Open 'Layout' options to create responsive designs effortlessly.</li>
 <li>Select 'Grid' view to perfectly align your elements.</li>
 <li>Click inside the text box.</li>
 <li>Type the hyphen "-" symbol, click space, and type the text.</li>
 <li><article style={{"textAlign": "left"}}>You can then add your bullet points to the grid. They will automatically try to fill the available space.</article></li>
</ol>

How To Add Bullet Points in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2cf1a98365d086570479/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to your Framer project where you want to implement the code.</li>
 <li>Click on the menu bar to access the component creation options.</li>
 <li>Choose 'Code' from the options to proceed to the editor.</li>
 <li>Start by clicking 'Create Code Component' to begin crafting your custom functionality.</li>
 <li>Give your component a clear, descriptive name that reflects its purpose.</li>
 <li>Finally, click 'Create' to finalize your component and add it to your project canvas.</li>
 <li>Notice the code syntax highlighting that makes development more readable and error-spotting easier.</li>
 <li>Hit 'Copy link' and paste the code into your local project for integration.</li>
</ol>

How to Add Code to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2d3157f8f6cdddddd3d4/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Access the 'Insert' menu to add new elements to your design.</li>
 <li>Select 'Embed' to add the custom code to your Framer.</li>
 <li>Access the HTML tool to add custom code elements to your design.</li>
 <li>Enter your custom HTML code in this field</li>
 <li>Select HTML to begin embedding custom code in your Framer project.</li>
 <li>Preview how your HTML elements will appear on the published site.</li>
</ol>

How to Add Custom Code to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2dcbd673bd5aa8e5f8c4/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Customize your website's appearance by accessing 'Settings'.</li>
 <li>Select 'Tools' to personalize your typography with our font management tools.</li>
 <li>Click 'Upload' to add custom fonts to create a unique brand identity. Import your preferred fonts to elevate your design's visual appeal.</li>
</ol>

How to Add Fonts to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2dcdd673bd5aa8e5f906/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Open the 'Insert' menu to add new design elements.</li>
 <li>Go to the 'Elements' settings for perfect responsive behavior.</li>
 <li>Access 'Forms' to create interactive user inputs.</li>
 <li>Customize your design elements in this workspace.</li>
 <li>Explore your powerful design tools in this section.</li>
 <li>Customize each field’s label, placeholder, and validation from the right-side properties panel.</li>
</ol>

How to Add Forms in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2dd2d673bd5aa8e5f975/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click on the 'Layout' tab located at the top of your Framer project. </li>
 <li>Access 'Frame' settings to adjust size and constraints.</li>
 <li>Select colors from your palette to maintain consistency.</li>
 <li>Drag components from the library to build your design quickly.</li>
 <li>Select the frame and use the resizing handles to adjust its size.</li>
</ol>

How to Add Frame in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2dddd673bd5aa8e5fa76/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project and access the 'Settings' panel. </li>
 <li>Scroll down to 'Google Analytics'.</li>
 <li>Add your Google Analytics Measurement ID in the empty field to initiate the integration process.</li>
 <li>Once done, click 'Save'. </li>
</ol>

How to Add Google Analytics to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e06d673bd5aa8e5fe16/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Access the 'Insert' menu to add new design elements to your canvas.</li>
 <li>Select the 'Icon' menu.</li>
 <li>Select the 'Iconic' button.</li>
 <li>Adjust size, color, weight, and style.</li>
 <li>Choose an icon from the dropdown.</li>
 <li>That's it! You've successfully added icons in Framer.</li>
</ol>

How to Add Icons in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e0bd673bd5aa8e5fe7c/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Frame project.</li>
 <li>Open the 'Insert' panel to access Framer's powerful design components.</li>
 <li>Go to the 'Element' section and select 'Media'. </li>
 <li>Navigate to the 'Media' category and select 'Image'.</li>
 <li>Drag the image element onto your canvas and edit the image immediately.</li>
 <li>Go to the 'Fill' menu to add an image.</li>
 <li>Choose an image from your files, browse online sources, or drag an image directly into the field.</li>
 <li>That's it! You've successfully added an image in Framer. </li>
</ol>

How to Add Image in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e39d673bd5aa8e60268/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>First, open your Framer project where you want to add the line.</li>
 <li>Alternatively, you can use the 'Vector' tool if you need more precise control over your line's properties.</li>
 <li>In the left toolbar, click on the 'Path' tool to draw lines and custom shapes.</li>
 <li>Now for the fun part - click once on the canvas where you want your line to start, then click again where you want it to end. Voilà!</li>
 <li>Let's add a straight line to your Framer project - it's a simple two-click process.</li>
</ol>

How to Add Line in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e83d673bd5aa8e60724/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project. Navigate between pages to build complete, multi-page websites.</li>
 <li>Select a frame.</li>
 <li>In the right-hand 'Style' panel, scroll to the 'Layout' section.</li>
 <li>Select 'Padding'. </li>
 <li>Enter values for 'Top, Bottom, Left, Right' padding.</li>
 <li>Adjust padding to perfect the spacing between elements.</li>
 <li>Publish your design with one click and share it with the world.</li>
</ol>

How to Add Padding in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2ebbd673bd5aa8e60c7f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Access 'Layout' options to structure your content with precision.</li>
 <li>Start by accessing the 'Frame' tool to create your website's section.</li>
 <li>Choose your preferred alignment method for perfect content positioning.</li>
 <li>Now that you have added a section in Famer, click this area to define your canvas dimensions for responsive design.</li>
</ol>

How to Add Section in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2eded673bd5aa8e60f21/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Open the 'Insert' menu to explore embedding options for your project.</li>
 <li>From the Insert menu, choose 'Embed' to enhance your design's functionality .</li>
 <li>Choose the URL option to seamlessly integrate external web content</li>
 <li>Enter your embed URL or code in this field to customize your integration.</li>
 <li>Preview how your embedded content will display in the final design.</li>
 <li>Apply your embed to see it come to life within your Framer project.</li>
 <li>Resize and position the embed frame as needed.</li>
 <li>Click 'Publish' to make your Framer live.</li>
</ol>

How to Add Spline to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a306bd673bd5aa8e6315c/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Navigate to your project's settings. </li>
 <li>Go to the 'Plans' tab.</li>
 <li>Find the site plan you want to cancel and click 'Cancel Plan'.</li>
 <li>Provide your feedback, and confirm the cancellation by clicking 'Next'. </li>
 <li>Hit 'Cancel Plan' to cancel your subscription and your plan will remain active until the end of the current billing period—there’s no immediate shutdown.</li>
</ol>

How to Cancel Framer Subscription

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a30aed673bd5aa8e636ae/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the canvas whose background you want to change.</li>
 <li>Go to the right sidebar, find the 'Fill' toggle.</li>
 <li>Click the color swatch and choose a color, gradient, or set a hex value.</li>
 <li>You've successfully changed the background in Framer.</li>
</ol>

How to Change Background Color in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a30f2d673bd5aa8e63bfc/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click 'Open Settings' to customize your project with powerful design settings.</li>
 <li>Scroll down to the 'Site Images' and go to 'Favicon'. </li>
 <li>Click 'Upload' to import your visual assets to enhance your design.</li>
 <li>Preview your design in the canvas workspace</li>
 <li>Success! Your image has been uploaded and is ready for integration.</li>
</ol>

How to Change Favicon in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a30ffd673bd5aa8e63d3f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Open the font selector to explore typography options.</li>
 <li>Under 'Text Styles', select which style you want to edit.</li>
 <li>Access the 'Edit' menu for powerful customization tools.</li>
 <li>Navigate to the 'Font' section.</li>
 <li>Customize fonts that match your brand identity.</li>
 <li>That's it! You've successfully changed the font in Framer.</li>
</ol>

How to Change Font in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3128d673bd5aa8e64070/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Open the 'Layers' panel to view your complete element hierarchy.</li>
 <li>Select an element to begin organizing your design layers.</li>
 <li>Access the positioning controls for your selected element and click 'Move'. </li>
 <li>Fine-tune the stacking order by moving elements forward.</li>
 <li>That's it! You've successfully changed the layer in Framer.</li>
</ol>

How to Change Layer in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a31fdab56e05a00fd57c1/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Navigate to different pages in your project to build a complete website.</li>
 <li>Select your current logo. </li>
 <li>Navigate to the 'Fill' option under the 'Style' section.</li>
 <li>Click 'Choose Image' to personalize your site by uploading custom images to your project.</li>
 <li>That's it! You've successfully changed the logo in Framer.</li>
</ol>

How to Change Logo in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a321dab56e05a00fd5a24/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>In Framer, the first breakpoint is considered the main breakpoint.</li>
 <li>Explore responsive design with 'Breakpoints', and adapt your site for multiple screen sizes.</li>
 <li>Select the 'Phone390' preset to optimize your design for smartphone screens.</li>
 <li>Apply mobile-specific styling that won't affect your desktop design.</li>
 <li>See how elements automatically reflow to fit this screen size.</li>
 <li>Click on the add icon to add a new breakpoint to optimize your design for different devices.</li>
 <li>Examine how your content adapts seamlessly across all breakpoints.</li>
</ol>

How to Change Primary Breakpoint in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3383ab56e05a00fd7b30/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to your Framer project and click on the three-dot menu.</li>
 <li>Access site configuration through the 'Open Settings' panel.</li>
 <li>Navigate to the 'Domains' section to manage your website addresses.</li>
 <li>Customize your site's URL by editing the domain name.</li>
 <li>Select your preferred domain type for your website</li>
 <li>Select the option 'Connect a domain you own' and enter your custom domain name.</li>
 <li>This process allows you to replace the default Framer subdomain with your own professional domain, making your site easier to find and more brand-aligned.</li>
</ol>

How to Connect Domain to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a33a0ab56e05a00fd7e1b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Go to 'Settings'.</li>
 <li>Select 'Domains' to manage your custom domains to connect with your branded site.</li>
 <li>Choose 'Connect a domain you own'.</li>
 <li>Enter your GoDaddy domain. Framer will handle the DNS record updates automatically.&nbsp;</li>
</ol>

How to Connect GoDaddy Domain to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3430ab56e05a00fd8b85/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Navigate to your page.</li>
 <li>In the right-hand panel, find the 'Link' section.</li>
 <li>Click on the add icon.</li>
 <li>Click the dropdown and choose the page you want to link to.</li>
 <li>That's it! You've successfully connected pages in Framer.</li>
</ol>

How to Connect Pages in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a35aeab56e05a00fda1ff/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Access the main menu.</li>
 <li>Click 'File' and select 'Import from Figma' to seamlessly bring your Figma designs into Framer.</li>
 <li>Click 'Get Plugin' to install the Figma plugin and enhance your workflow.</li>
 <li>Select the file that you want to convert.</li>
 <li>Use the specialized converter to transform Figma designs into HTML.</li>
 <li>Adjust your project settings for optimal results.</li>
 <li>Copy your design elements for seamless transfer.</li>
 <li>Framer will bring them into your canvas as editable elements. Preview how your design will appear live.</li>
</ol>

How to Convert Figma to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a366fab56e05a00fdb14c/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Go to the menu section and apply your changes to see the component in action.</li>
 <li>Access 'Component' settings for advanced customization.</li>
 <li>Select 'Create component'. </li>
 <li>Name your component in the 'Title' field.</li>
 <li>Start your design journey by selecting 'Create'.</li>
 <li>Customize your component properties and start building your component.</li>
</ol>

How to Create a Component in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a38abab56e05a00fdecda/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start fresh with a 'New Project' to bring your vision to life.</li>
 <li>Create engaging content with the 'Text' element.</li>
 <li>Name your project to organize your design work.</li>
 <li>Apply your design changes to see them in action.</li>
 <li>Customize your color palette with the hex code selector.</li>
 <li>Access 'Layout' options for structural design control.</li>
 <li>Add visual impact with an Image element to your design.</li>
 <li>Upload your own imagery to personalize your site.</li>
 <li>Fine-tune your image with the 'Crop' tool for perfect framing.</li>
 <li>Click 'Crop' to perfect your image presentation with cropping tools.</li>
 <li>Add interactivity with a clickable call-to-action.</li>
 <li>Customize your layout for optimal visual flow.</li>
 <li>Organize elements with 'Stack' for automatic alignment.</li>
 <li>Set consistent spacing with the TRBL (top-right-bottom-left) controls.</li>
 <li>Position your elements for perfect alignment.</li>
 <li>Use 'Link To' to link buttons or navigate items to other pages.</li>
 <li>Set responsive 'Breakpoints' for different screen sizes.</li>
 <li>Switch to 'Tablet' view to ensure responsive design.</li>
 <li>Create compelling content with the 'Text' element.</li>
 <li>Style your 'Body' text for consistent typography.</li>
 <li>Choose 'Inter' typeface for clean, modern typography.</li>
 <li>Finalize your content with precision editing tools.</li>
 <li>Click 'Publish' in the top-right corner to publish your website.</li>
</ol>

How to Create a Website on Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3a8fab56e05a00fe1aed/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Go to the 'Fill' menu.</li>
 <li>Access the 'Crop' tool to perfectly frame your visual content.</li>
 <li>You can move or scale the image inside the frame to adjust what’s visible.</li>
 <li>Adjust your design's dimensions for optimal display across devices.</li>
 <li>Perfect your image presentation with intuitive cropping tools and click 'Crop'. </li>
 <li>That's it! You've successfully cropped the image in Framer.</li>
</ol>

How to Crop Image in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3a9cab56e05a00fe1b8e/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Go to the 'Fill' menu.</li>
 <li>Access the 'Crop' tool to perfectly frame your visual content.</li>
 <li>You can move or scale the image inside the frame to adjust what’s visible.</li>
 <li>Adjust your design's dimensions for optimal display across devices.</li>
 <li>Perfect your image presentation with intuitive cropping tools and click 'Crop'. </li>
 <li>That's it! You've successfully cropped the image in Framer.</li>
</ol>

How to Crop in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3b73ab56e05a00fe2c3b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to your 'Archive' projects.</li>
 <li>Find the project you want to delete. Select 'Delete' from the menu.</li>
 <li>Click 'Delete Project' to confirm.</li>
 <li>Notice the confirmation message that your project was successfully deleted.</li>
</ol>

How to Delete Projects in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c15ab56e05a00fe38df/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>First, open your Framer project and access the canvas where you want to draw your line.</li>
 <li>For more advanced line creation, try using the 'Vector' tool, which gives you pixel-perfect control over your shapes.</li>
 <li>Select 'Path' from the toolbar to create custom shapes with more refined control over your lines.</li>
 <li>Click once on the canvas to set your starting point, then move your cursor and click again to establish the endpoint of your line.</li>
 <li>Voilà! You've just created a straight line in Framer. You can now adjust its properties in the right panel.</li>
</ol>

How to Draw a Line in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c18ab56e05a00fe394a/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click on 'Vector' to access the drawing tool in the left toolbar to start creating your illustrations.</li>
 <li>Use the 'Path' tool to create custom shapes with precise control over curves.</li>
 <li>Add interactive hover states to your drawn elements for richer engagement.</li>
 <li>Bring your drawings to life with subtle animations and transitions.</li>
 <li>Preview your drawings to see how they'll appear in the final design.</li>
</ol>

How to Draw in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3ca7ab56e05a00fe42db/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click on the text box that you want to edit.</li>
 <li>Customize your content by modifying text elements instantly.</li>
 <li>That's it! You've successfully edited text in Framer. </li>
</ol>

How to Edit Text in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3d0bab56e05a00fe4879/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to your Figma account and copy the prototype link.</li>
 <li>Click 'Insert'. </li>
 <li>Select 'Embed'.</li>
 <li>Go to the 'Embed' section and add the Figma 'URL'. </li>
 <li>Paste the prototype link and it will automatically be embedded into your canvas.</li>
</ol>

How to Embed Figma Prototype in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3d1eab56e05a00fe4932/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Click 'Insert'. </li>
 <li>Select 'Embed'.</li>
 <li>Go to the 'Embed' section and add the Figma 'URL'. </li>
 <li>Paste the link and it will automatically be embedded into your canvas.</li>
</ol>

How to Embed in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3edaab56e05a00fe6af1/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click on the menu bar. </li>
 <li>Select 'Code'.</li>
 <li>Click 'Create Code Component' to start building your custom code component.</li>
 <li>Name your component something descriptive.</li>
 <li>Click 'Create' and finalize your component and add it to your project.</li>
 <li>Review code syntax highlighting for easier development.</li>
 <li>Click 'Copy link' and paste it into your local project.</li>
</ol>

How to Get Code from Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f3bab56e05a00fe71a1/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Preview and see how responsive layouts adapt automatically to different screen sizes.</li>
 <li>Publish your designs instantly with one click to share with your team.</li>
 <li>Click the arrow icon to go back to Framer. </li>
 <li>That's it! You've successfully gone back to Framer.</li>
</ol>

How to Go Back on Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f40ab56e05a00fe7211/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Select multiple elements inside the canvas.</li>
 <li>Right-click the selection and choose 'Group'.</li>
 <li>The elements are now grouped inside a new Frame, which you can resize, move, or style as one unit.</li>
</ol>

How to Group Elements in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f42ab56e05a00fe724e/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start by opening your Framer project - this is where the magic happens.</li>
 <li>Select an element you want to group.</li>
 <li>Choose 'Group'. </li>
 <li>Your elements are now grouped in a single Frame that you can resize, move, or style as one cohesive unit.</li>
</ol>

How to Group in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f4aab56e05a00fe72e9/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Access the main menu for more options. </li>
 <li>Access publishing options through the 'File' menu.</li>
 <li>Select 'Copy Remix Link' to share a remixable version for collaborative editing.</li>
 <li>Share the link with your client to transfer ownership.</li>
 <li>When the client opens the remix link, they will be prompted to copy the project to their Framer account.</li>
 <li>This creates a duplicate under their ownership. For ongoing maintenance or final changes, they can add you as an editor to the project.</li>
</ol>

How to Hand Off Website Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f73ab56e05a00fe7586/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project and click 'Text' to add text elements to enhance your design communication.</li>
 <li>Choose the text you want to highlight.</li>
 <li>Create component stacks for organized layouts.</li>
 <li>In the 'Layout' section, adjust and add 'Paddings' to your text. </li>
 <li>Define custom properties for component variations.</li>
 <li>Check layout consistency across breakpoints.</li>
 <li>Click on the 'Fill' option to adjust the background of your text.</li>
 <li>Make it stand out against the background.</li>
 <li>That's it! You've successfully highlighted a text in Framer. </li>
</ol>

How to Highlight Text in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3fb7ab56e05a00fe7c05/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project where you'll import your Figma design.</li>
 <li>Access the menu to manage your imported Figma project.</li>
 <li>Select the 'File' option.</li>
 <li>Choose 'Import fom Figma'. </li>
 <li>Click 'Get Plugin' to enhance your workflow with powerful plugin capabilities.</li>
 <li>Choose the Figma file you want to import into your Framer project.</li>
 <li>Preview your imported Figma design in Framer's presentation mode.</li>
 <li>Set up prototype interactions for your imported Figma elements.</li>
 <li>Select which Figma components you want to import to your library.</li>
 <li>Copy your Figma designs and paste in Framer.</li>
 <li>You've successfully brought Figma designs to Framer.</li>
</ol>

How to Import Figma to Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a42e9ab56e05a00feb9b0/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Log in to your Framer account and open an existing/ new project.</li>
 <li>Head over to Forms in the left pane.</li>
 <li>Select HubSpot from the list of Embeds.</li>
 <li>You will need to paste the Account ID in the HubSpotForm section in the right pane</li>
 <li>Open your HubSpot account.</li>
 <li>To find your HubSpot account and form ID, open the form you want added to your Framer account and hit the Share button.</li>
 <li>Move to the Embed Code tab in the pop-up dialog.</li>
 <li>You will find your HubSpot and Form ID mentioned here.</li>
 <li>You can copy the Account ID and Frame ID into your Framer interface.</li>
</ol>

Framer hubspot integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4846ab56e05a00ff3158/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Use the 'Link to' option to link section in Famer. </li>
 <li>Select the element you want to use as the link.</li>
 <li>Navigate to page-2 to continue building your site structure.</li>
 <li>Choose 'No' to maintain your current configuration.</li>
 <li>Add a hyperlink to connect pages or external content.</li>
 <li>Create a custom style to enhance your design system.</li>
 <li>Click 'Edit' to open the editor to modify this component's properties.</li>
 <li>Access the 'Publish' button to share your design.</li>
</ol>

How to Link to Section in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4883ab56e05a00ff3578/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project and select 'Text'. </li>
 <li>Name your button.</li>
 <li>Select the button component to customize its appearance.</li>
 <li>Add a 'Stack' component to organize elements with automatic spacing.</li>
 <li>Adjust 'Padding' to create comfortable spacing around content.</li>
 <li>Specify exact measurements for pixel-perfect designs.</li>
 <li>To make your button interactive, go to 'Border' and customize.</li>
 <li>Choose a border style that complements your design aesthetic.</li>
 <li>Enter your custom text to personalize this component.</li>
 <li>Navigate to 'Pages' to manage your site's structure.</li>
 <li>Click 'Desktop' to preview your button.</li>
 <li>That's it! You've successfully made a button in Framer.</li>
</ol>

How to Make a Button in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4927ab56e05a00ff404c/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start a 'New Project' with responsiveness in mind from the get-go. </li>
 <li>Add 'Text' elements that dynamically resize based on viewport width.</li>
 <li>Name your responsive project to keep track of your adaptive design work.</li>
 <li>Preview your changes to see how they respond to different screen dimensions.</li>
 <li>Use the hex code selector to customize your color palette for consistent styling across devices.</li>
 <li>Open 'Layout' options to control how elements behave across different viewports.</li>
 <li>Add responsive Image elements that scale proportionally with the viewport.</li>
 <li>Upload images that will resize dynamically without losing quality on any device.</li>
 <li>Use the 'Crop' tool to focus on image areas that remain important across all screen sizes.</li>
 <li>Use 'Crop' to ensure your images look great on everything from phones to desktops.</li>
 <li>Create touch-friendly call-to-actions that work on both mobile and desktop devices.</li>
 <li>Adjust your layout to maintain visual flow across different screen sizes.</li>
 <li>Use 'Stack' to organize elements that will automatically align on different screens.</li>
 <li>Use TRBL (top-right-bottom-left) controls to set spacing that adapts to screen sizes.</li>
 <li>Position elements with relative units instead of fixed pixels for better responsiveness.</li>
 <li>Style your 'Body' text to ensure readable typography on all devices.</li>
 <li>Select 'Inter' typeface for legibility that scales well across all device sizes.</li>
 <li>Use 'Link To' for navigation that works seamlessly across all device types.</li>
 <li>Toggle to 'Tablet' view to check how your design adapts to mid-sized screens.</li>
 <li>Set responsive 'Breakpoints' for different screen sizes.</li>
 <li>Check content overflow and readability at each breakpoint before finalizing.</li>
 <li>Click 'Publish' in the top-right to make your responsive website live on all devices.</li>
</ol>

How to Make Framer Responsive

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4927ab56e05a00ff4071/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to your desired project and click on the three-dot menu. Select 'Duplicate', create your version while preserving the original.</li>
 <li>Select your new copy to begin customizing your unique design.</li>
 <li>Personalize your design by changing the name to something meaningful.</li>
 <li>By duplicating the framer project, you'll be able to use them as templates.</li>
</ol>

How to Make Framer Templates

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4bc2ab56e05a00ff7275/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project. </li>
 <li>Add an action that you want to undo. </li>
 <li>Undo changes or restore previous versions with ease press 'CTRL + Z'.</li>
</ol>

How to Redo in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4befab56e05a00ff75f6/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Select the layout or component that is connected to the CMS collection.</li>
 <li>In the pages panel, find the field where the CMS collection is assigned.</li>
 <li>Select 'Delete' to remove the item from your design collection.</li>
 <li>Click 'Delete' to confirm deletion to keep your workspace organized.</li>
 <li>Following these steps effectively removes the CMS connection from that part of your project.</li>
</ol>

How to Remove CMS from Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4c0eab56e05a00ff780f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer Project.</li>
 <li>Head to the 'Code Overrides' tab and create a new code override.</li>
 <li>Name it 'withCSS' - this way you can add other CSS tricks in the future to the same file.</li>
 <li>Click 'Create' to bring your design to life.</li>
 <li>Paste the code. </li>
 <li>Start coding your component by adding the return statement.</li>
 <li>Save your code changes with the shortcut to see them instantly applied.</li>
 <li>Go to the 'Override' option.</li>
 <li>Select your primary canvas and apply the code override to it.</li>
 <li>Share your creation with the world by clicking 'Publish'.</li>
</ol>

How to Remove Made in Framer Badge

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4ce0ab56e05a00ff86d0/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project. </li>
 <li>You can scale elements or the frame by using the canvas controls.</li>
 <li>It allows you to scale layers by a factor or to a specific size.</li>
 <li>The Scale tool allows you to scale elements proportionally by multiplying their size by a factor.</li>
</ol>

How to Scale in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4e9bab56e05a00ffa7cd/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Click 'Invite' to share the Famer prototype.</li>
 <li>Set permission levels to control what collaborators can modify.</li>
 <li>Click 'Copy' to generate a shareable link for instant access to your designs.</li>
</ol>

How to Share Framer Prototype

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4eb5ab56e05a00ffa980/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your project in Framer.</li>
 <li>In the Framer project, click the 'Invite' button.</li>
 <li>Review your project link settings and adjust visibility options before sharing with your team.</li>
 <li>Click 'Copy' to generate a shareable link to quickly distribute your design to stakeholders.</li>
</ol>

How to Share Project Link in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4eb6ab56e05a00ffa999/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Create a new collaboration invitation to expand your design team by clicking 'Invite'.</li>
 <li>Enter your collaborator's email to start the sharing process.</li>
 <li>Assign 'Full Access' to enable comprehensive editing privileges.</li>
 <li>Click 'Send' to finalize the invitation by sending it to your team member.</li>
 <li>The user must have a Framer account. They'll get an invite via email.</li>
</ol>

How to Share Project with Another User

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4fddab56e05a00ffc4bd/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start by opening your Framer project that you want to transfer.</li>
 <li>Click the three-dot menu to reveal additional transfer options.</li>
 <li>Click on the 'File' menu in the top navigation to access publishing options.</li>
 <li>Select 'Copy Remix Link' - this creates a special link that allows your client to make their copy.</li>
 <li>Send the link to your client so they can claim ownership of the website.</li>
 <li>When your client clicks the link, they'll see a prompt to copy the project directly to their Framer account. No technical skills required!</li>
 <li>The client will now have their own version of the site. If you need to help with updates later, they can add you as an editor - problem solved!</li>
</ol>

How to Transfer Framer Website to Client

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4fe9ab56e05a00ffc574/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>First, open the Framer project you want to transfer to your client. Make sure it's ready for handoff!</li>
 <li>Click main menu to reveal the additional transfer options for your project.</li>
 <li>Navigate to the 'File' menu in the top navigation bar to access your publishing and sharing options.</li>
 <li>Select 'Copy Remix Link' from the dropdown menu. This creates a unique link that lets your client make their own copy of the project.</li>
 <li>Share the generated link with your client via email or message. Once they click it, they can claim ownership of the website.</li>
 <li>Ask the client to click 'Copy', and they'll see a prompt to copy the project directly to their Framer account.</li>
 <li>Your client now has their own version of the site to manage. If they need your help later, they can simply add you as an editor - collaboration made easy!</li>
</ol>

How to Transfer Projects for a Client from Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a501fab56e05a00ffcc45/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Select this blog post to customize its appearance and content.</li>
 <li>Highlight the text you want to underline and go to the 'Text' element.</li>
 <li>Click the 'Edit' mode to begin customizing your content.</li>
 <li>Access typography controls to perfect your text presentation and go to 'Decoration'.</li>
 <li>Click on the underlined text icon.</li>
 <li>That's it! You've successfully applied underline in Framer.</li>
</ol>

How to Underline in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5057ab56e05a00ffcf61/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to your desired project and click on the three-dot menu.</li>
 <li>Access advanced configuration options to customize your project's behavior by clicking 'Open Settings'. </li>
 <li>Go to the 'Danger Zone' section and click 'Unpublish'.</li>
 <li>Select 'Unpublish' to remove it from public view while you make updates.</li>
 <li>Confirmation appears - your design is now private but can be republished anytime.</li>
</ol>

How to Unpublish Framer Site

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5058ab56e05a00ffcf77/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Find your project in the dashboard, then click the three-dot menu to reveal your options.</li>
 <li>Click 'Open Settings' to access the advanced configuration panel where you can customize how your project behaves.</li>
 <li>Scroll down to the 'Danger Zone' section (sounds dramatic, but it's just project management) and click 'Unpublish'.</li>
 <li>Click 'Unpublish' to take your design offline while you work on those secret updates.</li>
 <li>Done! Your design is now private. Don't worry—you can republish it whenever you're ready to share again.</li>
</ol>

How to Unpublish in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5114ab56e05a00ffdc36/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Access the 'Assets' panel where all your design resources are organized.</li>
 <li>Access the 'Insert' menu to add new elements to your design canvas.</li>
 <li>Go to the 'Elements' section and select 'Interactive'. </li>
 <li>Choose 'Carousel' to utilize Smart Components that adapt intelligently to user interaction.</li>
 <li>Set up page transitions that create seamless navigation experiences</li>
 <li>Select a component and drag it into your canvas and configure images, slides, etc., in the properties panel.</li>
 <li>Preview your design in real-time to see how it will appear across devices.</li>
 <li>Adjust your layout settings to ensure responsive designs across devices.</li>
 <li>Configure interactive prototyping options for realistic user flows.</li>
</ol>

How to Use Carousel in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5181ab56e05a00ffe507/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Access the 'Insert' menu to add new elements to your design.</li>
 <li>Launch 'AI Wireframer' to instantly generate professional layouts.</li>
 <li>You’ll get prompted to enter a brief description.</li>
 <li>Click on the arrow icon to submit and generate your AI-powered portfolio design with one click.</li>
 <li>Watch as AI processes your request and generates creative solutions.</li>
 <li>Preview your portfolio design as it takes shape.</li>
</ol>

How to Use Framer AI

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5183ab56e05a00ffe535/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start a fresh project and unleash your creativity.</li>
 <li>Discover pre-built website components to accelerate your design.</li>
 <li>Click 'Browse All...' to access the complete template collection for more options.</li>
 <li>Select a design style that matches your brand identity.</li>
 <li>Choose from professionally designed website templates.</li>
 <li>Begin designing with Framer's powerful free tools by clicking 'Use for free'.</li>
 <li>Click 'Confirm' to confirm your selection to begin customizing.</li>
 <li>Click on any text block and start typing.</li>
 <li>Click on images and use the right-hand panel to upload new ones or choose from the media library.</li>
 <li>Drag and drop elements or use layout settings to adjust spacing, alignment, etc.</li>
 <li>Delete sections you don’t need by selecting them.</li>
 <li>Examine template features and responsive behavior</li>
 <li>Click 'Publish' when you're ready to go live.</li>
</ol>

How to Use Framer Templates

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a527eab56e05a00fffb00/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer Project.</li>
 <li>Click on the 'Insert' tab. </li>
 <li>Search and choose 'Ticker' in the element tab.</li>
 <li>Adjust the size of your ticker in the canvas.</li>
 <li>Move the images outside of your frame. </li>
 <li>Go to the 'Ticker' section and click 'Children'. </li>
 <li>Drag the three dots on the right side of the ticker to the content you want to connect.&nbsp;</li>
 <li>You can adjust the width of the ticker to fill the frame, and explore various properties for customizing the animation, speed, and direction.&nbsp;</li>
 <li>The ticker can be customized further with features like slowing down on hover, making it highly interactive.&nbsp;</li>
 <li>Click 'Publish' to make your project live. </li>
</ol>

How to Use Ticker in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a52c9ab56e05a00000134/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your Framer project.</li>
 <li>Resize the container.</li>
 <li>Go to the 'Size' section and select 'Grow'.</li>
 <li>Click on the box with four corners.</li>
 <li>Click and drag the text box edges to make it narrower or wider.</li>
 <li>By following these steps, you can easily wrap text in Framer.</li>
</ol>

How to Wrap Text in Framer

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a52e5ab56e05a00000365/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Let's start by opening your Framer project.</li>
 <li>Click the 'Plugins' menu to access your HubSpot data right within your Framer projects.</li>
 <li>Select 'Browse All...' to view available integrations.</li>
 <li>Select 'HubSpot' to connect your account and enhance your design capabilities.</li>
 <li>Access your HubSpot account by clicking 'Log In'.</li>
 <li>Connect your HubSpot account to bring your marketing data into your design workflow.</li>
 <li>Select your HubSpot account to access your designs and templates.</li>
 <li>Click 'Choose account' to connect to Framer.</li>
 <li>Click 'Connect app' to establish the link between Framer and HubSpot. </li>
 <li>Authentication complete! Head back to Framer to continue your design work.</li>
</ol>

LIVEDEMO

Showing tutorials from framer category

Tutorials