{"id":77258,"date":"2025-03-18T10:13:57","date_gmt":"2025-03-18T10:13:57","guid":{"rendered":"https:\/\/fahimai.com\/?p=77258"},"modified":"2026-03-03T22:56:35","modified_gmt":"2026-03-03T19:56:35","slug":"how-to-use-codedesign-ai","status":"publish","type":"post","link":"https:\/\/www.fahimai.com\/ja\/how-to-use-codedesign-ai","title":{"rendered":"CodeDesign AI\u306e\u4f7f\u3044\u65b9 \u30b9\u30c6\u30c3\u30d7\u30d0\u30a4\u30b9\u30c6\u30c3\u30d7\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb 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-image71695_14d860-5e.kb-image-is-ratio-size, .kb-image71695_14d860-5e .kb-image-is-ratio-size{max-width:350px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image71695_14d860-5e.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image71695_14d860-5e .kb-image-is-ratio-size{align-self:unset;}.kb-image71695_14d860-5e figure{max-width:350px;}.kb-image71695_14d860-5e .image-is-svg, .kb-image71695_14d860-5e .image-is-svg img{width:100%;}.kb-image71695_14d860-5e .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image71695_14d860-5e\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-CTA.png\" alt=\"Codedesign CTA\" class=\"kb-img wp-image-53809\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-CTA.png 800w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-CTA-480x480.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure><\/div>\n<\/div>\n\n\n\n<p><strong>This guide covers every CodeDesign AI feature:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#getting-started-with-codedesign-ai\">Getting Started<\/a> \u2014 Create your account and first project<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-web-hosting\">How to Use AI Web Hosting<\/a> \u2014 Publish and host your site instantly<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-sales-funnel-builder\">How to Use AI Sales &amp; Marketing Funnel Builder<\/a> \u2014 Build funnels that convert visitors<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-seo-content-tools\">How to Use SEO Content Tools<\/a> \u2014 Rank higher on search engines<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-code-generator\">How to Use Free AI Code Generator<\/a> \u2014 Export clean HTML, CSS, and JavaScript<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-writing-tools\">How to Use AI Writing Tools<\/a> \u2014 Generate marketing copy in seconds<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-drag-drop-builder\">How to Use Drag &amp; Drop Website Builder<\/a> \u2014 Design pages without code<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-landing-page-builder\">How to Use Landing Page Builder<\/a> \u2014 Create high-converting landing pages<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-project-manager\">How to Use Project Manager<\/a> \u2014 Organize multiple websites at once<\/li>\n\n\n\n<li><a href=\"#how-to-use-codedesign-ai-template-builder\">How to Use Template Builder<\/a> \u2014 Create reusable custom templates<\/li>\n<\/ul>\n\n\n\n<p><strong>Time needed:<\/strong> 5 minutes per feature<\/p>\n\n\n\n<p><strong>Also in this guide:<\/strong> <a href=\"#codedesign-ai-pro-tips-and-shortcuts\">Pro Tips<\/a> | <a href=\"#codedesign-ai-common-mistakes-to-avoid\">Common Mistakes<\/a> | <a href=\"#codedesign-ai-troubleshooting\">Troubleshooting<\/a> | <a href=\"#codedesign-ai-pricing\">Pricing<\/a> | <a href=\"#codedesign-ai-vs-alternatives\">Alternatives<\/a><\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Why Trust This Guide<\/p>\n\n\n\n<p>I have used CodeDesign AI for over 6 months and tested every feature covered here. This how to use codedesign ai tutorial comes from real hands-on experience.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"420\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/03\/Fahim-AI-5-1-12.png\" alt=\"how to use codedesign\" class=\"wp-image-77259\" title=\"\" srcset=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/03\/Fahim-AI-5-1-12.png 800w, https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/03\/Fahim-AI-5-1-12-480x252.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure>\n\n\n\n<p>CodeDesign AI is one of the most powerful AI website builders available today.<\/p>\n\n\n\n<p>But most users only scratch the surface of what it can do.<\/p>\n\n\n\n<p>This guide shows you how to use every major feature.<\/p>\n\n\n\n<p>Step by step, with screenshots and pro tips.<\/p>\n\n\n\n<h2 id='codedesign-ai-tutorial'  id=\"boomdevs_2\" class=\"wp-block-heading\">CodeDesign AI Tutorial<\/h2>\n\n\n\n<p>This complete CodeDesign AI tutorial walks you through every feature step by step, from initial setup to advanced tips that will make you a power user.<\/p>\n\n\n\n<div class=\"wp-block-group cta-box-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns cta-box-inner is-layout-flex wp-container-core-columns-is-layout-3058809c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column cta-box-left is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group cta-box-logo is-layout-flow wp-block-group-is-layout-flow\"><style>.kb-image71695_14d860-5e.kb-image-is-ratio-size, .kb-image71695_14d860-5e .kb-image-is-ratio-size{max-width:350px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image71695_14d860-5e.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image71695_14d860-5e .kb-image-is-ratio-size{align-self:unset;}.kb-image71695_14d860-5e figure{max-width:350px;}.kb-image71695_14d860-5e .image-is-svg, .kb-image71695_14d860-5e .image-is-svg img{width:100%;}.kb-image71695_14d860-5e .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image71695_14d860-5e\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-CTA.png\" alt=\"Codedesign CTA\" class=\"kb-img wp-image-53809\" title=\"\" srcset=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-CTA.png 800w, https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-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\">CodeDesign AI<\/p>\n\n\n\n<p class=\"cta-box-description\">Build a professional website in under 60 seconds with AI. CodeDesign AI turns a simple text prompt into a fully designed, responsive site. Get started free with no coding needed.<\/p>\n\n\n\n<div class=\"wp-block-group cta-box-buttons is-layout-flow wp-block-group-is-layout-flow\">\n<p><a class=\"cta-btn cta-btn-primary\" href=\"https:\/\/fahimai.com\/get\/codedesign\" target=\"_blank\" rel=\"noopener\">TRY CODEDESIGN AI NOW \u2192<\/a><\/p>\n\n\n\n<p><a class=\"cta-btn cta-btn-secondary\" href=\"https:\/\/www.fahimai.com\/codedesign\">READ FULL REVIEW \u2192<\/a><\/p>\n\n\n\n<p><a class=\"cta-btn cta-btn-secondary\" href=\"https:\/\/www.fahimai.com\/codedesign-ai-alternatives\">CODEDESIGN AI ALTERNATIVES \u2192<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 id='getting-started-with-codedesign-ai'  id=\"boomdevs_3\" class=\"wp-block-heading\" id=\"getting-started-with-codedesign-ai\">Getting Started with CodeDesign AI<\/h3>\n\n\n\n<p>Before using any feature, complete this one-time setup.<\/p>\n\n\n\n<p>It takes about 3 minutes.<\/p>\n\n\n\n<p>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>Go to codedesign.ai and click &#8220;Get Started for Free.&#8221;<\/p>\n\n\n\n<p>Enter your email address and create a password.<\/p>\n\n\n\n<p>You can also sign up with your Google account.<\/p>\n\n\n\n<p>\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=\"48173\" target=\"_blank\" rel=\"noopener\">inbox<\/a> for a confirmation email.<\/p>\n\n\n\n<h4 id='step-2-generate-your-first-website'  id=\"boomdevs_5\" class=\"wp-block-heading\">Step 2: Generate Your First Website<\/h4>\n\n\n\n<p>Type a short description of the website you want to build.<\/p>\n\n\n\n<p>For example: &#8220;A photography portfolio with a contact form.&#8221;<\/p>\n\n\n\n<p>Here&#8217;s what the AI generation screen looks like:<\/p>\n\n\n<style>.kb-image053d3b_86d1d8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image053d3b_86d1d8 size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/homepage-3-1280x698.png\" alt=\"Codedesign ai Homepage\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a full website design in about 60 seconds.<\/p>\n\n\n\n<h4 id='step-3-explore-the-dashboard'  id=\"boomdevs_6\" class=\"wp-block-heading\">Step 3: Explore the Dashboard<\/h4>\n\n\n\n<p>Click through the main navigation to see all your tools.<\/p>\n\n\n\n<p>The dashboard shows your projects, templates, and settings.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Done:<\/strong> You&#8217;re ready to use any feature below.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-web-hosting'  id=\"boomdevs_7\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-web-hosting\">How to Use CodeDesign AI Web Hosting<\/h3>\n\n\n\n<p><strong>AI Web Hosting<\/strong> lets you publish your site on CodeDesign cloud servers with one click.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch AI Web Hosting in action:<\/p>\n\n\n<style>.kb-image6c1364_08aa5f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image6c1364_08aa5f size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/ai-web-hosting-980x611.png\" alt=\"Codedesign ai AI Web Hosting\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-your-project-settings'  id=\"boomdevs_8\" class=\"wp-block-heading\">Step 1: Open Your Project Settings<\/h4>\n\n\n\n<p>Go to your project and click the Publish button in the top menu.<\/p>\n\n\n\n<p>Select Host on CodeDesign from the dropdown options.<\/p>\n\n\n\n<h4 id='step-2-connect-your-domain'  id=\"boomdevs_9\" class=\"wp-block-heading\">Step 2: Connect Your Domain<\/h4>\n\n\n\n<p>Enter your custom domain name or use the free CodeDesign subdomain.<\/p>\n\n\n\n<p>Here is what this looks like:<\/p>\n\n\n<style>.kb-imagea2077b_5ad301 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-imagea2077b_5ad301 size-large\"><img decoding=\"async\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Untitled-design-19.png\" alt=\"Codedesign ai Top Benefits\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a green checkmark next to your domain.<\/p>\n\n\n\n<h4 id='step-3-click-publish'  id=\"boomdevs_10\" class=\"wp-block-heading\">Step 3: Click Publish<\/h4>\n\n\n\n<p>Hit the Publish button and your site goes live in seconds.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your website is live and hosted on CodeDesign cloud servers.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> CodeDesign enables SSL by default on all hosted sites. No extra setup needed for HTTPS.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-sales-marketing-funnel-builder'  id=\"boomdevs_11\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-sales-funnel-builder\">How to Use CodeDesign AI Sales &amp; Marketing Funnel Builder<\/h3>\n\n\n\n<p><strong>AI Sales &amp; Marketing Funnel Builder<\/strong> lets you create multi-step funnels that guide visitors toward a purchase.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch the Funnel Builder in action:<\/p>\n\n\n<style>.kb-image4f5e52_282465 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image4f5e52_282465 size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/AI-Sales-Marketing-Funnel-Builder-980x762.png\" alt=\"Codedesign ai AI Sales &amp; Marketing Funnel Builder\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-choose-a-funnel-template'  id=\"boomdevs_12\" class=\"wp-block-heading\">Step 1: Choose a Funnel Template<\/h4>\n\n\n\n<p>Click Sales Funnel from the dashboard and pick a funnel type.<\/p>\n\n\n\n<p>Options include lead capture, product launch, and webinar funnels.<\/p>\n\n\n\n<h4 id='step-2-customize-each-funnel-step'  id=\"boomdevs_13\" class=\"wp-block-heading\">Step 2: Customize Each Funnel Step<\/h4>\n\n\n\n<p>Edit the landing page, thank you page, and email capture form.<\/p>\n\n\n\n<p>Here is what this looks like:<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see all funnel steps connected in the flow editor.<\/p>\n\n\n\n<h4 id='step-3-connect-your-forms-and-go-live'  id=\"boomdevs_14\" class=\"wp-block-heading\">Step 3: Connect Your Forms and Go Live<\/h4>\n\n\n\n<p>Link your email service or <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/zapier\" title=\"Zapier\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48171\" target=\"_blank\" rel=\"noopener\">Zapier<\/a> integration to capture leads.<\/p>\n\n\n\n<p>Click Publish Funnel to make it live.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your sales funnel is live and ready to capture leads.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Start with the lead capture funnel template. It converts well and only needs two pages.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-seo-content-tools'  id=\"boomdevs_15\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-seo-content-tools\">How to Use CodeDesign AI SEO Content Tools<\/h3>\n\n\n\n<p><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/local-seo-tools\" title=\"SEO\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48177\" target=\"_blank\" rel=\"noopener\">SEO<\/a> Content Tools<\/strong> lets you write search-friendly copy that ranks higher on Google.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch SEO Content Tools in action:<\/p>\n\n\n<style>.kb-image7cf647_d74cd7 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7cf647_d74cd7 size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/seo-content-tools-980x390.png\" alt=\"Codedesign ai SEO Content Tools\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-the-seo-panel'  id=\"boomdevs_16\" class=\"wp-block-heading\">Step 1: Open the SEO Panel<\/h4>\n\n\n\n<p>Click on any page in your project and open the SEO settings tab.<\/p>\n\n\n\n<p>You will see fields for title tag, meta description, and keywords.<\/p>\n\n\n\n<h4 id='step-2-generate-seo-content-with-ai'  id=\"boomdevs_17\" class=\"wp-block-heading\">Step 2: Generate SEO Content with AI<\/h4>\n\n\n\n<p>Click Generate with AI to auto-fill your title and description.<\/p>\n\n\n\n<p>Here is what this looks like:<\/p>\n\n\n<style>.kb-image0a3de6_a95638 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image0a3de6_a95638 size-large\"><img decoding=\"async\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-top-benefits.png\" alt=\"Codedesign ai Personal Experience\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a green SEO score for your page.<\/p>\n\n\n\n<h4 id='step-3-add-alt-text-and-headings'  id=\"boomdevs_18\" class=\"wp-block-heading\">Step 3: Add Alt Text and Headings<\/h4>\n\n\n\n<p>Make sure every image has alt text and your page uses H1 and H2 tags.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your page is now search-engine friendly and ready to rank.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use the meta description <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-text-generator\" title=\"generator\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48182\" target=\"_blank\" rel=\"noopener\">generator<\/a> to write click-worthy snippets for better click-through rates.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-free-ai-code-generator'  id=\"boomdevs_19\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-code-generator\">How to Use CodeDesign AI Free AI Code Generator<\/h3>\n\n\n\n<p><strong>Free AI Code Generator<\/strong> lets you export clean HTML, CSS, and JavaScript from any project.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch the Code Generator in action:<\/p>\n\n\n<style>.kb-image5f4c91_c568e4 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image5f4c91_c568e4 size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/Free-AI-Code-Generator-980x834.png\" alt=\"Codedesign ai Free AI Code Generator\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-the-code-export-panel'  id=\"boomdevs_20\" class=\"wp-block-heading\">Step 1: Open the Code Export Panel<\/h4>\n\n\n\n<p>Go to your project settings and click Export Code.<\/p>\n\n\n\n<p>Choose between HTML\/CSS or React export options.<\/p>\n\n\n\n<h4 id='step-2-preview-and-download-the-code'  id=\"boomdevs_21\" class=\"wp-block-heading\">Step 2: Preview and Download the Code<\/h4>\n\n\n\n<p>Review the generated code in the preview window.<\/p>\n\n\n\n<p>Click Download to save the files to your computer.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see a ZIP file with all your code files inside.<\/p>\n\n\n\n<h4 id='step-3-deploy-to-your-own-host'  id=\"boomdevs_22\" class=\"wp-block-heading\">Step 3: Deploy to Your Own Host<\/h4>\n\n\n\n<p>Upload the exported files to any web hosting provider you prefer.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You have clean, production-ready code you can host anywhere.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Open the exported code in VS Code first. Test locally before pushing to your live server.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-writing-tools'  id=\"boomdevs_23\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-writing-tools\">How to Use CodeDesign AI Writing Tools<\/h3>\n\n\n\n<p><strong>AI Writing Tools<\/strong> lets you generate headlines, paragraphs, and marketing copy in seconds.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch AI Writing Tools in action:<\/p>\n\n\n<style>.kb-image74f935_9a28c2 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image74f935_9a28c2 size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/ai-writing-tools-1024x955.png\" alt=\"Codedesign ai AI Writing Tools\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-select-the-writing-tool-you-need'  id=\"boomdevs_24\" class=\"wp-block-heading\">Step 1: Select the Writing Tool You Need<\/h4>\n\n\n\n<p>Go to the AI Writing Tools section from the main navigation.<\/p>\n\n\n\n<p>Choose from paragraph generator, slogan maker, or brand name creator.<\/p>\n\n\n\n<h4 id='step-2-enter-your-prompt'  id=\"boomdevs_25\" class=\"wp-block-heading\">Step 2: Enter Your Prompt<\/h4>\n\n\n\n<p>Type a short description of what you need the AI to write.<\/p>\n\n\n\n<p>Click Generate and wait a few seconds for the result.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see multiple text options to pick from.<\/p>\n\n\n\n<h4 id='step-3-copy-or-apply-to-your-website'  id=\"boomdevs_26\" class=\"wp-block-heading\">Step 3: Copy or Apply to Your Website<\/h4>\n\n\n\n<p>Click Copy to paste the text anywhere, or apply it directly to your page.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You have fresh, AI-written copy ready for your website.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use AI Magic to rewrite existing copy. Select any text block, click AI Magic, and pick Rewrite.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-drag-drop-website-builder'  id=\"boomdevs_27\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-drag-drop-builder\">How to Use CodeDesign AI Drag &amp; Drop Website Builder<\/h3>\n\n\n\n<p><strong>Drag &amp; Drop Website Builder<\/strong> lets you design pages by moving elements around visually.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch the Drag &amp; Drop Builder in action:<\/p>\n\n\n<style>.kb-image5405ed_3eb151 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image5405ed_3eb151 size-large\"><img decoding=\"async\" src=\"https:\/\/www.fahimai.com\/wp-content\/uploads\/2025\/02\/drag-drop-website-builder-980x454.png\" alt=\"Codedesign ai Drag &amp; Drop Website Builder\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-open-the-page-editor'  id=\"boomdevs_28\" class=\"wp-block-heading\">Step 1: Open the Page Editor<\/h4>\n\n\n\n<p>Click on any page in your project to enter the visual editor.<\/p>\n\n\n\n<p>You will see the design canvas with your current page layout.<\/p>\n\n\n\n<h4 id='step-2-add-and-move-elements'  id=\"boomdevs_29\" class=\"wp-block-heading\">Step 2: Add and Move Elements<\/h4>\n\n\n\n<p>Drag components from the left panel onto your page.<\/p>\n\n\n\n<p>Choose from 300+ design components like galleries, testimonials, and forms.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see new sections on your page that you can click to edit.<\/p>\n\n\n\n<h4 id='step-3-style-each-element'  id=\"boomdevs_30\" class=\"wp-block-heading\">Step 3: Style Each Element<\/h4>\n\n\n\n<p>Click any element to change its colors, fonts, spacing, and size.<\/p>\n\n\n\n<p>All changes show up in real time on the canvas.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You have built a custom page layout without writing any code.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Use the AI Companion to make edits with natural language. Just type &#8220;make the header bigger&#8221; and the AI does it.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-landing-page-builder'  id=\"boomdevs_31\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-landing-page-builder\">How to Use CodeDesign AI Landing Page Builder<\/h3>\n\n\n\n<p><strong>Landing Page Builder<\/strong> lets you create single-page sites designed to capture leads or sell products.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch the Landing Page Builder in action:<\/p>\n\n\n<style>.kb-imagedd5a56_fbda9e .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-imagedd5a56_fbda9e size-large\"><img decoding=\"async\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-landing-page-builder.png\" alt=\"Codedesign ai Landing Page Builder\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-pick-a-landing-page-template'  id=\"boomdevs_32\" class=\"wp-block-heading\">Step 1: Pick a Landing Page Template<\/h4>\n\n\n\n<p>Open the AI Landing Page Generator from the dashboard.<\/p>\n\n\n\n<p>Type a description like &#8220;landing page for a fitness app launch.&#8221;<\/p>\n\n\n\n<h4 id='step-2-edit-the-hero-section-and-cta'  id=\"boomdevs_33\" class=\"wp-block-heading\">Step 2: Edit the Hero Section and CTA<\/h4>\n\n\n\n<p>Change the headline, subtext, and call-to-action button text.<\/p>\n\n\n\n<p>Add your own images or let the AI find stock photos for you.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> Your landing page should have a clear headline and one main CTA button.<\/p>\n\n\n\n<h4 id='step-3-add-a-form-and-publish'  id=\"boomdevs_34\" class=\"wp-block-heading\">Step 3: Add a Form and Publish<\/h4>\n\n\n\n<p>Drag a form block onto the page and connect it to your email tool.<\/p>\n\n\n\n<p>Click Publish to make the landing page live.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> Your landing page is live and collecting leads.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Keep your landing page to one screen. Remove the navigation menu so visitors focus on your CTA.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-project-manager'  id=\"boomdevs_35\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-project-manager\">How to Use CodeDesign AI Project Manager<\/h3>\n\n\n\n<p><strong>Project Manager<\/strong> lets you organize and track multiple websites from one dashboard.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch Project Manager in action:<\/p>\n\n\n<style>.kb-imagedd41cb_bad330 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-imagedd41cb_bad330 size-large\"><img decoding=\"async\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-project-manager.png\" alt=\"Codedesign ai Project Manager\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-create-a-new-project'  id=\"boomdevs_36\" class=\"wp-block-heading\">Step 1: Create a New Project<\/h4>\n\n\n\n<p>Click New Project from your dashboard and give it a name.<\/p>\n\n\n\n<p>Add a description so your team knows what the project is for.<\/p>\n\n\n\n<h4 id='step-2-invite-team-members'  id=\"boomdevs_37\" class=\"wp-block-heading\">Step 2: Invite Team Members<\/h4>\n\n\n\n<p>Click Share and enter your team member&#8217;s email address.<\/p>\n\n\n\n<p>Set their permission level to editor or viewer.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> Your team member should get an email invite to join the project.<\/p>\n\n\n\n<h4 id='step-3-track-progress-and-updates'  id=\"boomdevs_38\" class=\"wp-block-heading\">Step 3: Track Progress and Updates<\/h4>\n\n\n\n<p>Use the project view to see all pages, their status, and recent edits.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You can manage multiple client sites from one central place.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Create separate projects for each client. This keeps files organized and makes sharing easy.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-template-builder'  id=\"boomdevs_39\" class=\"wp-block-heading\" id=\"how-to-use-codedesign-ai-template-builder\">How to Use CodeDesign AI Template Builder<\/h3>\n\n\n\n<p><strong>Template Builder<\/strong> lets you create reusable designs you can apply to new projects.<\/p>\n\n\n\n<p>Here is how to use it step by step.<\/p>\n\n\n\n<p>Watch Template Builder in action:<\/p>\n\n\n<style>.kb-image6af9ba_0c3a86 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image6af9ba_0c3a86 size-large\"><img decoding=\"async\" src=\"https:\/\/fahimai.com\/wp-content\/uploads\/2025\/02\/Codedesign-template-builder.png\" alt=\"Codedesign ai Template Builder\" class=\"kb-img\" title=\"\"><\/figure>\n\n\n\n<p>Now let us break down each step.<\/p>\n\n\n\n<h4 id='step-1-start-from-scratch-or-use-a-base'  id=\"boomdevs_40\" class=\"wp-block-heading\">Step 1: Start from Scratch or Use a Base<\/h4>\n\n\n\n<p>Open the Template Builder and choose Blank or pick an existing design.<\/p>\n\n\n\n<p>Add your brand colors, fonts, and logo to the base layout.<\/p>\n\n\n\n<h4 id='step-2-build-your-template-sections'  id=\"boomdevs_41\" class=\"wp-block-heading\">Step 2: Build Your Template Sections<\/h4>\n\n\n\n<p>Add reusable sections like header, footer, hero, and contact blocks.<\/p>\n\n\n\n<p>Save each section so you can drop it into future projects.<\/p>\n\n\n\n<p>\u2713 <strong>Checkpoint:<\/strong> You should see your saved template in the Templates section of the dashboard.<\/p>\n\n\n\n<h4 id='step-3-apply-the-template-to-a-new-project'  id=\"boomdevs_42\" class=\"wp-block-heading\">Step 3: Apply the Template to a New Project<\/h4>\n\n\n\n<p>Create a new project and select your custom template as the starting point.<\/p>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Result:<\/strong> You have a reusable template that saves hours on every new project.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group tip-box is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> Build one master template with your brand style. Use it as the base for every new site.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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='codedesign-ai-pro-tips-and-shortcuts'  id=\"boomdevs_43\" class=\"wp-block-heading\" id=\"codedesign-ai-pro-tips-and-shortcuts\">CodeDesign AI Pro Tips and Shortcuts<\/h2>\n\n\n\n<p>After testing CodeDesign AI for over 6 months, here are my best tips.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Keyboard Shortcuts<\/p>\n\n\n\n<figure class=\"wp-block-table fahimai-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Action<\/th><th>Shortcut<\/th><\/tr><\/thead><tbody><tr><td>Undo last change<\/td><td>Ctrl + Z (Cmd + Z on <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=\"48178\" target=\"_blank\" rel=\"noopener\">Mac<\/a>)<\/td><\/tr><tr><td>Redo last change<\/td><td>Ctrl + Y (Cmd + Shift + Z on <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/accounting-software-for-mac\" title=\"Mac\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48191\" target=\"_blank\" rel=\"noopener\">Mac<\/a>)<\/td><\/tr><tr><td>Duplicate an element<\/td><td>Ctrl + D (Cmd + D on Mac)<\/td><\/tr><tr><td>Delete selected element<\/td><td>Delete \/ Backspace<\/td><\/tr><tr><td>Preview your site<\/td><td>Ctrl + P (Cmd + P on Mac)<\/td><\/tr><tr><td>Save your project<\/td><td>Ctrl + S (Cmd + S on Mac)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Hidden Features Most People Miss<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>AI Vibe Coding:<\/strong> Type natural language prompts to change your site structure and design without touching any element directly.<\/li>\n\n\n\n<li><strong>AI Magic on Images:<\/strong> Select any image block, click AI Magic, and the AI will swap in a better-fitting photo based on your page content.<\/li>\n\n\n\n<li><strong>Responsive Visibility Toggle:<\/strong> Hide specific elements on mobile, tablet, or desktop by clicking any element and toggling visibility per device.<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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='codedesign-ai-common-mistakes-to-avoid'  id=\"boomdevs_44\" class=\"wp-block-heading\" id=\"codedesign-ai-common-mistakes-to-avoid\">CodeDesign AI Common Mistakes to Avoid<\/h2>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #1: Using AI-Generated Text Without Editing<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u274c Wrong:<\/strong> Publishing AI-generated copy exactly as it comes out of the tool.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Right:<\/strong> Always edit AI text to match your brand <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/ai-voice-cloning\" title=\"voice\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48172\" target=\"_blank\" rel=\"noopener\">voice<\/a>. Add specific details about your <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=\"48174\">business<\/a>.<\/p>\n<\/div>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #2: Skipping Mobile Responsiveness Checks<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u274c Wrong:<\/strong> Only previewing your site on desktop before publishing.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Right:<\/strong> Always check mobile and tablet views. Use the responsive preview tool before you hit publish.<\/p>\n<\/div>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Mistake #3: Not Setting Up SEO Before Publishing<\/p>\n\n\n\n<div class=\"wp-block-group con-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u274c Wrong:<\/strong> Publishing a site with blank title tags and missing meta descriptions.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group pro-item is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>\u2705 Right:<\/strong> Fill in every SEO field using the AI SEO tools before you publish. It takes less than 2 minutes per page.<\/p>\n<\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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='codedesign-ai-troubleshooting'  id=\"boomdevs_45\" class=\"wp-block-heading\" id=\"codedesign-ai-troubleshooting\">CodeDesign AI Troubleshooting<\/h2>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: AI-Generated Design Looks Generic<\/p>\n\n\n\n<p><strong>Cause:<\/strong> Your prompt was too short or vague for the AI to work with.<\/p>\n\n\n\n<p><strong>Fix:<\/strong> Write a detailed prompt with your <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-crm-for-small-construction-business\" title=\"business\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48188\" target=\"_blank\" rel=\"noopener\">business<\/a> type, color preferences, and target audience. Then regenerate.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: Custom Domain Not Connecting<\/p>\n\n\n\n<p><strong>Cause:<\/strong> DNS records have not updated yet or the settings are wrong.<\/p>\n\n\n\n<p><strong>Fix:<\/strong> Double-check your CNAME and A records in your domain registrar. Wait up to 48 hours for DNS to propagate.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Problem: Page Loads Slowly After Publishing<\/p>\n\n\n\n<p><strong>Cause:<\/strong> Large image files are slowing down your page speed.<\/p>\n\n\n\n<p><strong>Fix:<\/strong> Compress images before uploading or use CodeDesign built-in image tools. Aim for under 200 KB per image.<\/p>\n\n\n\n<p>\ud83d\udccc <strong>Note:<\/strong> If none of these fix your issue, contact CodeDesign AI support.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai'  id=\"boomdevs_46\" class=\"wp-block-heading\">What is CodeDesign AI?<\/h2>\n\n\n\n<p><strong>CodeDesign AI<\/strong> is an AI website builder that creates professional, responsive websites from simple text prompts.<\/p>\n\n\n\n<p>Think of it like having a web designer and developer on your team but powered by AI and ready in 60 seconds.<\/p>\n\n\n\n<p>Watch this quick overview:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CodeDesign.ai Review - The EASIEST Way To Build a Website With AI in 2025?\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/JdruFdxyMb4?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It includes these key features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>AI Web Hosting:<\/strong> Publish and host your site on CodeDesign cloud in one click.<\/li>\n\n\n\n<li><strong>AI Sales and Marketing Funnel Builder:<\/strong> Build multi-step funnels that capture leads and drive sales.<\/li>\n\n\n\n<li><strong>SEO Content Tools:<\/strong> Write search-friendly titles, descriptions, and blog posts with AI.<\/li>\n\n\n\n<li><strong>Free AI Code Generator:<\/strong> Export clean HTML, CSS, JavaScript, or React code from any project.<\/li>\n\n\n\n<li><strong>AI Writing Tools:<\/strong> Generate marketing copy, slogans, and content in seconds.<\/li>\n\n\n\n<li><strong>Drag and Drop Website Builder:<\/strong> Build pages visually with 300+ design components.<\/li>\n\n\n\n<li><strong>Landing Page Builder:<\/strong> Create single-page sites focused on lead capture.<\/li>\n\n\n\n<li><strong>Project Manager:<\/strong> Organize multiple sites and collaborate with your team.<\/li>\n\n\n\n<li><strong>Template Builder:<\/strong> Create reusable custom templates for faster builds.<\/li>\n<\/ul>\n\n\n\n<p>For a full review, see our <a href=\"https:\/\/www.fahimai.com\/codedesign\">CodeDesign AI review<\/a>.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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='codedesign-ai-pricing'  id=\"boomdevs_47\" class=\"wp-block-heading\" id=\"codedesign-ai-pricing\">CodeDesign AI Pricing<\/h2>\n\n\n\n<p>Here is what CodeDesign AI costs in 2026:<\/p>\n\n\n\n<figure class=\"wp-block-table fahimai-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Plan<\/th><th>Price<\/th><th>Best For<\/th><\/tr><\/thead><tbody><tr><td>Free Plan<\/td><td>$0<\/td><td>Testing the platform and building simple sites<\/td><\/tr><tr><td>Basic Plan<\/td><td>$15\/month<\/td><td>Personal projects and small websites<\/td><\/tr><tr><td>Standard Plan<\/td><td>$29\/month<\/td><td>Businesses needing more pages and AI regenerations<\/td><\/tr><tr><td>Growth Plan<\/td><td>$49\/month<\/td><td>Agencies and complex sites with code export<\/td><\/tr><tr><td>Lifetime Deals<\/td><td>Starting at $97<\/td><td>One-time payment for full access forever<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Free trial:<\/strong> Yes. The free plan lets you build up to 3 projects with 6 AI regenerations.<\/p>\n\n\n\n<p><strong>Money-back guarantee:<\/strong> Contact support for refund requests.<\/p>\n\n\n\n<p><strong>Best Value:<\/strong> Lifetime Deal. One payment gives you all features with no monthly costs.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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='codedesign-ai-vs-alternatives'  id=\"boomdevs_48\" class=\"wp-block-heading\" id=\"codedesign-ai-vs-alternatives\">CodeDesign AI vs Alternatives<\/h2>\n\n\n\n<p>How does CodeDesign AI compare? Here is the competitive landscape:<\/p>\n\n\n\n<figure class=\"wp-block-table fahimai-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Tool<\/th><th>Best For<\/th><th>Price<\/th><th>Rating<\/th><\/tr><\/thead><tbody><tr><td><strong>CodeDesign AI<\/strong><\/td><td>AI prompt-to-website building<\/td><td>$0-$49\/mo<\/td><td>4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/gamma-ai\" title=\"Gamma\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48187\" target=\"_blank\" rel=\"noopener\">Gamma<\/a><\/td><td>AI <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-presentation-maker\" title=\"presentations\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48176\" target=\"_blank\" rel=\"noopener\">presentations<\/a> and web pages<\/td><td>$0-$15\/mo<\/td><td>4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/durable-ai\" title=\"Durable\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48184\" target=\"_blank\" rel=\"noopener\">Durable<\/a><\/td><td>Quick AI business websites<\/td><td>$12-$20\/mo<\/td><td>4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/butternut\" title=\"Butternut\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48179\" target=\"_blank\" rel=\"noopener\">Butternut<\/a> AI<\/td><td>Fast AI-generated landing pages<\/td><td>$20-$69\/mo<\/td><td>4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/siter\" title=\"Siter\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48186\" target=\"_blank\" rel=\"noopener\">Siter<\/a><\/td><td>Simple no-code web design<\/td><td>$0-$24\/mo<\/td><td>4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/10web\" title=\"10Web\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48189\" target=\"_blank\" rel=\"noopener\">10Web<\/a><\/td><td>AI WordPress site building<\/td><td>$10-$23\/mo<\/td><td>4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/pineapple-builder\" title=\"Pineapple Builder\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48192\" target=\"_blank\" rel=\"noopener\">Pineapple Builder<\/a><\/td><td>Startup landing pages<\/td><td>$0-$24\/mo<\/td><td>4.5<\/td><\/tr><tr><td><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/framer\" title=\"Framer\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48190\" target=\"_blank\" rel=\"noopener\">Framer<\/a><\/td><td>Designer-grade interactive sites<\/td><td>$10-$100\/mo<\/td><td>4.5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">Quick picks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Best overall:<\/strong> CodeDesign AI. Full AI website builder with hosting, funnels, and code export in one place.<\/li>\n\n\n\n<li><strong>Best budget:<\/strong> Siter. Free plan with paid options starting at $7\/month.<\/li>\n\n\n\n<li><strong>Best for beginners:<\/strong> Durable. Generates a complete business site in under 30 seconds.<\/li>\n\n\n\n<li><strong>Best for designers:<\/strong> Framer. Gives the most control over layout and animation.<\/li>\n<\/ul>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">CodeDesign AI Alternatives<\/p>\n\n\n\n<p>Looking for CodeDesign AI alternatives? Here are the top options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gamma:<\/strong> Best for turning ideas into polished presentations and one-page sites with AI. Free plan available.<\/li>\n\n\n\n<li><strong>Durable:<\/strong> Builds a full business website in seconds with built-in <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-crm-software-for-accountants\" title=\"CRM\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48170\" target=\"_blank\" rel=\"noopener\">CRM<\/a> and invoicing tools. Starts at $12\/month.<\/li>\n\n\n\n<li><strong>Butternut AI:<\/strong> Creates multi-page websites from a single prompt with strong visual design. Plans from $20\/month.<\/li>\n\n\n\n<li><strong>Siter:<\/strong> Lightweight no-code builder with a generous free plan and clean interface. Paid plans from $7\/month.<\/li>\n\n\n\n<li><strong>10Web:<\/strong> AI-powered WordPress builder that handles hosting, speed, and <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-password-manager\" title=\"security\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48193\" target=\"_blank\" rel=\"noopener\">security<\/a>. Plans from $10\/month.<\/li>\n\n\n\n<li><strong>Pineapple Builder:<\/strong> Perfect for startups that need a landing page fast. Free starter plan with AI design tools.<\/li>\n\n\n\n<li><strong>Framer:<\/strong> Pro-level design freedom with animations, interactions, and CMS. Plans from $10\/month.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/dorik\" title=\"Dorik\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48195\" target=\"_blank\" rel=\"noopener\">Dorik<\/a>:<\/strong> Clean, modern builder with white-label options for agencies. Personal plan starts at $10.38\/month.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/typedream\" title=\"Typedream\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48185\" target=\"_blank\" rel=\"noopener\">Typedream<\/a>:<\/strong> Simple Notion-style editor that makes building sites feel like writing a doc. Free plan included.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/jimdo\" title=\"Jimdo\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48194\" target=\"_blank\" rel=\"noopener\">Jimdo<\/a>:<\/strong> Trusted builder with AI-assisted setup and built-in e-commerce. Free plan with paid from $11\/month.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/b12-ai\" title=\"B12\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48181\" target=\"_blank\" rel=\"noopener\">B12<\/a>:<\/strong> AI builds your site and adds scheduling, invoicing, and contracts for service businesses. From $42\/month.<\/li>\n\n\n\n<li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/appy-pie\" title=\"Appy Pie\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48183\" target=\"_blank\" rel=\"noopener\">Appy Pie<\/a>:<\/strong> No-code platform for websites and mobile apps in one place. Plans from $16\/month.<\/li>\n<\/ul>\n\n\n\n<p>For the full list, see our <a href=\"https:\/\/www.fahimai.com\/codedesign-ai-alternatives\">CodeDesign AI alternatives<\/a> guide.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:15px;font-size:25px;font-weight:600\">CodeDesign AI Compared<\/p>\n\n\n\n<p>Here is how CodeDesign AI stacks up against each competitor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CodeDesign AI vs Gamma:<\/strong> CodeDesign is a full website builder with hosting. Gamma focuses on presentations and simple web pages.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Durable:<\/strong> Both use AI to build sites fast. CodeDesign gives more design control while Durable adds <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-crm-for-travel-agency\" title=\"CRM\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48180\" target=\"_blank\" rel=\"noopener\">CRM<\/a> tools.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Butternut AI:<\/strong> Both create sites from prompts. CodeDesign offers code export and funnel building that Butternut lacks.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Siter:<\/strong> Siter is simpler and cheaper. CodeDesign offers more AI features and built-in marketing tools.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs 10Web:<\/strong> 10Web is WordPress-only. CodeDesign works on its own platform and also syncs to WordPress.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Pineapple Builder:<\/strong> Both target startups. CodeDesign has more features at scale while Pineapple stays lightweight.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Framer:<\/strong> Framer gives more design control for pros. CodeDesign is easier for beginners who want AI to do the work.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Dorik:<\/strong> Dorik has white-label options for agencies. CodeDesign offers stronger AI content and SEO tools.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Typedream:<\/strong> Typedream has a simpler editor. CodeDesign has more AI power and built-in funnel building.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Jimdo:<\/strong> Jimdo is better for e-commerce shops. CodeDesign is better for AI-powered site generation and marketing.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs B12:<\/strong> B12 bundles business tools like invoicing. CodeDesign focuses on fast AI design and code export.<\/li>\n\n\n\n<li><strong>CodeDesign AI vs Appy Pie:<\/strong> Appy Pie also builds mobile apps. CodeDesign is stronger at AI website design and hosting.<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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-codedesign-ai-now'  id=\"boomdevs_49\" class=\"wp-block-heading\">Start Using CodeDesign AI Now<\/h2>\n\n\n\n<p>You learned how to use every major CodeDesign AI feature:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>AI Web Hosting<\/li>\n\n\n\n<li>AI Sales and Marketing Funnel Builder<\/li>\n\n\n\n<li>SEO Content Tools<\/li>\n\n\n\n<li>Free AI Code Generator<\/li>\n\n\n\n<li>AI Writing Tools<\/li>\n\n\n\n<li>Drag and Drop Website Builder<\/li>\n\n\n\n<li>Landing Page Builder<\/li>\n\n\n\n<li>Project Manager<\/li>\n\n\n\n<li>Template Builder<\/li>\n<\/ul>\n\n\n\n<p><strong>Next step:<\/strong> Pick one feature and try it now.<\/p>\n\n\n\n<p>Most people start with the AI website generator.<\/p>\n\n\n\n<p>It takes less than 60 seconds.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns144111_59667a-0c{padding-top:var(--global-kb-spacing-xs, 1rem);gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns144111_59667a-0c .kt-button{font-weight:normal;font-style:normal;}.kt-btns144111_59667a-0c .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns144111_59667a-0c .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns144111_59667a-0c\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button{background:#ff7700;text-transform:uppercase;}.wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn144111_2b015c-e8.kb-button:focus{color:#ffffff;background:#ff7700;}<\/style><a class=\"kb-button kt-button button kb-btn144111_2b015c-e8 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\/codedesign\" target=\"_blank\" rel=\"noopener\"><span class=\"kt-btn-inner-text\"><strong>Try CodeDesign 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_50\" class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Is CodeDesign AI free?<\/p>\n\n\n\n<p>Yes, CodeDesign AI has a free plan that lets you build up to 3 projects. You get 6 AI design regenerations and access to core features. Paid plans start at $15\/month for more pages and AI power.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Who is the founder of CodeDesign AI?<\/p>\n\n\n\n<p>CodeDesign AI was founded by Sai Krishna. The company is based in Lewes, Delaware, USA. It has grown to serve over 350,000 users who have built more than 4 million sites on the platform.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Can I use my own domain with CodeDesign AI?<\/p>\n\n\n\n<p>Yes, you can connect a custom domain to any CodeDesign AI project. The platform also lets you buy domains directly from the dashboard. Free plans include a CodeDesign subdomain by default.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">What is the best AI platform for coding websites?<\/p>\n\n\n\n<p>CodeDesign AI is one of the top picks for AI-powered website building. It generates full websites from text prompts and lets you export clean code. For pure coding, tools like GitHub Copilot handle code generation. For no-code website building, CodeDesign AI leads the pack.<\/p>\n\n\n\n<p style=\"margin-top:25px;margin-bottom:10px;font-size:25px;font-weight:600\">Are AI website builders worth it?<\/p>\n\n\n\n<p>Yes, if you need a professional website fast without hiring a developer. <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/best-ai-website-builder\" title=\"AI builders\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48169\" target=\"_blank\" rel=\"noopener\">AI builders<\/a> like CodeDesign AI can create a full site in under a minute. They work best for small businesses, <a class=\"wpil_keyword_link\" href=\"https:\/\/fahimai.com\/accounting-software-for-freelancers\" title=\"freelancers\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"48175\" target=\"_blank\" rel=\"noopener\">freelancers<\/a>, and startups that need to launch quickly on a budget.<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n\n{\n\n  \"@context\": \"https:\/\/schema.org\",\n\n  \"@graph\": [\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-getting-started\",\n\n      \"name\": \"How to Get Started with CodeDesign AI\",\n\n      \"description\": \"Set up your CodeDesign AI account and generate your first website\",\n\n      \"totalTime\": \"PT3M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Create Your Account\", \"text\": \"Go to codedesign.ai, click Get Started for Free, enter your email and create a password\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Generate Your First Website\", \"text\": \"Type a short description of the website you want and let the AI generate a design in 60 seconds\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Explore the Dashboard\", \"text\": \"Click through the main navigation to see your projects, templates, and settings\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-web-hosting\",\n\n      \"name\": \"How to Use CodeDesign AI Web Hosting\",\n\n      \"description\": \"Publish and host your website on CodeDesign AI cloud servers with one click\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open Your Project Settings\", \"text\": \"Go to your project and click the Publish button in the top menu\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Connect Your Domain\", \"text\": \"Enter your custom domain name or use the free CodeDesign subdomain\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Click Publish\", \"text\": \"Hit the Publish button and your site goes live in seconds\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-sales-funnel-builder\",\n\n      \"name\": \"How to Use CodeDesign AI Sales and Marketing Funnel Builder\",\n\n      \"description\": \"Create multi-step funnels that guide visitors toward a purchase\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Choose a Funnel Template\", \"text\": \"Click Sales Funnel from the dashboard and pick a funnel type\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Customize Each Funnel Step\", \"text\": \"Edit the landing page, thank you page, and email capture form\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Connect Your Forms and Go Live\", \"text\": \"Link your email service or Zapier integration and click Publish Funnel\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-seo-content-tools\",\n\n      \"name\": \"How to Use CodeDesign AI SEO Content Tools\",\n\n      \"description\": \"Write search-friendly copy that ranks higher on Google\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open the SEO Panel\", \"text\": \"Click on any page in your project and open the SEO settings tab\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Generate SEO Content with AI\", \"text\": \"Click Generate with AI to auto-fill your title and description\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Add Alt Text and Headings\", \"text\": \"Make sure every image has alt text and your page uses H1 and H2 tags\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-code-generator\",\n\n      \"name\": \"How to Use CodeDesign AI Free Code Generator\",\n\n      \"description\": \"Export clean HTML CSS and JavaScript from any project\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open the Code Export Panel\", \"text\": \"Go to your project settings and click Export Code\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Preview and Download the Code\", \"text\": \"Review the generated code in the preview window and click Download\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Deploy to Your Own Host\", \"text\": \"Upload the exported files to any web hosting provider\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-writing-tools\",\n\n      \"name\": \"How to Use CodeDesign AI Writing Tools\",\n\n      \"description\": \"Generate headlines paragraphs and marketing copy in seconds\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Select the Writing Tool You Need\", \"text\": \"Go to the AI Writing Tools section and choose from paragraph generator slogan maker or brand name creator\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Enter Your Prompt\", \"text\": \"Type a short description of what you need the AI to write and click Generate\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Copy or Apply to Your Website\", \"text\": \"Click Copy to paste the text anywhere or apply it directly to your page\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-drag-drop-builder\",\n\n      \"name\": \"How to Use CodeDesign AI Drag and Drop Website Builder\",\n\n      \"description\": \"Design pages by moving elements around visually without code\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Open the Page Editor\", \"text\": \"Click on any page in your project to enter the visual editor\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Add and Move Elements\", \"text\": \"Drag components from the left panel onto your page from 300 plus design components\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Style Each Element\", \"text\": \"Click any element to change its colors fonts spacing and size\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-landing-page-builder\",\n\n      \"name\": \"How to Use CodeDesign AI Landing Page Builder\",\n\n      \"description\": \"Create single-page sites designed to capture leads or sell products\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Pick a Landing Page Template\", \"text\": \"Open the AI Landing Page Generator and type a description of what you need\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Edit the Hero Section and CTA\", \"text\": \"Change the headline subtext and call-to-action button text\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Add a Form and Publish\", \"text\": \"Drag a form block onto the page connect it to your email tool and click Publish\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-project-manager\",\n\n      \"name\": \"How to Use CodeDesign AI Project Manager\",\n\n      \"description\": \"Organize and track multiple websites from one dashboard\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Create a New Project\", \"text\": \"Click New Project from your dashboard and give it a name\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Invite Team Members\", \"text\": \"Click Share and enter your team member email address with editor or viewer permission\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Track Progress and Updates\", \"text\": \"Use the project view to see all pages their status and recent edits\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"HowTo\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#howto-template-builder\",\n\n      \"name\": \"How to Use CodeDesign AI Template Builder\",\n\n      \"description\": \"Create reusable designs you can apply to new projects\",\n\n      \"totalTime\": \"PT5M\",\n\n      \"step\": [\n\n        {\"@type\": \"HowToStep\", \"name\": \"Start from Scratch or Use a Base\", \"text\": \"Open the Template Builder and choose Blank or pick an existing design\", \"position\": 1},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Build Your Template Sections\", \"text\": \"Add reusable sections like header footer hero and contact blocks\", \"position\": 2},\n\n        {\"@type\": \"HowToStep\", \"name\": \"Apply the Template to a New Project\", \"text\": \"Create a new project and select your custom template as the starting point\", \"position\": 3}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"SoftwareApplication\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#software\",\n\n      \"name\": \"CodeDesign AI\",\n\n      \"description\": \"CodeDesign AI is an AI-powered website builder that creates professional responsive websites from simple text prompts with drag-and-drop editing cloud hosting and code export.\",\n\n      \"applicationCategory\": \"Website Builder\",\n\n      \"operatingSystem\": \"Web, iOS, Android\",\n\n      \"url\": \"https:\/\/fahimai.com\/get\/codedesign\",\n\n      \"offers\": {\n\n        \"@type\": \"AggregateOffer\",\n\n        \"priceCurrency\": \"USD\",\n\n        \"lowPrice\": \"0\",\n\n        \"highPrice\": \"49\",\n\n        \"offerCount\": \"4\",\n\n        \"offers\": [\n\n          {\"@type\": \"Offer\", \"name\": \"Free Plan\", \"price\": \"0\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"},\n\n          {\"@type\": \"Offer\", \"name\": \"Basic Plan\", \"price\": \"15\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"},\n\n          {\"@type\": \"Offer\", \"name\": \"Standard Plan\", \"price\": \"29\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"},\n\n          {\"@type\": \"Offer\", \"name\": \"Growth Plan\", \"price\": \"49\", \"priceCurrency\": \"USD\", \"priceValidUntil\": \"2026-12-31\", \"availability\": \"https:\/\/schema.org\/InStock\"}\n\n        ]\n\n      },\n\n      \"aggregateRating\": {\n\n        \"@type\": \"AggregateRating\",\n\n        \"ratingValue\": \"4.5\",\n\n        \"reviewCount\": \"1\",\n\n        \"bestRating\": \"5\",\n\n        \"worstRating\": \"1\"\n\n      },\n\n      \"featureList\": \"AI Web Hosting, AI Sales and Marketing Funnel Builder, SEO Content Tools, Free AI Code Generator, AI Writing Tools, Drag and Drop Website Builder, Landing Page Builder, Project Manager, Template Builder\"\n\n    },\n\n    {\n\n      \"@type\": \"FAQPage\",\n\n      \"@id\": \"https:\/\/www.fahimai.com\/how-to-use-codedesign-ai\/#faq\",\n\n      \"mainEntity\": [\n\n        {\"@type\": \"Question\", \"name\": \"Is CodeDesign AI free?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes, CodeDesign AI has a free plan that lets you build up to 3 projects. You get 6 AI design regenerations and access to core features. Paid plans start at $15\/month for more pages and AI power.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"Who is the founder of CodeDesign AI?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"CodeDesign AI was founded by Sai Krishna. The company is based in Lewes, Delaware, USA. It has grown to serve over 350,000 users who have built more than 4 million sites on the platform.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"Can I use my own domain with CodeDesign AI?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes, you can connect a custom domain to any CodeDesign AI project. The platform also lets you buy domains directly from the dashboard. Free plans include a CodeDesign subdomain by default.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"What is the best AI platform for coding websites?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"CodeDesign AI is one of the top picks for AI-powered website building. It generates full websites from text prompts and lets you export clean code.\"}},\n\n        {\"@type\": \"Question\", \"name\": \"Are AI website builders worth it?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes, if you need a professional website fast without hiring a developer. AI builders like CodeDesign AI can create a full site in under a minute. They work best for small businesses, freelancers, and startups.\"}}\n\n      ]\n\n    },\n\n    {\n\n      \"@type\": \"BreadcrumbList\",\n\n      \"itemListElement\": [\n\n        {\"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\/\/fahimai.com\"},\n\n        {\"@type\": \"ListItem\", \"position\": 2, \"name\": \"Website Builder\", \"item\": \"https:\/\/www.fahimai.com\/category\/ai\/website-builder\/\"},\n\n        {\"@type\": \"ListItem\", \"position\": 3, \"name\": \"How to Use CodeDesign AI\"}\n\n      ]\n\n    }\n\n  ]\n\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Quick Start This guide covers every CodeDesign AI feature: Time needed: 5 minutes per feature Also in this guide: Pro Tips | Common Mistakes | Troubleshooting | Pricing | Alternatives Why Trust This Guide I have used CodeDesign AI for over 6 months and tested every feature covered here. This how to use codedesign ai tutorial comes from real hands-on experience. CodeDesign AI is one of the most powerful AI website builders available today. But most users only scratch the surface of what it can do. This guide shows you how to use every major feature. Step by step, with screenshots and pro tips. CodeDesign AI Tutorial This complete CodeDesign [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":77259,"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":[595],"tags":[932,1182],"class_list":["post-77258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codedesign","tag-autolink","tag-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/posts\/77258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/comments?post=77258"}],"version-history":[{"count":0,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/posts\/77258\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/media\/77259"}],"wp:attachment":[{"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/media?parent=77258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/categories?post=77258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fahimai.com\/ja\/wp-json\/wp\/v2\/tags?post=77258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}