{"id":78154,"date":"2025-03-19T09:26:25","date_gmt":"2025-03-19T09:26:25","guid":{"rendered":"https:\/\/fahimai.com\/?p=78154"},"modified":"2026-08-24T14:30:06","modified_gmt":"2026-08-24T11:30:06","slug":"how-to-use-framer","status":"publish","type":"post","link":"https:\/\/www.fahimai.com\/ja\/how-to-use-framer","title":{"rendered":"Framer\u306e\u4f7f\u3044\u65b9\uff1a\u521d\u5fc3\u8005\u5411\u3051\u30ac\u30a4\u30c9\uff082026\u5e74\u7248\uff09"},"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 class=\"wp-block-paragraph\"><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 set up a new project<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-automated-seo\">How to Use Automated SEO<\/a> \u2014 Sitemaps, meta tags, and clean markup handled for you<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-design\">How to Use Design<\/a> \u2014 Frames, layers, and components on one canvas<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-advanced-analytics\">How to Use Advanced Analytics<\/a> \u2014 Traffic and behavior insights built into the editor<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-collaborate\">How to Use Collaborate<\/a> \u2014 Real-time editing with your whole team<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-cms\">How to Use CMS<\/a> \u2014 Manage repeating content from one collection<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-animations\">How to Use Animations<\/a> \u2014 Scroll effects and hover states without code<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-ai-tool\">How to Use AI Tool<\/a> \u2014 Full landing pages from a text prompt<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-custom-domain\">How to Use Custom Domain<\/a> \u2014 Your own web address with SSL handled<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-site-page-metadata\">How to Use Site &amp; Page Metadata<\/a> \u2014 Control how every page looks in search<\/li>\n\n\n\n<li><a href=\"#how-to-use-framer-automatic-sitemap\">How to Use Automatic Sitemap<\/a> \u2014 A live index of every page you publish<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Time needed:<\/strong> 5 minutes per feature<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Why Trust This Guide<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I have shipped client work in Framer for two years and tested every feature covered here. This tutorial comes from real hands-on work \u2014 not marketing copy or vendor screenshots.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/03\/Fahim-AI-5-19.png\" alt=\"Framer\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Framer is a powerful, browser-based tool for designing, prototyping, and publishing responsive websites without coding.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Most people only scratch the surface of it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They build one page from scratch, publish, and never touch the CMS or the animations panel again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide shows you how to use every major feature, step by step.<\/p>\n\n\n\n<h2 id='framer-tutorial'  id=\"boomdevs_2\" class=\"wp-block-heading\">Framer Tutorial<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Learning how to use Framer means one shift in thinking: away from static design files, toward component-based, responsive web development. The basics below get you there.<\/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-c446116b 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 wp-block-paragraph\">Framer<\/p>\n\n\n\n<p class=\"cta-box-description wp-block-paragraph\">Design, prototype, and publish a real website from one browser tab. Framer removes the handoff to developers \u2014 what you draw on the canvas is what goes live. Start free, upgrade when you need a custom domain.<\/p>\n\n\n\n<div class=\"wp-block-group cta-box-buttons is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\"><a class=\"cta-btn cta-btn-secondary\" href=\"https:\/\/www.fahimai.com\/framer\">READ FULL REVIEW \u2192<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><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\" id=\"getting-started-with-framer\" class=\"wp-block-heading\">Getting Started with Framer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Complete this one-time setup before touching any feature.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what my own first week with the editor looked like:<\/p>\n\n\n<style>.kb-image53859_a5da45-f8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image53859_a5da45-f8 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-personal-experience.png\" alt=\"Framer personal experience\" class=\"kb-img wp-image-53866\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-personal-experience.png 1024w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-personal-experience-980x529.png 980w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-personal-experience-480x259.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 class=\"wp-block-paragraph\">Now let us walk through each step.<\/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 class=\"wp-block-paragraph\">Go to the Framer website and click Sign Up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enter your email and set a password.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> Check your <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/inbox-placement-tool\" title=\"inbox\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153547\" target=\"_blank\" rel=\"noopener\">inbox<\/a> for the confirmation email.<\/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 class=\"wp-block-paragraph\">Framer runs in the browser, so Windows and <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-password-manager-for-mac\" title=\"Mac\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153548\" target=\"_blank\" rel=\"noopener\">Mac<\/a> both work with no install.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Log in and the canvas loads immediately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what you get out of the box:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> You should see the main dashboard with your project list.<\/p>\n\n\n\n<h4 id='step-3-start-a-new-project'  id=\"boomdevs_6\" class=\"wp-block-heading\">Step 3: Start a New Project<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Click New Project. Choose a blank canvas to build from scratch, or open an example template and change it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also import a Figma file, which Framer converts into clean, responsive HTML.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Done:<\/strong> Your Framer project is open and ready for 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\" id=\"how-to-use-framer-automated-seo\" class=\"wp-block-heading\">How to Use Framer Automated SEO<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Automated <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/local-seo-tools\" title=\"SEO\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153566\" target=\"_blank\" rel=\"noopener\">SEO<\/a><\/strong> \u2014 Automated SEO handles sitemaps, meta tags, and clean markup so your site ranks without extra tools.<\/p>\n\n\n\n<h4 id='step-1-open-site-settings'  id=\"boomdevs_8\" class=\"wp-block-heading\">Step 1: Open Site Settings<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Open site settings from the top-left menu of your Framer project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Framer builds an automatic sitemap the moment you publish.<\/p>\n\n\n\n<h4 id='step-2-write-page-metadata'  id=\"boomdevs_9\" class=\"wp-block-heading\">Step 2: Write Page Metadata<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Manually update a unique meta title and description for every page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what this looks like:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> Each page shows its own title in the metadata list.<\/p>\n\n\n\n<h4 id='step-3-fix-your-heading-tags'  id=\"boomdevs_10\" class=\"wp-block-heading\">Step 3: Fix Your Heading Tags<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Open the Accessibility panel and assign correct HTML tags to each text layer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every page needs exactly one H1 containing its primary keyword.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> Your site ships with semantic structure and search-ready metadata.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Enable the Lazy loading setting for media below the fold. Images outside the first viewport load later and your page speed improves.<\/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-designer'  id=\"boomdevs_11\" id=\"how-to-use-framer-design\" class=\"wp-block-heading\">How to Use Framer Designer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Design<\/strong> \u2014 Design gives you frames, layers, and pre-made components on a single canvas.<\/p>\n\n\n\n<h4 id='step-1-create-a-frame'  id=\"boomdevs_12\" class=\"wp-block-heading\">Step 1: Create a Frame<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Go to Frame &gt; New Frame. Frames are the building blocks of your Framer design.<\/p>\n\n\n\n<h4 id='step-2-add-your-elements'  id=\"boomdevs_13\" class=\"wp-block-heading\">Step 2: Add Your Elements<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add a text layer, images, or a button inside the frame.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select any element and drag the resizing handles to adjust its size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what this looks like:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> Your frame holds every element you added, in order.<\/p>\n\n\n\n<h4 id='step-3-switch-to-stacks'  id=\"boomdevs_14\" class=\"wp-block-heading\">Step 3: Switch to Stacks<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Use Stacks to manage spacing and alignment automatically instead of absolute positioning.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> A clean layout that holds together instead of drifting apart.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Give section frames top and bottom padding. Add left and right padding to the containers inside them for consistent spacing.<\/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\" id=\"how-to-use-framer-advanced-analytics\" class=\"wp-block-heading\">How to Use Framer Advanced Analytics<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Advanced Analytics<\/strong> \u2014 Advanced Analytics reports traffic and behavior insights without a third-party script.<\/p>\n\n\n\n<h4 id='step-1-open-the-analytics-tab'  id=\"boomdevs_16\" class=\"wp-block-heading\">Step 1: Open the Analytics Tab<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Click Analytics in the top bar of your project.<\/p>\n\n\n\n<h4 id='step-2-choose-a-date-range'  id=\"boomdevs_17\" class=\"wp-block-heading\">Step 2: Choose a Date Range<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Pick a window and compare it against the previous period.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Weekly ranges show trends; daily ranges only show noise.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what this looks like:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> You see visitors, page views, and your top pages.<\/p>\n\n\n\n<h4 id='step-3-act-on-what-you-see'  id=\"boomdevs_18\" class=\"wp-block-heading\">Step 3: Act on What You See<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Find pages with high exit rates and edit that content first.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One weak headline can cost more traffic than a whole redesign wins back.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> Real numbers telling you which page to change next.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Watch referrer <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/alaya-ai\" title=\"data\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153558\" target=\"_blank\" rel=\"noopener\">data<\/a> every week. It shows which sites connect back to you and which posts earn links on their own.<\/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-collaborator'  id=\"boomdevs_19\" id=\"how-to-use-framer-collaborate\" class=\"wp-block-heading\">How to Use Framer Collaborator<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Collaborate<\/strong> \u2014 Collaborate lets designers work on the same site in real time.<\/p>\n\n\n\n<h4 id='step-1-send-an-invitation'  id=\"boomdevs_20\" class=\"wp-block-heading\">Step 1: Send an Invitation<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Click Share, then invite a collaborator by email.<\/p>\n\n\n\n<h4 id='step-2-set-their-role'  id=\"boomdevs_21\" class=\"wp-block-heading\">Step 2: Set Their Role<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose Editor for people who build, or Viewer for people who only watch and leave feedback.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what this looks like:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> Their <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-video-avatar-generators-for-tiktok\" title=\"avatar\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153549\" target=\"_blank\" rel=\"noopener\">avatar<\/a> appears on the canvas once they accept the invitation.<\/p>\n\n\n\n<h4 id='step-3-work-at-the-same-time'  id=\"boomdevs_22\" class=\"wp-block-heading\">Step 3: Work at the Same Time<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Edit one canvas together. Every change syncs live 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 class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> One shared project instead of five conflicting copies.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Organize and rename layers before you invite anyone. Clear names save your team hours of hunting through the layer list.<\/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\" id=\"how-to-use-framer-cms\" class=\"wp-block-heading\">How to Use Framer CMS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CMS<\/strong> \u2014 CMS turns repeating content into a collection you manage from one place.<\/p>\n\n\n\n<h4 id='step-1-create-a-collection'  id=\"boomdevs_24\" class=\"wp-block-heading\">Step 1: Create a Collection<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Open the CMS panel and add a new collection.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One collection per content type: blog posts, case studies, team members.<\/p>\n\n\n\n<h4 id='step-2-add-your-fields'  id=\"boomdevs_25\" class=\"wp-block-heading\">Step 2: Add Your Fields<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set a field for each piece of content: title, image, body, and slug.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what this looks like:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> Your collection lists every entry in a simple table.<\/p>\n\n\n\n<h4 id='step-3-connect-it-to-the-design'  id=\"boomdevs_26\" class=\"wp-block-heading\">Step 3: Connect It to the Design<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Select a component on the canvas and bind each layer to a CMS field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Build the card once and every entry inherits that design.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> New entries publish automatically using the same layout.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Drop a search icon entry point for site search into your header. That icon entry point for site search helps readers find older posts fast.<\/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\" id=\"how-to-use-framer-animations\" class=\"wp-block-heading\">How to Use Framer Animations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animations<\/strong> \u2014 Animations bring your ideas to life with scroll effects, hover states, and transitions.<\/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 class=\"wp-block-paragraph\">Pick the element you want to animate on the canvas.<\/p>\n\n\n\n<h4 id='step-2-open-the-animation-menu'  id=\"boomdevs_29\" class=\"wp-block-heading\">Step 2: Open the Animation Menu<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Go to Animation &gt; New Animation and choose a trigger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Scroll, hover, and click cover most real interactions you need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what this looks like:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> A preview plays the moment you release the trigger.<\/p>\n\n\n\n<h4 id='step-3-adjust-the-curve'  id=\"boomdevs_30\" class=\"wp-block-heading\">Step 3: Adjust the Curve<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Change the easing and duration until the motion feels natural.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> Interactions that feel designed, not bolted on afterwards.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Keep entrance animations under 400ms. Anything longer makes a fast site feel slow, and visitors read that as a broken page.<\/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-tools'  id=\"boomdevs_31\" id=\"how-to-use-framer-ai-tool\" class=\"wp-block-heading\">How to Use Framer AI Tools<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>AI Tool<\/strong> \u2014 Framer AI generates complete, responsive, styled landing pages from simple text prompts.<\/p>\n\n\n\n<h4 id='step-1-start-a-new-project'  id=\"boomdevs_32\" class=\"wp-block-heading\">Step 1: Start a New Project<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new project and click the AI option instead of a blank canvas.<\/p>\n\n\n\n<h4 id='step-2-write-your-prompt'  id=\"boomdevs_33\" class=\"wp-block-heading\">Step 2: Write Your Prompt<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Describe the site you want in plain language. Name your audience and tone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what this looks like:<\/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 class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> A full page appears on your canvas within seconds.<\/p>\n\n\n\n<h4 id='step-3-edit-the-result'  id=\"boomdevs_34\" class=\"wp-block-heading\">Step 3: Edit the Result<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Treat the output as a draft. Change copy, swap images, adjust spacing.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> A working first draft instead of a blank screen.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Generate two or three versions from similar prompts. Copy the best section out of each one and build your real page from those.<\/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-custom-domain'  id=\"boomdevs_35\" id=\"how-to-use-framer-custom-domain\" class=\"wp-block-heading\">How to Use Framer Custom Domain<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Custom Domain<\/strong> \u2014 Custom Domain points your own web address at the site you just built.<\/p>\n\n\n\n<h4 id='step-1-open-domain-settings'  id=\"boomdevs_36\" class=\"wp-block-heading\">Step 1: Open Domain Settings<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Go to site settings and select Domains.<\/p>\n\n\n\n<h4 id='step-2-add-your-domain'  id=\"boomdevs_37\" class=\"wp-block-heading\">Step 2: Add Your Domain<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Type your domain, then copy the DNS records Framer shows you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You need one A record and one CNAME in most cases.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> Framer shows a pending status until DNS resolves.<\/p>\n\n\n\n<h4 id='step-3-paste-the-records'  id=\"boomdevs_38\" class=\"wp-block-heading\">Step 3: Paste the Records<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add those records at your registrar. Most updates finish within an hour.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> Your project loads on your own domain with SSL handled for you.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Connect the domain before you publish anything public. Doing it later means cleaning up redirects and losing <a class=\"wpil_keyword_link\" href=\"https:\/\/www.fahimai.com\/early-app\" title=\"early\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153550\">early<\/a> rankings.<\/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-site-page-metadata'  id=\"boomdevs_39\" id=\"how-to-use-framer-site-page-metadata\" class=\"wp-block-heading\">How to Use Framer Site &amp; Page Metadata<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Site &amp; Page Metadata<\/strong> \u2014 Site and page metadata control how each page looks in search results and shared links.<\/p>\n\n\n\n<h4 id='step-1-open-a-page'  id=\"boomdevs_40\" class=\"wp-block-heading\">Step 1: Open a Page<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Select a page in the left panel and open its settings.<\/p>\n\n\n\n<h4 id='step-2-write-the-title-and-description'  id=\"boomdevs_41\" class=\"wp-block-heading\">Step 2: Write the Title and Description<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Keep titles under 60 characters and descriptions close to 155.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Write them for a person deciding whether to click, not for a crawler.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> The preview card updates as you type.<\/p>\n\n\n\n<h4 id='step-3-add-a-social-image'  id=\"boomdevs_42\" class=\"wp-block-heading\">Step 3: Add a Social Image<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Upload an open graph image so links look right when people share them.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> Every page carries its own title, description, and share card.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Never ship the default title on more than one page. Duplicate titles make search engines choose which page to bury.<\/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-automatic-sitemap'  id=\"boomdevs_43\" id=\"how-to-use-framer-automatic-sitemap\" class=\"wp-block-heading\">How to Use Framer Automatic Sitemap<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Automatic Sitemap<\/strong> \u2014 Automatic Sitemap keeps a live index of every page you publish.<\/p>\n\n\n\n<h4 id='step-1-publish-the-site'  id=\"boomdevs_44\" class=\"wp-block-heading\">Step 1: Publish the Site<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Framer writes the sitemap on publish. No plugin, no code.<\/p>\n\n\n\n<h4 id='step-2-check-the-file'  id=\"boomdevs_45\" class=\"wp-block-heading\">Step 2: Check the File<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Open yoursite.com\/sitemap.xml in a browser window.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2713 <strong>Checkpoint:<\/strong> You see every published page listed there.<\/p>\n\n\n\n<h4 id='step-3-submit-it'  id=\"boomdevs_46\" class=\"wp-block-heading\">Step 3: Submit It<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add that sitemap URL to Google Search Console.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Resubmit after any large batch of new pages.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u2705 Result:<\/strong> Search engines find new pages in days instead of weeks.<\/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 class=\"wp-block-paragraph\">\ud83d\udca1 <strong>Pro Tip:<\/strong> Hide staging pages from the sitemap in page settings. Only pages you want indexed belong in that file.<\/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_47\" id=\"framer-pro-tips-and-shortcuts\" class=\"wp-block-heading\">Framer Pro Tips and Shortcuts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After two years of daily use, these are the tips I give every new designer on my team.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" 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>Insert a frame<\/td><td>F<\/td><\/tr><tr><td>Insert a text layer<\/td><td>T<\/td><\/tr><tr><td>Duplicate selection<\/td><td>Cmd \/ Ctrl + D<\/td><\/tr><tr><td>Open live preview<\/td><td>Cmd \/ Ctrl + P<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\" 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>Master Component Library:<\/strong> Keep every component in one central file so updates and version control stay simple across a growing site.<\/li>\n\n\n\n<li><strong>Plugin manager:<\/strong> Open it from the toolbar to add new tools to the editor without touching code.<\/li>\n\n\n\n<li><strong>Prototype testing:<\/strong> Go to Prototype &gt; Test Prototype to click through high-fidelity interactions before you publish.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Best Places to Learn Framer<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Framer University:<\/strong> Over 100 practical video lessons taught by an official Framer mentor.<\/li>\n\n\n\n<li><strong>Official documentation:<\/strong> Covers every part of the tool, with tutorials and guides for each panel.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-avatar-generators-for-youtube-videos\" title=\"YouTube\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153552\" target=\"_blank\" rel=\"noopener\">YouTube<\/a> channel:<\/strong> Watch a deep pile of video tutorials and real case studies from the team.<\/li>\n\n\n\n<li><strong>Community forum:<\/strong> The best place to connect with other designers and get answers fast.<\/li>\n\n\n\n<li><strong>Udemy and Skillshare:<\/strong> Pick a structured course if you want the basics in a fixed order.<\/li>\n\n\n\n<li><strong>GitHub:<\/strong> Source code and open resources, useful if developers are in the loop.<\/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_48\" id=\"framer-common-mistakes-to-avoid\" class=\"wp-block-heading\">Framer Common Mistakes to Avoid<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #1: Positioning everything by hand<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u274c Wrong:<\/strong> Dragging every element into place with absolute positioning, then watching the layout break on a smaller screen.<\/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 class=\"wp-block-paragraph\"><strong>\u2705 Right:<\/strong> Use Stacks so spacing and alignment update on their own when content changes.<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #2: Designing only for desktop<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u274c Wrong:<\/strong> Publishing a site without ever opening the tablet or phone breakpoint.<\/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 class=\"wp-block-paragraph\"><strong>\u2705 Right:<\/strong> Check each breakpoint and adjust text sizes and padding before you publish.<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #3: Editing instances instead of components<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u274c Wrong:<\/strong> Changing one instance and expecting the rest to follow.<\/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 class=\"wp-block-paragraph\"><strong>\u2705 Right:<\/strong> Edit the component itself. Instances inherit structure, layout, and shared styles, while a variable lets each instance override just the intended fields without affecting the others.<\/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_49\" id=\"framer-troubleshooting\" class=\"wp-block-heading\">Framer Troubleshooting<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: Text overflows on the phone breakpoint<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cause:<\/strong> Font sizes are locked to fixed pixel values, so they never scale down.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Fix:<\/strong> Use REM units for font sizes. Type then scales properly across every breakpoint.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: The published site looks different from the canvas<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cause:<\/strong> Unpublished changes, or your browser is serving a cached copy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Fix:<\/strong> Publish again, then hard-refresh the page. Confirm you are viewing the right domain.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: A collaborator cannot edit anything<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cause:<\/strong> They were invited as a Viewer rather than an Editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Fix:<\/strong> Open Share, change their role to Editor, and send a fresh invitation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\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_50\" class=\"wp-block-heading\">What is Framer?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Framer<\/strong> is a website builder where you create layouts on a canvas using frames, layers, and pre-made components \u2014 or generate a whole site from a text prompt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Think of it as a design tool and a web host sharing one window.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">It includes these key features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Automated SEO:<\/strong> Sitemaps, meta tags, and clean markup handled for you<\/li>\n\n\n\n<li><strong>Design:<\/strong> Frames, layers, and components on one canvas<\/li>\n\n\n\n<li><strong>Advanced Analytics:<\/strong> Traffic and behavior insights built into the editor<\/li>\n\n\n\n<li><strong>Collaborate:<\/strong> Real-time editing with your whole team<\/li>\n\n\n\n<li><strong>CMS:<\/strong> Manage repeating content from one collection<\/li>\n\n\n\n<li><strong>Animations:<\/strong> Scroll effects and hover states without code<\/li>\n\n\n\n<li><strong>AI Tool:<\/strong> Full landing pages from a text prompt<\/li>\n\n\n\n<li><strong>Custom Domain:<\/strong> Your own web address with SSL handled<\/li>\n\n\n\n<li><strong>Site &amp; Page Metadata:<\/strong> Control how every page looks in search<\/li>\n\n\n\n<li><strong>Automatic Sitemap:<\/strong> A live index of every page you publish<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It also handles high-fidelity prototypes, real-time collaboration, and reusable symbols, so one project carries an idea from sketch to live site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a full breakdown, 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\n<p class=\"wp-block-paragraph\">That single window replaces the usual design-file-then-developer round trip.<\/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-pricing'  id=\"boomdevs_51\" id=\"framer-pricing\" class=\"wp-block-heading\">Framer Pricing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is 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>Basic<\/td><td>$10<\/td><td>Personal sites and portfolios<\/td><\/tr><tr><td>Pro<\/td><td>$30<\/td><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/accounting-software-for-freelancers\" title=\"Freelancers\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153551\" target=\"_blank\" rel=\"noopener\">Freelancers<\/a> and growing business sites<\/td><\/tr><tr><td>Scale<\/td><td>$100<\/td><td>Agencies and high-traffic content sites<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Free trial:<\/strong> Yes \u2014 a free plan lets you build and publish on a Framer subdomain.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Money-back guarantee:<\/strong> Not advertised. You can downgrade or cancel at any time.<\/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 class=\"wp-block-paragraph\">\ud83d\udcb0 <strong>Best Value:<\/strong> Pro \u2014 it covers a custom domain, CMS content, and analytics on one plan.<\/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_52\" id=\"framer-vs-alternatives\" class=\"wp-block-heading\">Framer vs Alternatives<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">How does Framer compare? Here is the 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>Design control and animations<\/td><td>$10\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td>Gamma<\/td><td>Decks and quick one-pagers<\/td><td>$10\/mo<\/td><td>\u2b50 4.6<\/td><\/tr><tr><td>Durable<\/td><td>Instant small-business sites<\/td><td>$12\/mo<\/td><td>\u2b50 4.4<\/td><\/tr><tr><td>10Web<\/td><td>AI-built WordPress sites<\/td><td>$10\/mo<\/td><td>\u2b50 4.4<\/td><\/tr><tr><td>Dorik<\/td><td>Simple no-code <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=\"153561\">business<\/a> sites<\/td><td>$18\/mo<\/td><td>\u2b50 4.5<\/td><\/tr><tr><td>Typedream<\/td><td>Notion-style page building<\/td><td>$15\/mo<\/td><td>\u2b50 4.3<\/td><\/tr><tr><td>B12<\/td><td>Done-for-you service sites<\/td><td>$42\/mo<\/td><td>\u2b50 4.2<\/td><\/tr><tr><td>Jimdo<\/td><td>Tiny shops and local pages<\/td><td>$9\/mo<\/td><td>\u2b50 4.1<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\" 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 design freedom plus real publishing in one tool.<\/li>\n\n\n\n<li><strong>Best budget:<\/strong> Jimdo \u2014 cheapest way to get a small page online.<\/li>\n\n\n\n<li><strong>Best for beginners:<\/strong> Durable \u2014 answers a few questions and builds the site for you.<\/li>\n\n\n\n<li><strong>Best for content sites:<\/strong> 10Web \u2014 WordPress underneath, so plugins stay available.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">\ud83c\udfaf Framer Alternatives<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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> Turns a prompt into decks, docs, and simple sites in minutes.<\/li>\n\n\n\n<li>\u26a1 <strong>Durable:<\/strong> Builds a working small-business site in about thirty seconds.<\/li>\n\n\n\n<li>\ud83d\udcb0 <strong>Butternut:<\/strong> Free AI site <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-image-generators\" title=\"generator\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153553\" target=\"_blank\" rel=\"noopener\">generator<\/a> aimed at first-time founders.<\/li>\n\n\n\n<li>\ud83e\udde0 <strong>CodeDesign:<\/strong> AI layouts you can refine visually, then export.<\/li>\n\n\n\n<li>\ud83c\udfa8 <strong>Siter:<\/strong> Visual builder for designers who want fine control.<\/li>\n\n\n\n<li>\ud83d\udd27 <strong>10Web:<\/strong> AI website building on top of managed WordPress hosting.<\/li>\n\n\n\n<li>\ud83d\udc76 <strong>Pineapple Builder:<\/strong> Guided setup with copy and images written for you.<\/li>\n\n\n\n<li>\ud83d\udcbc <strong>Dorik:<\/strong> Clean no-code builder with a generous free tier.<\/li>\n\n\n\n<li>\ud83d\udcca <strong>Typedream:<\/strong> Notion-style editing for people who hate design tools.<\/li>\n\n\n\n<li>\ud83c\udf1f <strong>Jimdo:<\/strong> Budget builder with local business and shop templates.<\/li>\n\n\n\n<li>\ud83c\udfe2 <strong>B12:<\/strong> Done-for-you sites for law, finance, and consulting firms.<\/li>\n\n\n\n<li>\ud83d\udd25 <strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/appy-pie\" title=\"Appy Pie\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"153560\" target=\"_blank\" rel=\"noopener\">Appy Pie<\/a>:<\/strong> Site and app building bundled in one no-code platform.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For the full list, see our <a href=\"https:\/\/www.fahimai.com\/framer-alternatives\">Framer alternatives<\/a> guide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">\u2694\ufe0f Framer Compared<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is how Framer stacks up against each one:<\/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=\"153555\" target=\"_blank\" rel=\"noopener\">Framer vs Gamma<\/a>:<\/strong> Gamma wins on speed for decks. Framer wins on any site you plan to keep.<\/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=\"153569\" target=\"_blank\" rel=\"noopener\">Framer vs Durable<\/a>:<\/strong> Durable is faster to launch. Framer gives you real design control afterwards.<\/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=\"153562\" target=\"_blank\" rel=\"noopener\">Framer vs Butternut<\/a>:<\/strong> Butternut is free and simple. Framer scales past the first landing page.<\/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=\"153567\" target=\"_blank\" rel=\"noopener\">Framer vs CodeDesign<\/a>:<\/strong> CodeDesign exports code. Framer hosts and publishes for you instead.<\/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=\"153557\" target=\"_blank\" rel=\"noopener\">Framer vs Siter<\/a>:<\/strong> Siter feels similar on the canvas. Framer has stronger CMS and animations.<\/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=\"153568\" target=\"_blank\" rel=\"noopener\">Framer vs 10Web<\/a>:<\/strong> 10Web keeps WordPress plugins. Framer skips plugins and the maintenance they bring.<\/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=\"153565\" target=\"_blank\" rel=\"noopener\">Framer vs Pineapple Builder<\/a>:<\/strong> Pineapple Builder holds your hand more. Framer rewards you for learning it.<\/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=\"153556\" target=\"_blank\" rel=\"noopener\">Framer vs Dorik<\/a>:<\/strong> Dorik is cheaper at the low end. Framer handles complex interactions far better.<\/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=\"153554\" target=\"_blank\" rel=\"noopener\">Framer vs Typedream<\/a>:<\/strong> Typedream is quicker to write in. Framer is quicker to design in.<\/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=\"153563\" target=\"_blank\" rel=\"noopener\">Framer vs Jimdo<\/a>:<\/strong> Jimdo suits tiny local pages. Framer suits brands that care how things look.<\/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=\"153559\" target=\"_blank\" rel=\"noopener\">Framer vs B12<\/a>:<\/strong> B12 does the work for you. Framer keeps the work in your hands.<\/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=\"153564\" target=\"_blank\" rel=\"noopener\">Framer vs Appy Pie<\/a>:<\/strong> Appy Pie also builds apps. Framer stays focused on websites and does them better.<\/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_53\" class=\"wp-block-heading\">Start Using Framer Now<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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\n\n\n<li>\u2705 Custom Domain<\/li>\n\n\n\n<li>\u2705 Site &amp; Page Metadata<\/li>\n\n\n\n<li>\u2705 Automatic Sitemap<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Next step:<\/strong> open a new project and try one feature today.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Most people start with Design, because frames make everything else click.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It takes less than five 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_54\" class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">What is Framer used for?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Framer is used to design, prototype, and publish responsive websites in one browser tab. Designers build on a canvas with frames and components, then publish live without a developer handoff.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Is Framer free to build a website?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. A free plan lets you build and publish a site on a Framer subdomain. Paid plans start at $10 and add a custom domain, CMS content, and more pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Is Framer better than Figma?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They do different jobs. Figma is better for static design files and team libraries. Framer is better when you want that design to become a real, published website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" 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 class=\"wp-block-paragraph\">Yes. Framer handles design, CMS content, animations, metadata, and hosting. You publish directly from the editor, so no separate developer or hosting setup is needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">How much does Framer cost per month?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Framer pricing runs $10 per month for Basic, $30 for Pro, and $100 for Scale. A free tier is available if you only need a subdomain site.<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-getting-started\",\n      \"name\": \"How to Get Started with Framer\",\n      \"description\": \"Set up your Framer account and open your first project\",\n      \"totalTime\": \"PT3M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Create Your Account\",\n          \"text\": \"Go to the Framer website, click Sign Up, enter your email and set a password.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Open the Editor\",\n          \"text\": \"Framer runs in the browser on Windows and Mac. Log in and the canvas loads.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Start a New Project\",\n          \"text\": \"Click New Project and choose a blank canvas or an example template.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-automated-seo\",\n      \"name\": \"How to Use Framer Automated SEO\",\n      \"description\": \"Automated SEO handles sitemaps, meta tags, and clean markup so your site ranks without extra tools.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Open Site Settings\",\n          \"text\": \"Open site settings from the top-left menu of your Framer project. Framer builds an automatic sitemap the moment you publish.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Write Page Metadata\",\n          \"text\": \"Manually update a unique meta title and description for every page.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Fix Your Heading Tags\",\n          \"text\": \"Open the Accessibility panel and assign correct HTML tags to each text layer. Every page needs exactly one H1 containing its primary keyword.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-design\",\n      \"name\": \"How to Use Framer Design\",\n      \"description\": \"Design gives you frames, layers, and pre-made components on a single canvas.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Create a Frame\",\n          \"text\": \"Go to Frame > New Frame. Frames are the building blocks of your Framer design.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Add Your Elements\",\n          \"text\": \"Add a text layer, images, or a button inside the frame. Select any element and drag the resizing handles to adjust its size.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Switch to Stacks\",\n          \"text\": \"Use Stacks to manage spacing and alignment automatically instead of absolute positioning.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-advanced-analytics\",\n      \"name\": \"How to Use Framer Advanced Analytics\",\n      \"description\": \"Advanced Analytics reports traffic and behavior insights without a third-party script.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Open the Analytics Tab\",\n          \"text\": \"Click Analytics in the top bar of your project.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Choose a Date Range\",\n          \"text\": \"Pick a window and compare it against the previous period. Weekly ranges show trends; daily ranges only show noise.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Act on What You See\",\n          \"text\": \"Find pages with high exit rates and edit that content first. One weak headline can cost more traffic than a whole redesign wins back.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-collaborate\",\n      \"name\": \"How to Use Framer Collaborate\",\n      \"description\": \"Collaborate lets designers work on the same site in real time.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Send an Invitation\",\n          \"text\": \"Click Share, then invite a collaborator by email.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Set Their Role\",\n          \"text\": \"Choose Editor for people who build, or Viewer for people who only watch and leave feedback.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Work at the Same Time\",\n          \"text\": \"Edit one canvas together. Every change syncs live for everyone.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-cms\",\n      \"name\": \"How to Use Framer CMS\",\n      \"description\": \"CMS turns repeating content into a collection you manage from one place.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Create a Collection\",\n          \"text\": \"Open the CMS panel and add a new collection. One collection per content type: blog posts, case studies, team members.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Add Your Fields\",\n          \"text\": \"Set a field for each piece of content: title, image, body, and slug.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Connect It to the Design\",\n          \"text\": \"Select a component on the canvas and bind each layer to a CMS field. Build the card once and every entry inherits that design.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-animations\",\n      \"name\": \"How to Use Framer Animations\",\n      \"description\": \"Animations bring your ideas to life with scroll effects, hover states, and transitions.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Select an Element\",\n          \"text\": \"Pick the element you want to animate on the canvas.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Open the Animation Menu\",\n          \"text\": \"Go to Animation > New Animation and choose a trigger. Scroll, hover, and click cover most real interactions you need.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Adjust the Curve\",\n          \"text\": \"Change the easing and duration until the motion feels natural.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-ai-tool\",\n      \"name\": \"How to Use Framer AI Tool\",\n      \"description\": \"Framer AI generates complete, responsive, styled landing pages from simple text prompts.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Start a New Project\",\n          \"text\": \"Create a new project and click the AI option instead of a blank canvas.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Write Your Prompt\",\n          \"text\": \"Describe the site you want in plain language. Name your audience and tone.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Edit the Result\",\n          \"text\": \"Treat the output as a draft. Change copy, swap images, adjust spacing.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-custom-domain\",\n      \"name\": \"How to Use Framer Custom Domain\",\n      \"description\": \"Custom Domain points your own web address at the site you just built.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Open Domain Settings\",\n          \"text\": \"Go to site settings and select Domains.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Add Your Domain\",\n          \"text\": \"Type your domain, then copy the DNS records Framer shows you. You need one A record and one CNAME in most cases.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Paste the Records\",\n          \"text\": \"Add those records at your registrar. Most updates finish within an hour.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-site-page-metadata\",\n      \"name\": \"How to Use Framer Site and Page Metadata\",\n      \"description\": \"Site and page metadata control how each page looks in search results and shared links.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Open a Page\",\n          \"text\": \"Select a page in the left panel and open its settings.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Write the Title and Description\",\n          \"text\": \"Keep titles under 60 characters and descriptions close to 155. Write them for a person deciding whether to click, not for a crawler.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Add a Social Image\",\n          \"text\": \"Upload an open graph image so links look right when people share them.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#howto-automatic-sitemap\",\n      \"name\": \"How to Use Framer Automatic Sitemap\",\n      \"description\": \"Automatic Sitemap keeps a live index of every page you publish.\",\n      \"totalTime\": \"PT5M\",\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Publish the Site\",\n          \"text\": \"Framer writes the sitemap on publish. No plugin, no code.\",\n          \"position\": 1\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Check the File\",\n          \"text\": \"Open yoursite.com\/sitemap.xml in a browser window.\",\n          \"position\": 2\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"name\": \"Submit It\",\n          \"text\": \"Add that sitemap URL to Google Search Console. Resubmit after any large batch of new pages.\",\n          \"position\": 3\n        }\n      ]\n    },\n    {\n      \"@type\": \"SoftwareApplication\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#software\",\n      \"name\": \"Framer\",\n      \"description\": \"Framer is a browser-based tool for designing, prototyping, and publishing responsive websites without coding.\",\n      \"applicationCategory\": \"Website Builder\",\n      \"operatingSystem\": \"Web, iOS, Android\",\n      \"url\": \"https:\/\/fahimai.com\/get\/framer\",\n      \"offers\": {\n        \"@type\": \"AggregateOffer\",\n        \"priceCurrency\": \"USD\",\n        \"lowPrice\": \"10\",\n        \"highPrice\": \"100\",\n        \"offerCount\": \"3\",\n        \"offers\": [\n          {\n            \"@type\": \"Offer\",\n            \"name\": \"Basic\",\n            \"price\": \"10\",\n            \"priceCurrency\": \"USD\",\n            \"priceValidUntil\": \"2026-12-31\",\n            \"availability\": \"https:\/\/schema.org\/InStock\"\n          },\n          {\n            \"@type\": \"Offer\",\n            \"name\": \"Pro\",\n            \"price\": \"30\",\n            \"priceCurrency\": \"USD\",\n            \"priceValidUntil\": \"2026-12-31\",\n            \"availability\": \"https:\/\/schema.org\/InStock\"\n          },\n          {\n            \"@type\": \"Offer\",\n            \"name\": \"Scale\",\n            \"price\": \"100\",\n            \"priceCurrency\": \"USD\",\n            \"priceValidUntil\": \"2026-12-31\",\n            \"availability\": \"https:\/\/schema.org\/InStock\"\n          }\n        ]\n      },\n      \"aggregateRating\": {\n        \"@type\": \"AggregateRating\",\n        \"ratingValue\": \"4.5\",\n        \"reviewCount\": \"1\",\n        \"bestRating\": \"5\",\n        \"worstRating\": \"1\"\n      },\n      \"featureList\": \"Automated SEO, Design, Advanced Analytics, Collaborate, CMS, Animations, AI Tool, Custom Domain, Site and Page Metadata, Automatic Sitemap\"\n    },\n    {\n      \"@type\": \"FAQPage\",\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-framer\/#faq\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What is Framer used for?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Framer is used to design, prototype, and publish responsive websites in one browser tab. Designers build on a canvas with frames and components, then publish live without a developer handoff.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Is Framer free to build a website?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Yes. A free plan lets you build and publish a site on a Framer subdomain. Paid plans start at $10 and add a custom domain, CMS content, and more pages.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Is Framer better than Figma?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"They do different jobs. Figma is better for static design files and team libraries. Framer is better when you want that design to become a real, published website.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Can I build a website in Framer?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Yes. Framer handles design, CMS content, animations, metadata, and hosting. You publish directly from the editor, so no separate developer or hosting setup is needed.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"How much does Framer cost per month?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Framer pricing runs $10 per month for Basic, $30 for Pro, and $100 for Scale. A free tier is available if you only need a subdomain site.\"\n          }\n        }\n      ]\n    },\n    {\n      \"@type\": \"BreadcrumbList\",\n      \"itemListElement\": [\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 1,\n          \"name\": \"Home\",\n          \"item\": \"https:\/\/fahimai.com\"\n        },\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 2,\n          \"name\": \"Website Builder\",\n          \"item\": \"https:\/\/www.fahimai.com\/category\/ai\/website-builder\/framer\"\n        },\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 3,\n          \"name\": \"How to Use Framer\"\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 have shipped client work in Framer for two years and tested every feature covered here. This tutorial comes from real hands-on work \u2014 not marketing copy or vendor screenshots. Framer is a powerful, browser-based tool for designing, prototyping, and publishing responsive websites without coding. Most people only scratch the surface of it. They build one page from scratch, publish, and never touch the CMS or the animations panel again. This guide shows you how to use [&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\/ja\/wp-json\/wp\/v2\/posts\/78154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/comments?post=78154"}],"version-history":[{"count":0,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/posts\/78154\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/media\/78155"}],"wp:attachment":[{"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/media?parent=78154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/categories?post=78154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/tags?post=78154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}