{"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\/de\/how-to-use-framer","title":{"rendered":"So verwenden Sie Framer: Ein Leitfaden f\u00fcr Anf\u00e4nger im Jahr 2026"},"content":{"rendered":"\n<h2 id='quick-start'  id=\"boomdevs_1\" class=\"wp-block-heading\">Quick Start<\/h2>\n\n\n\n<div class=\"wp-block-group quick-start-logo is-layout-flow wp-block-group-is-layout-flow\"><style>.kb-image72232_9985b7-4f.kb-image-is-ratio-size, .kb-image72232_9985b7-4f .kb-image-is-ratio-size{max-width:350px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image72232_9985b7-4f.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image72232_9985b7-4f .kb-image-is-ratio-size{align-self:unset;}.kb-image72232_9985b7-4f figure{max-width:350px;}.kb-image72232_9985b7-4f .image-is-svg, .kb-image72232_9985b7-4f .image-is-svg img{width:100%;}.kb-image72232_9985b7-4f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image72232_9985b7-4f\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA.png\" alt=\"Framer CTA\" class=\"kb-img wp-image-53863\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA.png 800w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Framer-CTA-480x480.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure><\/div>\n<\/div>\n\n\n\n<p 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 [&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\/de\/wp-json\/wp\/v2\/posts\/78154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/comments?post=78154"}],"version-history":[{"count":2,"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/posts\/78154\/revisions"}],"predecessor-version":[{"id":222293,"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/posts\/78154\/revisions\/222293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/media\/78155"}],"wp:attachment":[{"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/media?parent=78154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/categories?post=78154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fahimai.com\/de\/wp-json\/wp\/v2\/tags?post=78154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}