{"id":78154,"date":"2025-03-19T09:26:25","date_gmt":"2025-03-19T09:26:25","guid":{"rendered":"https:\/\/fahimai.com\/?p=78154"},"modified":"2026-03-03T22:31:36","modified_gmt":"2026-03-03T19:31:36","slug":"how-to-use-framer","status":"publish","type":"post","link":"https:\/\/www.fahimai.com\/fr\/how-to-use-framer","title":{"rendered":"How to Use Framer: A Beginner&#8217;s Guide in 2026"},"content":{"rendered":"\n<h2 id='quick-start'  id=\"boomdevs_1\" class=\"wp-block-heading\">Quick Start<\/h2>\n\n\n\n<div class=\"wp-block-group quick-start-logo is-layout-flow wp-block-group-is-layout-flow\"><style>.kb-image72232_9985b7-4f.kb-image-is-ratio-size, .kb-image72232_9985b7-4f .kb-image-is-ratio-size{max-width:350px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image72232_9985b7-4f.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image72232_9985b7-4f .kb-image-is-ratio-size{align-self:unset;}.kb-image72232_9985b7-4f figure{max-width:350px;}.kb-image72232_9985b7-4f .image-is-svg, .kb-image72232_9985b7-4f .image-is-svg img{width:100%;}.kb-image72232_9985b7-4f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image72232_9985b7-4f\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA.png\" alt=\"Framer CTA\" class=\"kb-img wp-image-53863\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA.png 800w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA-480x480.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure><\/div>\n<\/div>\n\n\n\n<p><strong>This guide covers every Framer feature:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#getting-started-with-framer\">Getting Started<\/a> \u2014 Create your account and learn the interface<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-automated-seo\">How to Use Automated SEO<\/a> \u2014 Rank higher on Google without plugins<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-design\">How to Use Design<\/a> \u2014 Build pages with drag-and-drop tools<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-advanced-analytics\">How to Use Advanced Analytics<\/a> \u2014 Track visitors and site performance<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-collaborate\">How to Use Collaborate<\/a> \u2014 Work with your team in real time<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-cms\">How to Use CMS<\/a> \u2014 Manage blog posts and dynamic content<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-animations\">How to Use Animations<\/a> \u2014 Add smooth motion effects to any element<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-ai-tool\">How to Use AI Tool<\/a> \u2014 Generate pages and layouts with a text prompt<\/li>\n<\/ul>\n\n\n\n<p><strong>Time needed:<\/strong> 5 minutes per feature<\/p>\n\n\n\n<p><strong>Also in this guide:<\/strong> <a href=\"#framer-pro-tips-and-shortcuts\">Pro Tips<\/a> | <a href=\"#framer-common-mistakes-to-avoid\">Common Mistakes<\/a> | <a href=\"#framer-troubleshooting\">Troubleshooting<\/a> | <a href=\"#framer-pricing\">Pricing<\/a> | <a href=\"#framer-vs-alternatives\">Alternatives<\/a><\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Why Trust This Guide<\/p>\n\n\n\n<p>I&#8217;ve used Framer for over a year and tested every feature covered here. This how to use framer tutorial comes from real hands-on experience \u2014 not marketing fluff or vendor screenshots.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"420\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/03\/Fahim-AI-5-19.png\" alt=\"How to Use Framer\" class=\"wp-image-78155\" title=\"\" srcset=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/03\/Fahim-AI-5-19.png 800w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/03\/Fahim-AI-5-19-480x252.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure>\n\n\n\n<p>Framer is one of the most powerful no-code website builders available today.<\/p>\n\n\n\n<p>But most users only scratch the surface of what it can do.<\/p>\n\n\n\n<p>This guide shows you how to use every major feature.<\/p>\n\n\n\n<p>Step by step, with screenshots and pro tips.<\/p>\n\n\n\n<h2 id='framer-tutorial'  id=\"boomdevs_2\" class=\"wp-block-heading\">Framer Tutorial<\/h2>\n\n\n\n<p>This complete Framer tutorial walks you through every feature step by step, from initial setup to advanced tips that will make you a power user.<\/p>\n\n\n\n<div class=\"wp-block-group cta-box-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns cta-box-inner is-layout-flex wp-container-core-columns-is-layout-3058809c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column cta-box-left is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group cta-box-logo is-layout-flow wp-block-group-is-layout-flow\"><style>.kb-image72232_9985b7-4f.kb-image-is-ratio-size, .kb-image72232_9985b7-4f .kb-image-is-ratio-size{max-width:350px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image72232_9985b7-4f.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image72232_9985b7-4f .kb-image-is-ratio-size{align-self:unset;}.kb-image72232_9985b7-4f figure{max-width:350px;}.kb-image72232_9985b7-4f .image-is-svg, .kb-image72232_9985b7-4f .image-is-svg img{width:100%;}.kb-image72232_9985b7-4f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image72232_9985b7-4f\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA.png\" alt=\"Framer CTA\" class=\"kb-img wp-image-53863\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA.png 800w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA-480x480.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column cta-box-right is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"cta-box-title\">Framer<\/p>\n\n\n\n<p class=\"cta-box-description\">Design and publish stunning websites without writing code. Framer gives you a visual editor, built-in CMS, and AI-powered page generation. Start building for free today.<\/p>\n\n\n\n<div class=\"wp-block-group cta-box-buttons is-layout-flow wp-block-group-is-layout-flow\">\n<p><a class=\"cta-btn cta-btn-primary\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\">TRY FRAMER NOW \u2192<\/a><\/p>\n\n\n\n<p><a class=\"cta-btn cta-btn-secondary\" href=\"https:\/\/www.fahimai.com\/framer\">READ FULL REVIEW \u2192<\/a><\/p>\n\n\n\n<p><a class=\"cta-btn cta-btn-secondary\" href=\"https:\/\/www.fahimai.com\/framer-alternatives\">FRAMER ALTERNATIVES \u2192<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 id='getting-started-with-framer'  id=\"boomdevs_3\" class=\"wp-block-heading\" id=\"getting-started-with-framer\">Getting Started with Framer<\/h3>\n\n\n\n<p>Before using any feature, complete this one-time setup.<\/p>\n\n\n\n<p>It takes about 3 minutes.<\/p>\n\n\n\n<h4 id='step-1-create-your-account'  id=\"boomdevs_4\" class=\"wp-block-heading\">Step 1: Create Your Account<\/h4>\n\n\n\n<p>Go to framer.com and click &#8220;Start for Free.&#8221;<\/p>\n\n\n\n<p>Sign up with your Google account or email.<\/p>\n\n\n\n<p>No credit card is needed for the free plan.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a welcome screen after signing in.<\/p>\n\n\n\n<h4 id='step-2-open-the-editor'  id=\"boomdevs_5\" class=\"wp-block-heading\">Step 2: Open the Editor<\/h4>\n\n\n\n<p>Click &#8220;New Project&#8221; from your dashboard.<\/p>\n\n\n\n<p>Choose a blank canvas or pick a template to start.<\/p>\n\n\n\n<p>Here&#8217;s what the editor looks like:<\/p>\n\n\n<style>.kb-image53859_cc9158-7d .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_cc9158-7d size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"347\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-top-benefits.png\" alt=\"Framer top benefits\" class=\"kb-img wp-image-53869\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-top-benefits.png 956w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-top-benefits-480x174.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 956px, 100vw\" \/><\/figure>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see the toolbar at the top and layers panel on the left.<\/p>\n\n\n\n<h4 id='step-3-learn-the-interface'  id=\"boomdevs_6\" class=\"wp-block-heading\">Step 3: Learn the Interface<\/h4>\n\n\n\n<p>The toolbar holds your main tools: frames, <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-text-generator\" title=\"text\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48002\" target=\"_blank\" rel=\"noopener\">text<\/a>, layouts, and CMS.<\/p>\n\n\n\n<p>The left sidebar shows pages, layers, and assets.<\/p>\n\n\n\n<p>The right panel controls properties like size, color, and spacing.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Done:<\/strong> You&#8217;re ready to use any feature below.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h3 id='how-to-use-framer-automated-seo'  id=\"boomdevs_7\" class=\"wp-block-heading\" id=\"how-to-use-framer-automated-seo\">How to Use Framer Automated SEO<\/h3>\n\n\n\n<p><strong>Automated SEO<\/strong> lets you rank higher on search engines without any plugins.<\/p>\n\n\n\n<p>Here&#8217;s how to use it step by step.<\/p>\n\n\n\n<p>Watch Automated SEO in action:<\/p>\n\n\n<!--presto-player:video_id=3248--><figure class=\"wp-block-video presto-block-video  presto-provider-youtube\" style=\"--plyr-color-main: var(--presto-player-highlight-color, #00b3ff); --presto-player-logo-width: 150px; \">\n\t<presto-player \n\t\tpreset='{&quot;id&quot;:1,&quot;name&quot;:&quot;Default&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;icon&quot;:&quot;format-video&quot;,&quot;skin&quot;:&quot;modern&quot;,&quot;play-large&quot;:true,&quot;rewind&quot;:true,&quot;play&quot;:true,&quot;fast-forward&quot;:true,&quot;progress&quot;:true,&quot;current-time&quot;:true,&quot;mute&quot;:true,&quot;volume&quot;:true,&quot;speed&quot;:false,&quot;pip&quot;:false,&quot;fullscreen&quot;:true,&quot;captions&quot;:false,&quot;reset_on_end&quot;:true,&quot;auto_hide&quot;:true,&quot;show_time_elapsed&quot;:false,&quot;captions_enabled&quot;:false,&quot;save_player_position&quot;:true,&quot;sticky_scroll&quot;:false,&quot;sticky_scroll_position&quot;:&quot;bottom right&quot;,&quot;on_video_end&quot;:&quot;select&quot;,&quot;play_video_viewport&quot;:false,&quot;hide_youtube&quot;:false,&quot;lazy_load_youtube&quot;:false,&quot;hide_logo&quot;:false,&quot;border_radius&quot;:0,&quot;caption_style&quot;:&quot;&quot;,&quot;caption_background&quot;:&quot;&quot;,&quot;is_locked&quot;:true,&quot;cta&quot;:[&quot;&quot;],&quot;watermark&quot;:[&quot;&quot;],&quot;search&quot;:[&quot;&quot;],&quot;email_collection&quot;:[&quot;&quot;],&quot;action_bar&quot;:[&quot;&quot;],&quot;created_by&quot;:2,&quot;created_at&quot;:&quot;2024-03-02 00:00:21&quot;,&quot;updated_at&quot;:&quot;2024-03-02 00:00:21&quot;,&quot;deleted_at&quot;:&quot;&quot;}'\n\t\tbranding='{&quot;logo&quot;:&quot;&quot;,&quot;color&quot;:&quot;#00b3ff&quot;,&quot;logo_width&quot;:150,&quot;player_css&quot;:&quot;&quot;}'\n\t\tchapters='[]'\n\t\toverlays='[]'\n\t\ttracks='[]'\n\t\tblock-attributes='{&quot;playsInline&quot;:true,&quot;id&quot;:3248,&quot;src&quot;:&quot;https:\\\/\\\/youtu.be\\\/OC5dyLTo7ig?si=pJ3jisotOwf8uN6Y&quot;,&quot;preset&quot;:1,&quot;video_id&quot;:&quot;OC5dyLTo7ig&quot;,&quot;visibility&quot;:&quot;public&quot;,&quot;color&quot;:&quot;#00b3ff&quot;,&quot;mutedPreview&quot;:{&quot;enabled&quot;:false,&quot;captions&quot;:false},&quot;mutedOverlay&quot;:{&quot;enabled&quot;:false,&quot;src&quot;:&quot;&quot;,&quot;width&quot;:200,&quot;focalPoint&quot;:{&quot;x&quot;:0.5,&quot;y&quot;:0.5}},&quot;mutedOverlayType&quot;:&quot;text&quot;,&quot;mutedOverlayText&quot;:&quot;Click to play&quot;,&quot;mutedOverlayImageWidth&quot;:200,&quot;chapters&quot;:[],&quot;overlays&quot;:[],&quot;tracks&quot;:[],&quot;FlyingPress&quot;:{&quot;lazyRender&quot;:false},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;title&quot;:&quot;SEO and Accessibility in Framer (Fundamentals Lesson 26)&quot;}'\n\t\tanalytics=''\n\t\tautomations\t\tprovider='youtube'\n\t\t\t\tid=\"presto-player-1\"\n\t\tsrc=\"\/\/www.youtube.com\/embed\/OC5dyLTo7ig?iv_load_policy=3&amp;modestbranding=1&amp;playinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1\"\n\t\tmedia-title=\"SEO and Accessibility in Framer (Fundamentals Lesson 26)\"\n\t\tcss=\"\"\n\t\tclass=\"presto-video-id-3248 presto-preset-id-1 skin-modern\"\n\t\tskin=\"modern\" \n\t\ticon-url=\"https:\/\/www.fahimai.com\/wp-content\/plugins\/presto-player\/img\/sprite.svg\" \n\t\tpreload=\"\" \n\t\tposter=\"\"\n\t\tyoutube=\"{&quot;noCookie&quot;:false,&quot;channelId&quot;:&quot;&quot;,&quot;show_count&quot;:false}\"\n\t\tprovider-video-id=\"OC5dyLTo7ig\"\n\t\tvideo-id=\"3248\"\n\t\t\t\tvideo-attributes='{}'\n\t\tplaysinline\t\t\t\t>\n\t\t\n    <div class=\"presto-iframe-fallback-container\">\n        <iframe style=\"width: 100%\" title=\"Youtube Video\" class=\"presto-fallback-iframe\" id=\"presto-iframe-fallback-1\" data-src=\"https:\/\/www.youtube.com\/embed\/OC5dyLTo7ig?iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1\" allowfullscreen allowtransparency allow=\"autoplay\"><\/iframe>\n    <\/div>\n\n\t<\/presto-player>\n<\/figure>\n\n\n<p>Now let&#8217;s break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-page-settings'  id=\"boomdevs_8\" class=\"wp-block-heading\">Step 1: Open Page Settings<\/h4>\n\n\n\n<p>Click on any page in the left sidebar.<\/p>\n\n\n\n<p>Select the gear icon to open page settings.<\/p>\n\n\n\n<h4 id='step-2-edit-meta-title-and-description'  id=\"boomdevs_9\" class=\"wp-block-heading\">Step 2: Edit Meta Title and Description<\/h4>\n\n\n\n<p>Type your target keyword in the &#8220;Title&#8221; field.<\/p>\n\n\n\n<p>Write a clear meta description under 160 characters.<\/p>\n\n\n\n<p>Framer auto-generates your sitemap and robots.txt file.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a preview of how your page looks in Google.<\/p>\n\n\n\n<h4 id='step-3-add-alt-text-to-images'  id=\"boomdevs_10\" class=\"wp-block-heading\">Step 3: Add Alt Text to Images<\/h4>\n\n\n\n<p>Select any image on your page.<\/p>\n\n\n\n<p>In the right panel, find the &#8220;Alt Text&#8221; field and add a description.<\/p>\n\n\n\n<p>Use the Accessibility panel to set correct heading tags (H1, H2, H3).<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your page now has proper SEO metadata, a sitemap, and alt text.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Each page should have exactly one H1 tag with your main keyword. Use the Accessibility panel to check this.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h3 id='how-to-use-framer-design'  id=\"boomdevs_11\" class=\"wp-block-heading\" id=\"how-to-use-framer-design\">How to Use Framer Design<\/h3>\n\n\n\n<p><strong>Design<\/strong> lets you build beautiful pages with a drag-and-drop visual editor.<\/p>\n\n\n\n<p>Here&#8217;s how to use it step by step.<\/p>\n\n\n\n<p>Watch Design in action:<\/p>\n\n\n<style>.kb-image53859_28fa10-50 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_28fa10-50 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"809\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/design-1024x809.png\" alt=\"framer design\" class=\"kb-img wp-image-181842\" title=\"\" srcset=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/design-980x774.png 980w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/design-480x379.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p>Now let&#8217;s break down each step.<\/p>\n\n\n\n<h4 id='step-1-add-a-frame'  id=\"boomdevs_12\" class=\"wp-block-heading\">Step 1: Add a Frame<\/h4>\n\n\n\n<p>Press &#8220;F&#8221; on your keyboard to select the Frame tool.<\/p>\n\n\n\n<p>Draw a frame on the canvas to create a new section.<\/p>\n\n\n\n<h4 id='step-2-add-elements-to-your-frame'  id=\"boomdevs_13\" class=\"wp-block-heading\">Step 2: Add Elements to Your Frame<\/h4>\n\n\n\n<p>Press &#8220;T&#8221; for text, drag images from your files, or add buttons.<\/p>\n\n\n\n<p>Use the right panel to adjust colors, fonts, and spacing.<\/p>\n\n\n\n<p>Set layout direction to &#8220;Vertical&#8221; or &#8220;Horizontal&#8221; for auto-arrangement.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> Your frame should show elements arranged inside it.<\/p>\n\n\n\n<h4 id='step-3-set-breakpoints-for-responsive-design'  id=\"boomdevs_14\" class=\"wp-block-heading\">Step 3: Set Breakpoints for Responsive Design<\/h4>\n\n\n\n<p>Click the device icons at the top to switch between desktop, tablet, and phone.<\/p>\n\n\n\n<p>Adjust element sizes and positions for each screen size.<\/p>\n\n\n\n<p>Framer auto-adapts your layout, but you can fine-tune each breakpoint.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your page now looks great on desktop, tablet, and mobile.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use Stacks to manage spacing and alignment automatically. Press &#8220;S&#8221; to create a Stack, and elements inside will space evenly.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h3 id='how-to-use-framer-advanced-analytics'  id=\"boomdevs_15\" class=\"wp-block-heading\" id=\"how-to-use-framer-advanced-analytics\">How to Use Framer Advanced Analytics<\/h3>\n\n\n\n<p><strong>Advanced Analytics<\/strong> lets you track visitors and measure site performance.<\/p>\n\n\n\n<p>Here&#8217;s how to use it step by step.<\/p>\n\n\n\n<p>Watch Advanced Analytics in action:<\/p>\n\n\n<style>.kb-image53859_0c64d4-d0 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_0c64d4-d0 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/Advanced-Analytics-1024x544.png\" alt=\"framer Advanced Analytics\" class=\"kb-img wp-image-181840\" title=\"\" srcset=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/Advanced-Analytics-980x520.png 980w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/Advanced-Analytics-480x255.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p>Now let&#8217;s break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-your-site-settings'  id=\"boomdevs_16\" class=\"wp-block-heading\">Step 1: Open Your Site Settings<\/h4>\n\n\n\n<p>Click the gear icon in the top-right corner of the editor.<\/p>\n\n\n\n<p>Select &#8220;Analytics&#8221; from the settings menu.<\/p>\n\n\n\n<h4 id='step-2-view-your-traffic-data'  id=\"boomdevs_17\" class=\"wp-block-heading\">Step 2: View Your Traffic Data<\/h4>\n\n\n\n<p>Check page views, unique visitors, and top-performing pages.<\/p>\n\n\n\n<p>Framer&#8217;s built-in analytics are GDPR-compliant by default.<\/p>\n\n\n\n<p>No extra cookie consent banners needed.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a dashboard with traffic metrics and page <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/alaya-ai\" title=\"data\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47993\" target=\"_blank\" rel=\"noopener\">data<\/a>.<\/p>\n\n\n\n<h4 id='step-3-connect-third-party-analytics'  id=\"boomdevs_18\" class=\"wp-block-heading\">Step 3: Connect Third-Party Analytics<\/h4>\n\n\n\n<p>Paste your Google Analytics or Plausible tracking code in the &#8220;Custom Code&#8221; section.<\/p>\n\n\n\n<p>This lets you combine Framer data with your other tools.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You can now track visitors and see which pages perform best.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Check analytics weekly and update your lowest-traffic pages first. Small tweaks to titles and images can double your clicks.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h3 id='how-to-use-framer-collaborate'  id=\"boomdevs_19\" class=\"wp-block-heading\" id=\"how-to-use-framer-collaborate\">How to Use Framer Collaborate<\/h3>\n\n\n\n<p><strong>Collaborate<\/strong> lets you work with your team on the same project in real time.<\/p>\n\n\n\n<p>Here&#8217;s how to use it step by step.<\/p>\n\n\n\n<p>Watch Collaborate in action:<\/p>\n\n\n<style>.kb-image53859_45485a-5e .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_45485a-5e size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"760\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/collaborate-1024x760.png\" alt=\"framer collaborate\" class=\"kb-img wp-image-181841\" title=\"\" srcset=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/collaborate-980x728.png 980w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/collaborate-480x356.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p>Now let&#8217;s break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-project-settings'  id=\"boomdevs_20\" class=\"wp-block-heading\">Step 1: Open Project Settings<\/h4>\n\n\n\n<p>Click the &#8220;Share&#8221; button in the top-right corner of the editor.<\/p>\n\n\n\n<p>Choose &#8220;Invite Members&#8221; from the dropdown.<\/p>\n\n\n\n<h4 id='step-2-invite-team-members'  id=\"boomdevs_21\" class=\"wp-block-heading\">Step 2: Invite Team Members<\/h4>\n\n\n\n<p>Enter your teammate&#8217;s email address.<\/p>\n\n\n\n<p>Set their role as Editor or Viewer.<\/p>\n\n\n\n<p>Click &#8220;Send Invitation&#8221; to share access.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> Your teammate should receive an email invitation.<\/p>\n\n\n\n<h4 id='step-3-edit-together-in-real-time'  id=\"boomdevs_22\" class=\"wp-block-heading\">Step 3: Edit Together in Real Time<\/h4>\n\n\n\n<p>Once they accept, you&#8217;ll see their cursor on the canvas.<\/p>\n\n\n\n<p>Changes save automatically for everyone.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your team can now design and edit the same site at the same time.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use &#8220;Viewer&#8221; roles for clients who only need to review. This prevents accidental changes to your design.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h3 id='how-to-use-framer-cms'  id=\"boomdevs_23\" class=\"wp-block-heading\" id=\"how-to-use-framer-cms\">How to Use Framer CMS<\/h3>\n\n\n\n<p><strong>CMS<\/strong> lets you manage blog posts, portfolios, and dynamic content.<\/p>\n\n\n\n<p>Here&#8217;s how to use it step by step.<\/p>\n\n\n\n<p>Watch CMS in action:<\/p>\n\n\n<style>.kb-image53859_ba54c6-1a .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_ba54c6-1a size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CMS.png\" alt=\"Framer CMS\" class=\"kb-img wp-image-53862\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CMS.png 1024w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CMS-980x487.png 980w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CMS-480x239.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p>Now let&#8217;s break down each step.<\/p>\n\n\n\n<h4 id='step-1-create-a-cms-collection'  id=\"boomdevs_24\" class=\"wp-block-heading\">Step 1: Create a CMS Collection<\/h4>\n\n\n\n<p>Click the &#8220;CMS&#8221; button in the top toolbar.<\/p>\n\n\n\n<p>Select &#8220;New Collection&#8221; and give it a name like &#8220;Blog Posts.&#8221;<\/p>\n\n\n\n<h4 id='step-2-add-fields-and-content'  id=\"boomdevs_25\" class=\"wp-block-heading\">Step 2: Add Fields and Content<\/h4>\n\n\n\n<p>Add fields like Title, Image, Date, and Body text.<\/p>\n\n\n\n<p>Click &#8220;New Item&#8221; to create your first entry.<\/p>\n\n\n\n<p>Fill in the fields with your content.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see your item listed in the CMS collection panel.<\/p>\n\n\n\n<h4 id='step-3-connect-cms-to-a-page'  id=\"boomdevs_26\" class=\"wp-block-heading\">Step 3: Connect CMS to a Page<\/h4>\n\n\n\n<p>Create a new page and link it to your CMS collection.<\/p>\n\n\n\n<p>Drag CMS fields onto your page to display dynamic content.<\/p>\n\n\n\n<p>Framer auto-generates a page for each CMS item.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You now have a dynamic blog or portfolio that updates automatically.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use the Relational CMS feature on Pro plans to link collections together. For example, link authors to blog posts.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h3 id='how-to-use-framer-animations'  id=\"boomdevs_27\" class=\"wp-block-heading\" id=\"how-to-use-framer-animations\">How to Use Framer Animations<\/h3>\n\n\n\n<p><strong>Animations<\/strong> lets you add smooth motion effects to any element on your site.<\/p>\n\n\n\n<p>Here&#8217;s how to use it step by step.<\/p>\n\n\n\n<p>Watch Animations in action:<\/p>\n\n\n<style>.kb-image53859_c90f79-f1 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_c90f79-f1 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"515\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-Animations.png\" alt=\"Framer Animations\" class=\"kb-img wp-image-53861\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-Animations.png 1024w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-Animations-980x493.png 980w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-Animations-480x241.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p>Now let&#8217;s break down each step.<\/p>\n\n\n\n<h4 id='step-1-select-an-element'  id=\"boomdevs_28\" class=\"wp-block-heading\">Step 1: Select an Element<\/h4>\n\n\n\n<p>Click on any frame, text, or image on your canvas.<\/p>\n\n\n\n<p>Open the &#8220;Animations&#8221; section in the right panel.<\/p>\n\n\n\n<h4 id='step-2-choose-an-animation-type'  id=\"boomdevs_29\" class=\"wp-block-heading\">Step 2: Choose an Animation Type<\/h4>\n\n\n\n<p>Pick from Appear, Hover, Scroll, or custom Variants.<\/p>\n\n\n\n<p>Set properties like opacity, scale, position, and rotation.<\/p>\n\n\n\n<p>Adjust timing with duration, delay, and easing curves.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a blue animation indicator on the selected element.<\/p>\n\n\n\n<h4 id='step-3-preview-your-animation'  id=\"boomdevs_30\" class=\"wp-block-heading\">Step 3: Preview Your Animation<\/h4>\n\n\n\n<p>Press Cmd + P (or Ctrl + P on Windows) to open Preview mode.<\/p>\n\n\n\n<p>Scroll or interact with the page to trigger your animation.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your elements now animate smoothly when visitors scroll or hover.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use scroll-triggered animations sparingly. Too many moving elements slow load times and distract visitors.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h3 id='how-to-use-framer-ai-tool'  id=\"boomdevs_31\" class=\"wp-block-heading\" id=\"how-to-use-framer-ai-tool\">How to Use Framer AI Tool<\/h3>\n\n\n\n<p><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/ai-applications-for-small-business\" title=\"AI Tool\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47995\" target=\"_blank\" rel=\"noopener\">AI Tool<\/a><\/strong> lets you generate full page layouts from a simple text prompt.<\/p>\n\n\n\n<p>Here&#8217;s how to use it step by step.<\/p>\n\n\n\n<p>Watch AI Tool in action:<\/p>\n\n\n<style>.kb-image53859_8abf1e-e7 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_8abf1e-e7 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/framer-AI-tool.png\" alt=\"framer AI tool\" class=\"kb-img wp-image-53860\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/framer-AI-tool.png 1024w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/framer-AI-tool-980x501.png 980w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/framer-AI-tool-480x246.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p>Now let&#8217;s break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-the-ai-generator'  id=\"boomdevs_32\" class=\"wp-block-heading\">Step 1: Open the AI Generator<\/h4>\n\n\n\n<p>Click &#8220;Quick Actions&#8221; in the toolbar or press Cmd + K.<\/p>\n\n\n\n<p>Select &#8220;Generate Page&#8221; from the menu.<\/p>\n\n\n\n<h4 id='step-2-describe-your-page'  id=\"boomdevs_33\" class=\"wp-block-heading\">Step 2: Describe Your Page<\/h4>\n\n\n\n<p>Type a prompt like &#8220;Landing page for a SaaS startup with pricing table.&#8221;<\/p>\n\n\n\n<p>Be specific about colors, sections, and content you want.<\/p>\n\n\n\n<p>Framer generates a full responsive page in seconds.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a complete page layout on your canvas.<\/p>\n\n\n\n<h4 id='step-3-customize-the-ai-output'  id=\"boomdevs_34\" class=\"wp-block-heading\">Step 3: Customize the AI Output<\/h4>\n\n\n\n<p>Click on any section to edit text, images, or layout.<\/p>\n\n\n\n<p>Rearrange sections by dragging them in the layers panel.<\/p>\n\n\n\n<p>Replace AI placeholder content with your real copy and brand assets.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You now have a professional page ready to publish in minutes.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use AI to generate a quick wireframe, then redesign each section manually. This gives you speed and full creative control.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='framer-pro-tips-and-shortcuts'  id=\"boomdevs_35\" class=\"wp-block-heading\" id=\"framer-pro-tips-and-shortcuts\">Framer Pro Tips and Shortcuts<\/h2>\n\n\n\n<p>After testing Framer for over a year, here are my best tips.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Keyboard Shortcuts<\/p>\n\n\n\n<figure class=\"wp-block-table fahimai-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Action<\/th><th>Shortcut<\/th><\/tr><\/thead><tbody><tr><td>Add a Frame<\/td><td>F<\/td><\/tr><tr><td>Add Text<\/td><td>T<\/td><\/tr><tr><td>Add Stack<\/td><td>S<\/td><\/tr><tr><td>Add Link<\/td><td>L<\/td><\/tr><tr><td>Duplicate Element<\/td><td>Cmd + D<\/td><\/tr><tr><td>Preview Site<\/td><td>Cmd + P<\/td><\/tr><tr><td>Zoom to Fit<\/td><td>Cmd + 1<\/td><\/tr><tr><td>Group Elements<\/td><td>Cmd + G<\/td><\/tr><tr><td>Create Component<\/td><td>Cmd + K<\/td><\/tr><tr><td>Copy Style<\/td><td>Cmd + Option + C<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Hidden Features Most People Miss<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design Pages:<\/strong> Use Framer as a free design tool without publishing. Create unlimited drafts on any plan.<\/li>\n\n\n\n<li><strong>Figma Import:<\/strong> Copy designs from Figma and paste directly into Framer. It converts layers into responsive HTML.<\/li>\n\n\n\n<li><strong>On-Page Editing:<\/strong> Edit live pages directly in the browser. Click any text or image on your published site and update it in place.<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='framer-common-mistakes-to-avoid'  id=\"boomdevs_36\" class=\"wp-block-heading\" id=\"framer-common-mistakes-to-avoid\">Framer Common Mistakes to Avoid<\/h2>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #1: Using Absolute Positioning for Everything<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u274c Wrong:<\/strong> Placing every element with fixed pixel positions on the canvas.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Right:<\/strong> Use Stacks and auto-layout. Elements will adjust on all screen sizes.<\/p>\n<\/div>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #2: Ignoring Mobile Breakpoints<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u274c Wrong:<\/strong> Designing only for desktop and hoping mobile looks fine.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Right:<\/strong> Check tablet and phone breakpoints. Adjust font sizes, padding, and stacking order.<\/p>\n<\/div>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #3: Skipping SEO Settings Before Publishing<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u274c Wrong:<\/strong> Publishing a site without adding meta titles, descriptions, or alt text.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Right:<\/strong> Fill in SEO fields for every page before hitting Publish. Use unique titles and descriptions.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='framer-troubleshooting'  id=\"boomdevs_37\" class=\"wp-block-heading\" id=\"framer-troubleshooting\">Framer Troubleshooting<\/h2>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: Site Loads Slowly After Publishing<\/p>\n\n\n\n<p><strong>Cause:<\/strong> Large image files or too many heavy animations on the page.<\/p>\n\n\n\n<p><strong>Fix:<\/strong> Compress images before uploading. Enable &#8220;Lazy&#8221; loading for media below the fold. Remove extra animations.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: Custom Domain Not Connecting<\/p>\n\n\n\n<p><strong>Cause:<\/strong> DNS records are not set up correctly at your domain registrar.<\/p>\n\n\n\n<p><strong>Fix:<\/strong> Go to your domain provider and add the CNAME or A records that Framer gives you. Wait up to 48 hours for changes to take effect.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: CMS Content Not Showing on Published Page<\/p>\n\n\n\n<p><strong>Cause:<\/strong> The CMS collection is not linked to the page template correctly.<\/p>\n\n\n\n<p><strong>Fix:<\/strong> Open the page settings and check that the &#8220;CMS Collection&#8221; field points to the right collection. Re-link any disconnected fields.<\/p>\n\n\n\n<p>\ud83d\udccc <strong>Note:<\/strong> If none of these fix your issue, contact Framer support.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='what-is-framer'  id=\"boomdevs_38\" class=\"wp-block-heading\">What is Framer?<\/h2>\n\n\n\n<p><strong>Framer<\/strong> is a no-code website builder that lets you design and publish sites visually.<\/p>\n\n\n\n<p>Think of it like Figma and WordPress merged into one tool.<\/p>\n\n\n\n<p>Watch this quick overview:<\/p>\n\n\n<!--presto-player:video_id=1294--><figure class=\"wp-block-video presto-block-video  presto-provider-youtube\" style=\"--plyr-color-main: var(--presto-player-highlight-color, #00b3ff); --presto-player-logo-width: 150px; \">\n\t<presto-player \n\t\tpreset='{&quot;id&quot;:5,&quot;name&quot;:&quot;YouTube Optimized&quot;,&quot;slug&quot;:&quot;youtube&quot;,&quot;icon&quot;:&quot;youtube&quot;,&quot;skin&quot;:&quot;modern&quot;,&quot;play-large&quot;:true,&quot;rewind&quot;:true,&quot;play&quot;:true,&quot;fast-forward&quot;:true,&quot;progress&quot;:true,&quot;current-time&quot;:true,&quot;mute&quot;:true,&quot;volume&quot;:true,&quot;speed&quot;:true,&quot;pip&quot;:false,&quot;fullscreen&quot;:true,&quot;captions&quot;:false,&quot;reset_on_end&quot;:true,&quot;auto_hide&quot;:true,&quot;show_time_elapsed&quot;:false,&quot;captions_enabled&quot;:false,&quot;save_player_position&quot;:false,&quot;sticky_scroll&quot;:false,&quot;sticky_scroll_position&quot;:&quot;bottom right&quot;,&quot;on_video_end&quot;:&quot;select&quot;,&quot;play_video_viewport&quot;:false,&quot;hide_youtube&quot;:false,&quot;lazy_load_youtube&quot;:true,&quot;hide_logo&quot;:false,&quot;border_radius&quot;:0,&quot;caption_style&quot;:&quot;&quot;,&quot;caption_background&quot;:&quot;&quot;,&quot;is_locked&quot;:true,&quot;cta&quot;:[&quot;&quot;],&quot;watermark&quot;:[&quot;&quot;],&quot;search&quot;:[&quot;&quot;],&quot;email_collection&quot;:[&quot;&quot;],&quot;created_by&quot;:2,&quot;created_at&quot;:&quot;2024-03-02 00:00:21&quot;,&quot;updated_at&quot;:&quot;2024-03-02 00:00:21&quot;,&quot;deleted_at&quot;:&quot;&quot;}'\n\t\tbranding='{&quot;logo&quot;:&quot;&quot;,&quot;color&quot;:&quot;#00b3ff&quot;,&quot;logo_width&quot;:150,&quot;player_css&quot;:&quot;&quot;}'\n\t\tchapters='[]'\n\t\toverlays='[]'\n\t\ttracks='[]'\n\t\tblock-attributes='{&quot;playsInline&quot;:true,&quot;id&quot;:1294,&quot;src&quot;:&quot;https:\\\/\\\/youtu.be\\\/jkaJ6ghzmk0?si=_xxaMKaoVe65kJS4&quot;,&quot;preset&quot;:5,&quot;video_id&quot;:&quot;jkaJ6ghzmk0&quot;,&quot;visibility&quot;:&quot;public&quot;,&quot;color&quot;:&quot;#00b3ff&quot;,&quot;mutedPreview&quot;:{&quot;enabled&quot;:false,&quot;captions&quot;:false},&quot;mutedOverlay&quot;:{&quot;enabled&quot;:false,&quot;src&quot;:&quot;&quot;,&quot;width&quot;:200,&quot;focalPoint&quot;:{&quot;x&quot;:0.5,&quot;y&quot;:0.5}},&quot;mutedOverlayType&quot;:&quot;text&quot;,&quot;mutedOverlayText&quot;:&quot;Click to play&quot;,&quot;mutedOverlayImageWidth&quot;:200,&quot;chapters&quot;:[],&quot;overlays&quot;:[],&quot;tracks&quot;:[],&quot;FlyingPress&quot;:{&quot;lazyRender&quot;:false},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;title&quot;:&quot;Framer Review - Why We Built Our Website With Framer&quot;}'\n\t\tanalytics=''\n\t\tautomations\t\tprovider='youtube'\n\t\t\t\tid=\"presto-player-2\"\n\t\tsrc=\"\/\/www.youtube.com\/embed\/jkaJ6ghzmk0?iv_load_policy=3&amp;modestbranding=1&amp;playinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1\"\n\t\tmedia-title=\"Framer Review - Why We Built Our Website With Framer\"\n\t\tcss=\"\"\n\t\tclass=\"presto-video-id-1294 presto-preset-id-5 skin-modern\"\n\t\tskin=\"modern\" \n\t\ticon-url=\"https:\/\/www.fahimai.com\/wp-content\/plugins\/presto-player\/img\/sprite.svg\" \n\t\tpreload=\"\" \n\t\tposter=\"\"\n\t\tyoutube=\"{&quot;noCookie&quot;:false,&quot;channelId&quot;:&quot;&quot;,&quot;show_count&quot;:false}\"\n\t\tprovider-video-id=\"jkaJ6ghzmk0\"\n\t\tvideo-id=\"1294\"\n\t\tlazy-load-youtube\t\tvideo-attributes='{}'\n\t\tplaysinline\t\t\t\t>\n\t\t\n\n\t<\/presto-player>\n<\/figure>\n\n\n<p>It includes these key features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Automated SEO:<\/strong> Built-in meta tags, sitemaps, and alt text for better search rankings.<\/li>\n\n\n\n<li><strong>Design:<\/strong> Drag-and-drop editor with frames, stacks, and responsive breakpoints.<\/li>\n\n\n\n<li><strong>Advanced Analytics:<\/strong> GDPR-compliant traffic tracking and page performance data.<\/li>\n\n\n\n<li><strong>Collaborate:<\/strong> Real-time editing with teammates and role-based access.<\/li>\n\n\n\n<li><strong>CMS:<\/strong> Built-in content management for blogs, portfolios, and dynamic pages.<\/li>\n\n\n\n<li><strong>Animations:<\/strong> Scroll-triggered effects, hover states, and custom transitions.<\/li>\n\n\n\n<li><strong>AI Tool:<\/strong> Generate full page layouts from text prompts in seconds.<\/li>\n<\/ul>\n\n\n\n<p>For a full review, see our <a href=\"https:\/\/www.fahimai.com\/framer\">Framer review<\/a>.<\/p>\n\n\n<style>.kb-image53859_7a2134-ed .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_7a2134-ed size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"744\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/homepage-4.png\" alt=\"framer homepage\" class=\"kb-img wp-image-181843\" title=\"\" srcset=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/homepage-4.png 1536w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/homepage-4-1280x620.png 1280w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/homepage-4-980x475.png 980w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/homepage-4-480x233.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1536px, 100vw\" \/><\/figure>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='framer-pricing'  id=\"boomdevs_39\" class=\"wp-block-heading\" id=\"framer-pricing\">Framer Pricing<\/h2>\n\n\n\n<p>Here&#8217;s what Framer costs in 2026:<\/p>\n\n\n\n<figure class=\"wp-block-table fahimai-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Plan<\/th><th>Price<\/th><th>Best For<\/th><\/tr><\/thead><tbody><tr><td>Free<\/td><td>$0<\/td><td>Testing ideas and learning the editor<\/td><\/tr><tr><td>Basic<\/td><td>$10<\/td><td>Personal sites, hobbies, and side projects<\/td><\/tr><tr><td>Pro<\/td><td>$30<\/td><td>Professionals, small teams, and startups<\/td><\/tr><tr><td>Scale<\/td><td>$100<\/td><td>Growing companies with usage-based needs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Free trial:<\/strong> Yes \u2014 the free plan lets you build unlimited projects on a Framer subdomain.<\/p>\n\n\n\n<p><strong>Money-back guarantee:<\/strong> No official refund policy. Cancel anytime before renewal.<\/p>\n\n\n<style>.kb-image53859_3a4185-d1 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_3a4185-d1 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1493\" height=\"830\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/pricing-4.png\" alt=\"framer pricing\" class=\"kb-img wp-image-181844\" title=\"\" srcset=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/pricing-4.png 1493w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/pricing-4-1280x712.png 1280w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/pricing-4-980x545.png 980w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/pricing-4-480x267.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1493px, 100vw\" \/><\/figure>\n\n\n\n<p>\ud83d\udcb0 <strong>Best Value:<\/strong> Pro plan at $30\/month \u2014 it includes staging, relational CMS, multiple locales, and priority support.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='framer-vs-alternatives'  id=\"boomdevs_40\" class=\"wp-block-heading\" id=\"framer-vs-alternatives\">Framer vs Alternatives<\/h2>\n\n\n\n<p>How does Framer compare? Here&#8217;s the competitive landscape:<\/p>\n\n\n\n<figure class=\"wp-block-table fahimai-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Tool<\/th><th>Best For<\/th><th>Price<\/th><th>Rating<\/th><\/tr><\/thead><tbody><tr><td><strong>Framer<\/strong><\/td><td>Designers who want visual freedom<\/td><td>$10\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/gamma-ai\" title=\"Gamma\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48010\" target=\"_blank\" rel=\"noopener\">Gamma<\/a><\/td><td>Quick AI-generated <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-presentation-maker\" title=\"presentations\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47984\" target=\"_blank\" rel=\"noopener\">presentations<\/a> and sites<\/td><td>$0\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/durable-ai\" title=\"Durable\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48007\" target=\"_blank\" rel=\"noopener\">Durable<\/a><\/td><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/bookkeeping-software-for-small-businesses\" title=\"Small business\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47986\" target=\"_blank\" rel=\"noopener\">Small business<\/a> sites built in seconds<\/td><td>$12\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/butternut\" title=\"Butternut\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48011\" target=\"_blank\" rel=\"noopener\">Butternut<\/a> AI<\/td><td>AI-first website creation<\/td><td>$20\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/codedesign\" title=\"CodeDesign\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48009\" target=\"_blank\" rel=\"noopener\">CodeDesign<\/a> AI<\/td><td>Code-free design prototyping<\/td><td>$0\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/siter\" title=\"Siter\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48012\" target=\"_blank\" rel=\"noopener\">Siter<\/a><\/td><td>Simple one-page sites<\/td><td>$0\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/10web\" title=\"10Web\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48004\" target=\"_blank\" rel=\"noopener\">10Web<\/a><\/td><td>WordPress sites with AI<\/td><td>$10\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/pineapple-builder\" title=\"Pineapple Builder\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48000\" target=\"_blank\" rel=\"noopener\">Pineapple Builder<\/a><\/td><td>Solo founders on a budget<\/td><td>$0\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/dorik\" title=\"Dorik\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47999\" target=\"_blank\" rel=\"noopener\">Dorik<\/a><\/td><td>Clean portfolio and <a class=\"wpil_keyword_link\" href=\"https:\/\/www.fahimai.com\/best-ai-tools-for-business\" title=\"business\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48001\">business<\/a> sites<\/td><td>$10.38\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Quick picks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Best overall:<\/strong> Framer \u2014 best design freedom with no-code publishing<\/li>\n\n\n\n<li><strong>Best budget:<\/strong> Siter \u2014 free plan with visual editing<\/li>\n\n\n\n<li><strong>Best for beginners:<\/strong> Durable \u2014 builds a full site in 30 seconds with AI<\/li>\n\n\n\n<li><strong>Best for AI generation:<\/strong> Gamma \u2014 creates entire pages from prompts<\/li>\n<\/ul>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">\ud83c\udfaf <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/framer-alternatives\" title=\"Framer Alternatives\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47996\" target=\"_blank\" rel=\"noopener\">Framer Alternatives<\/a><\/p>\n\n\n\n<p>Looking for Framer alternatives? Here are the top options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\ude80 <strong>Gamma:<\/strong> AI-powered page builder that creates polished presentations and websites from a single prompt. Free plan available.<\/li>\n\n\n\n<li>\ud83d\udcb0 <strong>Durable:<\/strong> Builds a full business website in 30 seconds using AI. Great for service businesses and local shops.<\/li>\n\n\n\n<li>\ud83c\udfa8 <strong>Butternut AI:<\/strong> Generates complete websites with copy and images from a text description. No design skills needed.<\/li>\n\n\n\n<li>\u26a1 <strong>CodeDesign AI:<\/strong> Turns design mockups into working code automatically. Good for developers who want a visual starting point.<\/li>\n\n\n\n<li>\ud83d\udd27 <strong>Siter:<\/strong> Figma-like editor for building simple sites. Free plan includes custom domains on the Solo tier.<\/li>\n\n\n\n<li>\ud83e\udde0 <strong>10Web:<\/strong> AI-powered WordPress site builder with hosting included. Best for users who want WordPress flexibility.<\/li>\n\n\n\n<li>\ud83d\udc76 <strong>Pineapple Builder:<\/strong> Simple <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-website-builder\" title=\"AI website builder\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48003\" target=\"_blank\" rel=\"noopener\">AI website builder<\/a> for solo founders. Free starter plan with basic pages.<\/li>\n\n\n\n<li>\ud83c\udfe2 <strong>Dorik:<\/strong> Clean, modern website builder with white-label options for agencies. Good template selection.<\/li>\n\n\n\n<li>\ud83c\udf1f <strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/typedream\" title=\"Typedream\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48005\" target=\"_blank\" rel=\"noopener\">Typedream<\/a>:<\/strong> Notion-style website builder with a simple block editor. Great for personal sites and portfolios.<\/li>\n\n\n\n<li>\u2b50 <strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/jimdo\" title=\"Jimdo\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48006\" target=\"_blank\" rel=\"noopener\">Jimdo<\/a>:<\/strong> AI-guided website builder for small businesses. Includes online store features and email marketing.<\/li>\n\n\n\n<li>\ud83c\udfaf <strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/b12-ai\" title=\"B12\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48008\" target=\"_blank\" rel=\"noopener\">B12<\/a>:<\/strong> AI-powered platform for professional service firms. Includes scheduling, invoicing, and client intake.<\/li>\n\n\n\n<li>\ud83d\udcbc <strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/appy-pie\" title=\"Appy Pie\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47991\" target=\"_blank\" rel=\"noopener\">Appy Pie<\/a>:<\/strong> No-code app and website builder with drag-and-drop tools. Includes mobile app creation features.<\/li>\n<\/ul>\n\n\n\n<p>For the full list, see our <a href=\"https:\/\/www.fahimai.com\/framer-alternatives\">Framer alternatives<\/a> guide.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">\u2694\ufe0f Framer Compared<\/p>\n\n\n\n<p>Here&#8217;s how Framer stacks up against each competitor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/gamma-vs-framer\" title=\"Framer vs Gamma\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47994\" target=\"_blank\" rel=\"noopener\">Framer vs Gamma<\/a>:<\/strong> Framer gives more design control. Gamma is faster for quick AI-generated pages and slides.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/durable-vs-framer\" title=\"Framer vs Durable\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47983\" target=\"_blank\" rel=\"noopener\">Framer vs Durable<\/a>:<\/strong> Framer wins on customization. Durable wins on speed \u2014 it builds a site in 30 seconds.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/butternut-ai-vs-framer\" title=\"Framer vs Butternut\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47981\" target=\"_blank\" rel=\"noopener\">Framer vs Butternut<\/a> AI:<\/strong> Framer offers more design flexibility. Butternut is better if you want a full AI-built site.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/codedesign-ai-vs-framer\" title=\"Framer vs CodeDesign\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47985\" target=\"_blank\" rel=\"noopener\">Framer vs CodeDesign<\/a> AI:<\/strong> Framer is a complete website builder. CodeDesign focuses on turning designs into code.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/siter-vs-framer\" title=\"Framer vs Siter\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47997\" target=\"_blank\" rel=\"noopener\">Framer vs Siter<\/a>:<\/strong> Framer has a stronger CMS and SEO. Siter has a more familiar Figma-like editing experience.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/10web-vs-framer\" title=\"Framer vs 10Web\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47989\" target=\"_blank\" rel=\"noopener\">Framer vs 10Web<\/a>:<\/strong> Framer is better for design-first users. 10Web is better if you need WordPress and hosting combined.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/pineapple-builder-vs-framer\" title=\"Framer vs Pineapple Builder\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47988\" target=\"_blank\" rel=\"noopener\">Framer vs Pineapple Builder<\/a>:<\/strong> Framer has more features at every tier. Pineapple Builder is simpler for solo founders.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/framer-vs-dorik\" title=\"Framer vs Dorik\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47992\" target=\"_blank\" rel=\"noopener\">Framer vs Dorik<\/a>:<\/strong> Framer has better animations and CMS. Dorik has strong white-label agency features.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/framer-vs-typedream\" title=\"Framer vs Typedream\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47987\" target=\"_blank\" rel=\"noopener\">Framer vs Typedream<\/a>:<\/strong> Framer offers more power for complex sites. Typedream is easier for Notion-style simple pages.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/framer-vs-jimdo\" title=\"Framer vs Jimdo\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47990\" target=\"_blank\" rel=\"noopener\">Framer vs Jimdo<\/a>:<\/strong> Framer wins on design quality. Jimdo wins on built-in e-commerce and email marketing tools.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/framer-vs-b12\" title=\"Framer vs B12\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47998\" target=\"_blank\" rel=\"noopener\">Framer vs B12<\/a>:<\/strong> Framer is better for creative websites. B12 is better for service businesses needing scheduling and invoicing.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/framer-vs-appy-pie\" title=\"Framer vs Appy Pie\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47980\" target=\"_blank\" rel=\"noopener\">Framer vs Appy Pie<\/a>:<\/strong> Framer produces higher-quality websites. Appy Pie covers both apps and websites but with less polish.<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='start-using-framer-now'  id=\"boomdevs_41\" class=\"wp-block-heading\">Start Using Framer Now<\/h2>\n\n\n\n<p>You learned how to use every major Framer feature:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Automated SEO<\/li>\n\n\n\n<li>\u2705 Design<\/li>\n\n\n\n<li>\u2705 Advanced Analytics<\/li>\n\n\n\n<li>\u2705 Collaborate<\/li>\n\n\n\n<li>\u2705 CMS<\/li>\n\n\n\n<li>\u2705 Animations<\/li>\n\n\n\n<li>\u2705 AI Tool<\/li>\n<\/ul>\n\n\n\n<p><strong>Next step:<\/strong> Pick one feature and try it now.<\/p>\n\n\n\n<p>Most people start with the Design editor.<\/p>\n\n\n\n<p>It takes less than 5 minutes.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144087_e518c5-95{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144087_e518c5-95 .kt-button{font-weight:normal;font-style:normal;}.kt-btns144087_e518c5-95 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144087_e518c5-95 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144087_e518c5-95\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144087_ee12ed-0f.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144087_ee12ed-0f kt-btn-size-xlarge kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-true  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/fahimai.com\/get\/framer\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try Framer For free<\/strong><\/span><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_arrow-right kt-btn-icon-side-right\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"\/><\/svg><\/span><\/a><\/div>\n\n\n\n<h2 id='frequently-asked-questions'  id=\"boomdevs_42\" class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">What does Framer do?<\/p>\n\n\n\n<p>Framer is a no-code website builder that lets you design, prototype, and publish responsive websites. You work on a visual canvas and everything you create goes live without needing a developer. It also includes a CMS, <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/local-seo-tools\" title=\"SEO tools\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"47982\" target=\"_blank\" rel=\"noopener\">SEO tools<\/a>, and AI-powered page generation.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Is Framer free or paid?<\/p>\n\n\n\n<p>Framer has a free plan that lets you build unlimited projects on a Framer subdomain. Paid plans start at $10\/month for the Basic tier. You need a paid plan to connect a custom domain and unlock more features like CMS collections and analytics.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Which is better, Figma or Framer?<\/p>\n\n\n\n<p>They serve different purposes. Figma is a design tool for creating mockups and prototypes. Framer is a website builder that also has design tools. If you want to design AND publish a live website, Framer is the better choice. If you only need to create UI designs, Figma works well.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Is Framer similar to Wix?<\/p>\n\n\n\n<p>Both are website builders, but they target different users. Wix is built for beginners who want a simple drag-and-drop experience. Framer is built for designers who want more creative control, better animations, and a Figma-like editing experience. Framer produces cleaner code and faster sites.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Can I build a website in Framer?<\/p>\n\n\n\n<p>Yes. Framer is built for exactly that. You can create landing pages, portfolios, business sites, blogs, and more. Start from a blank canvas, use a template, or let AI generate a page. Then customize it and hit Publish. Framer handles hosting and SSL for you.<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n\n{\n\n  \"@context\": \"https:\/\/schema.org\",\n\n  \"@graph\": [\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-getting-started\",\n\n      \"name\": \"How to Get Started with Framer\",\n\n      \"description\": \"Set up your Framer account and learn the interface\",\n\n      \"totalTime\": \"PT3M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Create Your Account\", \"text\": \"Go to framer.com, click Start for Free, and sign up with Google or email\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open the Editor\", \"text\": \"Click New Project and choose a blank canvas or template\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Learn the Interface\", \"text\": \"Explore the toolbar, left sidebar for pages and layers, and right panel for properties\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-automated-seo\",\n\n      \"name\": \"How to Use Framer Automated SEO\",\n\n      \"description\": \"Rank higher on search engines without any plugins\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open Page Settings\", \"text\": \"Click on any page in the left sidebar and select the gear icon\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Edit Meta Title and Description\", \"text\": \"Type your target keyword in the Title field and write a meta description under 160 characters\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Add Alt Text to Images\", \"text\": \"Select any image and add a description in the Alt Text field in the right panel\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-design\",\n\n      \"name\": \"How to Use Framer Design\",\n\n      \"description\": \"Build beautiful pages with a drag-and-drop visual editor\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Add a Frame\", \"text\": \"Press F on your keyboard and draw a frame on the canvas\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Add Elements to Your Frame\", \"text\": \"Press T for text, drag images, or add buttons and adjust properties in the right panel\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Set Breakpoints for Responsive Design\", \"text\": \"Click device icons at the top to switch between desktop, tablet, and phone views\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-advanced-analytics\",\n\n      \"name\": \"How to Use Framer Advanced Analytics\",\n\n      \"description\": \"Track visitors and measure site performance\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open Your Site Settings\", \"text\": \"Click the gear icon and select Analytics from the settings menu\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"View Your Traffic Data\", \"text\": \"Check page views, unique visitors, and top-performing pages in the dashboard\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Connect Third-Party Analytics\", \"text\": \"Paste your Google Analytics tracking code in the Custom Code section\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-collaborate\",\n\n      \"name\": \"How to Use Framer Collaborate\",\n\n      \"description\": \"Work with your team on the same project in real time\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open Project Settings\", \"text\": \"Click the Share button in the top-right corner of the editor\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Invite Team Members\", \"text\": \"Enter your teammate email address, set their role, and send the invitation\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Edit Together in Real Time\", \"text\": \"Once they accept, you will see their cursor on the canvas and changes save automatically\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-cms\",\n\n      \"name\": \"How to Use Framer CMS\",\n\n      \"description\": \"Manage blog posts, portfolios, and dynamic content\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Create a CMS Collection\", \"text\": \"Click the CMS button in the toolbar and select New Collection\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Add Fields and Content\", \"text\": \"Add fields like Title, Image, Date, and Body text, then create your first entry\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Connect CMS to a Page\", \"text\": \"Create a new page, link it to your CMS collection, and drag CMS fields onto the page\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-animations\",\n\n      \"name\": \"How to Use Framer Animations\",\n\n      \"description\": \"Add smooth motion effects to any element on your site\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Select an Element\", \"text\": \"Click on any frame, text, or image and open the Animations section in the right panel\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Choose an Animation Type\", \"text\": \"Pick from Appear, Hover, Scroll, or custom Variants and set properties\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Preview Your Animation\", \"text\": \"Press Cmd + P to open Preview mode and interact with the page to trigger animations\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-ai-tool\",\n\n      \"name\": \"How to Use Framer AI Tool\",\n\n      \"description\": \"Generate full page layouts from a simple text prompt\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open the AI Generator\", \"text\": \"Click Quick Actions in the toolbar or press Cmd + K and select Generate Page\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Describe Your Page\", \"text\": \"Type a prompt describing the page you want and Framer generates it in seconds\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Customize the AI Output\", \"text\": \"Click on any section to edit text, images, or layout and replace placeholder content\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"SoftwareApplication\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#software\",\n\n      \"name\": \"Framer\",\n\n      \"description\": \"Framer is a no-code website builder that lets you design, prototype, and publish responsive websites visually with AI-powered tools, CMS, and built-in SEO.\",\n\n      \"applicationCategory\": \"Website Builder\",\n\n      \"operatingSystem\": \"Web, iOS, Android\",\n\n      \"url\": \"https:\/\/fahimai.com\/get\/framer\",\n\n      \"offers\": {\n\n        \"@type\": \"AggregateOffer\",\n\n        \"priceCurrency\": \"USD\",\n\n        \"lowPrice\": \"0\",\n\n        \"highPrice\": \"100\",\n\n        \"offerCount\": \"4\",\n\n        \"offers\": [\n\n          {\"@type\": \"Offer\", \"name\": \"Free\", \"price\": \"0\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"},\n\n          {\"@type\": \"Offer\", \"name\": \"Basic\", \"price\": \"10\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"},\n\n          {\"@type\": \"Offer\", \"name\": \"Pro\", \"price\": \"30\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"},\n\n          {\"@type\": \"Offer\", \"name\": \"Scale\", \"price\": \"100\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"}\n\n        ]\n\n      },\n\n      \"aggregateRating\": {\n\n        \"@type\": \"AggregateRating\",\n\n        \"ratingValue\": \"4.5\",\n\n        \"reviewCount\": \"1\",\n\n        \"bestRating\": \"5\",\n\n        \"worstRating\": \"1\"\n\n      },\n\n      \"featureList\": \"Automated SEO, Design, Advanced Analytics, Collaborate, CMS, Animations, AI Tool\"\n\n    },\n\n    {\n\n      \"@type\": \"FAQPage\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#faq\",\n\n      \"mainEntity\": [\n\n        {\"@type\": \"Question\", \"name\": \"What does Framer do?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Framer is a no-code website builder that lets you design, prototype, and publish responsive websites. You work on a visual canvas and everything you create goes live without needing a developer. It also includes a CMS, SEO tools, and AI-powered page generation.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"Is Framer free or paid?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Framer has a free plan that lets you build unlimited projects on a Framer subdomain. Paid plans start at $10\/month for the Basic tier. You need a paid plan to connect a custom domain and unlock more features like CMS collections and analytics.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"Which is better, Figma or Framer?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"They serve different purposes. Figma is a design tool for creating mockups and prototypes. Framer is a website builder that also has design tools. If you want to design AND publish a live website, Framer is the better choice.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"Is Framer similar to Wix?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Both are website builders, but they target different users. Wix is built for beginners who want a simple drag-and-drop experience. Framer is built for designers who want more creative control, better animations, and a Figma-like editing experience.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"Can I build a website in Framer?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. Framer is built for exactly that. You can create landing pages, portfolios, business sites, blogs, and more. Start from a blank canvas, use a template, or let AI generate a page. Then customize it and hit Publish.\"}}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"BreadcrumbList\",\n\n      \"itemListElement\": [\n\n        {\"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\/\/fahimai.com\"},\n\n        {\"@type\": \"ListItem\", \"position\": 2, \"name\": \"Website Builder\", \"item\": \"https:\/\/www.fahimai.com\/category\/ai\/website-builder\/\"},\n\n        {\"@type\": \"ListItem\", \"position\": 3, \"name\": \"How to Use Framer\"}\n\n      ]\n\n    }\n\n  ]\n\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Quick Start This guide covers every Framer feature: Time needed: 5 minutes per feature Also in this guide: Pro Tips | Common Mistakes | Troubleshooting | Pricing | Alternatives Why Trust This Guide I&#8217;ve used Framer for over a year and tested every feature covered here. This how to use framer tutorial comes from real [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":78155,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[596],"tags":[932,1182],"class_list":["post-78154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-framer","tag-autolink","tag-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/posts\/78154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/comments?post=78154"}],"version-history":[{"count":0,"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/posts\/78154\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/media\/78155"}],"wp:attachment":[{"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/media?parent=78154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/categories?post=78154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fahimai.com\/fr\/wp-json\/wp\/v2\/tags?post=78154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}