{"id":169850,"date":"2026-07-20T17:09:29","date_gmt":"2026-07-20T14:09:29","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=169850"},"modified":"2026-07-20T17:13:32","modified_gmt":"2026-07-20T14:13:32","slug":"how-to-use-angie-for-layouts-and-design-systems","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/","title":{"rendered":"How to Use Angie for Layouts and Design Systems"},"content":{"rendered":"\n

Angie can create a base design system from various inputs, including images<\/strong>, prompts<\/strong>, or pasted CSS<\/strong>, mapping them to CSS classes<\/strong> and Variables<\/strong>.<\/p>\n\n\n\n

Generating from an Image or Screenshot<\/strong><\/h3>\n\n\n\n
    \n
  1. Open Angie<\/strong> within the Elementor Editor.
    \"angie<\/li>\n\n\n\n
  2. Click the Upload<\/strong> icon in the prompt window and select a design reference image or screenshot from your computer.
    \"upload<\/li>\n\n\n\n
  3. Submit a prompt like: “Create a<\/em> design system based on this mood board”<\/em>
    \"mood<\/li>\n\n\n\n
  4. Review the proposed style preview and click Confirm<\/strong> <\/li>\n<\/ol>\n\n\n\n

    Generating from a Text Prompt<\/strong><\/h3>\n\n\n\n
      \n
    1. Open Angie<\/strong> within the Elementor Editor.
      \"angie<\/li>\n\n\n\n
    2. Enter a prompt describing your desired visual direction (e.g., “Create a testimonial card with a clean layout, a customer quote, and a round photo placeholder.<\/em>“)
      \"text<\/li>\n\n\n\n
    3. Submit your prompt and review the design<\/li>\n<\/ol>\n\n\n\n

      Generating from Pasted CSS<\/strong><\/h3>\n\n\n\n
        \n
      1. Open Angie<\/strong> within the Elementor Editor.
        \"angie<\/li>\n\n\n\n
      2. Paste your raw CSS properties directly into the prompt box.
        \"raw<\/li>\n\n\n\n
      3. Submit your prompt.<\/li>\n\n\n\n
      4. Click Apply<\/strong> to let Angie automatically map the CSS to your design system<\/li>\n<\/ol>\n\n\n\n
        \n

        [callout] You can view or tweak Variables <\/strong>and Classes <\/strong>at any time by clicking the three dots icon in the Elementor top bar to open the Design System<\/strong>.
        \"variables
        [\/callout]<\/p>\n<\/blockquote>\n\n\n\n

        Generate Website Sections<\/h3>\n\n\n\n

        Ask Angie to build custom website elements – such as hero sections, feature grids, or content blocks – and the generated layout lands directly in the Editor fully optimized and ready to edit, rather than needing to be rebuilt from scratch.<\/p>\n\n\n\n

          \n
        1. Open Angie<\/strong> within the Elementor Editor.
          \"angie<\/li>\n\n\n\n
        2. In the prompt field, describe what you need (e.g., “Create a hero section with a bold headline, a short description paragraph, and a call-to-action button”<\/em>).
          \"section<\/li>\n\n\n\n
        3. Submit your prompt.<\/li>\n\n\n\n
        4. Once added to your canvas, you can click directly on any element to change the text, colors, or layout manually.<\/li>\n<\/ol>\n\n\n\n

          Generate Dynamic Loops (Pro)<\/h3>\n\n\n\n

          Angie can generate full Loop structures, including query, layout, and item templates, from a single prompt. Ask for a blog archive or a product grid and Angie wires the Loop, maps dynamic fields, and applies your design system.<\/p>\n\n\n\n

            \n
          1. Open Angie<\/strong> within the Elementor Editor.
            \"angie<\/li>\n\n\n\n
          2. Ask it to build a dynamic layout (e.g., “Create a modern 3-column grid for my recent blog posts”<\/em>).
            \"loop<\/li>\n\n\n\n
          3. Submit your prompt. Angie will place a Loop container on your canvas, automatically hook up the query settings, and design a layout item card.
            \"query<\/li>\n\n\n\n
          4. Verify that Angie has automatically mapped your dynamic content fields (like Post Title, Featured Image, and Excerpt).<\/li>\n\n\n\n
          5. Hover over the loop, double-click on it and Edit Loop Item<\/strong> to fine-tune the design card.<\/li>\n<\/ol>\n\n\n\n

            [callout]Important Note on Turning Loop Items into Components:<\/strong> Because a Loop Item is already a specialized template type, you cannot turn it into a Component while inside the Loop Item editor (the Create component<\/em> option will be grayed out).<\/p>\n\n\n\n

            How to turn your card design into a Reusable Component:<\/strong><\/p>\n\n\n\n

              \n
            1. Go to a regular page (such as your Homepage or a test page).<\/li>\n\n\n\n
            2. Build the design you want for your card using Atomic elements (Containers, Heading, Image, etc.).<\/li>\n\n\n\n
            3. Right-click the main container of that design.<\/li>\n\n\n\n
            4. Select Create component<\/strong>.
              \"create<\/li>\n\n\n\n
            5. Once created, you can use that Component inside your Loop Item to maintain a synced design across different loops.[\/callout]<\/li>\n<\/ol>\n\n\n\n

              <\/p>\n","protected":false},"excerpt":{"rendered":"

              Angie can create a base design system from various inputs, including images, prompts, or pasted CSS, mapping them to CSS classes and Variables. Generating from an Image or Screenshot Generating from a Text Prompt Generating from Pasted CSS [callout] You can view or tweak Variables and Classes at any time by clicking the three dots […]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[2203],"tags":[1359],"class_list":["post-169850","post","type-post","status-publish","format-standard","hentry","category-angie","tag-elementor-ai"],"acf":[],"yoast_head":"\nHow to Use Angie for Layouts and Design Systems | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How to Use Angie for Layouts and Design Systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Angie for Layouts and Design Systems | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How to Use Angie for Layouts and Design Systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-20T14:09:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-20T14:13:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/07\/angie-editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"687\" \/>\n\t<meta property=\"og:image:height\" content=\"1051\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Saras\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saras\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/\"},\"author\":{\"name\":\"Saras\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/e5957aee4a096954c42499ba80d1644d\"},\"headline\":\"How to Use Angie for Layouts and Design Systems\",\"datePublished\":\"2026-07-20T14:09:29+00:00\",\"dateModified\":\"2026-07-20T14:13:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/\"},\"wordCount\":524,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/angie-editor.png\",\"keywords\":[\"Elementor AI\"],\"articleSection\":[\"Angie\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/\",\"name\":\"How to Use Angie for Layouts and Design Systems | Elementor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/angie-editor.png\",\"datePublished\":\"2026-07-20T14:09:29+00:00\",\"dateModified\":\"2026-07-20T14:13:32+00:00\",\"description\":\"Learn everything about How to Use Angie for Layouts and Design Systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/angie-editor.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/angie-editor.png\",\"width\":687,\"height\":1051,\"caption\":\"angie editor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-angie-for-layouts-and-design-systems\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate with AI\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/generate-with-ai\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angie\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/generate-with-ai\\\/angie\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Use Angie for Layouts and Design Systems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/e5957aee4a096954c42499ba80d1644d\",\"name\":\"Saras\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"caption\":\"Saras\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Angie for Layouts and Design Systems | Elementor","description":"Learn everything about How to Use Angie for Layouts and Design Systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Angie for Layouts and Design Systems | Elementor","og_description":"Learn everything about How to Use Angie for Layouts and Design Systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/","og_site_name":"Help","article_published_time":"2026-07-20T14:09:29+00:00","article_modified_time":"2026-07-20T14:13:32+00:00","og_image":[{"width":687,"height":1051,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/07\/angie-editor.png","type":"image\/png"}],"author":"Saras","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Saras","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/"},"author":{"name":"Saras","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/e5957aee4a096954c42499ba80d1644d"},"headline":"How to Use Angie for Layouts and Design Systems","datePublished":"2026-07-20T14:09:29+00:00","dateModified":"2026-07-20T14:13:32+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/"},"wordCount":524,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/07\/angie-editor.png","keywords":["Elementor AI"],"articleSection":["Angie"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/","url":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/","name":"How to Use Angie for Layouts and Design Systems | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/07\/angie-editor.png","datePublished":"2026-07-20T14:09:29+00:00","dateModified":"2026-07-20T14:13:32+00:00","description":"Learn everything about How to Use Angie for Layouts and Design Systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/07\/angie-editor.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/07\/angie-editor.png","width":687,"height":1051,"caption":"angie editor"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-to-use-angie-for-layouts-and-design-systems\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Generate with AI","item":"https:\/\/elementor.com\/help\/generate-with-ai\/"},{"@type":"ListItem","position":3,"name":"Angie","item":"https:\/\/elementor.com\/help\/generate-with-ai\/angie\/"},{"@type":"ListItem","position":4,"name":"How to Use Angie for Layouts and Design Systems"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/e5957aee4a096954c42499ba80d1644d","name":"Saras","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","caption":"Saras"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/169850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=169850"}],"version-history":[{"count":15,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/169850\/revisions"}],"predecessor-version":[{"id":169925,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/169850\/revisions\/169925"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=169850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=169850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=169850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}