# UiChemy Docs ## Home - [Introduction](https://docs.uichemy.com/introduction.md): UiChemy turns Figma designs, client briefs, prompts, and AI builds into real, editable WordPress pages. Everything lands in Elementor, Gutenberg, or Bricks. - [Where do I start?](https://docs.uichemy.com/which-path.md): Compare the four ways to start with UiChemy and pick the one that fits what you already have. - [Quick Start](https://docs.uichemy.com/quickstart.md): Set up your account and plugin once, then build your first page. ## Figma to WordPress - [What is Figma to WordPress?](https://docs.uichemy.com/introduction/what-is-figma-to-wordpress.md): UiChemy Figma to WordPress converts your Figma design into a real, editable page in Elementor, Gutenberg, or Bricks. - [Which Should I Use: AI Express Mode or Classic Mode?](https://docs.uichemy.com/introduction/ai-express-vs-classic-mode.md): Compare AI Express Mode and Classic Mode to decide which conversion approach fits your project. - [How to Set Up the UiChemy WordPress Plugin](https://docs.uichemy.com/introduction/set-up-wordpress-plugin.md): Install the UiChemy WordPress plugin, sign in, pick your page builder, and connect your site. - [How to Install the Figma Plugin](https://docs.uichemy.com/introduction/install-figma-plugin.md): Install the UiChemy Figma plugin, sign in, and start your first AI Express Mode conversion. - [How Do I Connect My Site? (Connection Link)](https://docs.uichemy.com/introduction/connect-your-site.md): Connect your WordPress site to the UiChemy Figma plugin with a single Connection Link. - [How Do UiChemy Credits Work?](https://docs.uichemy.com/introduction/understanding-credits.md): How UiChemy Credits work across AI Express Mode and Classic Mode, and where to check your balance. - [What Is AI Express Mode?](https://docs.uichemy.com/ai-express-mode/overview/what-is-ai-express-mode.md): AI Express Mode converts your Figma design into a finished, editable WordPress page, and does the finishing work for you. - [How AI Express Mode Works (Conversion Workflow)](https://docs.uichemy.com/ai-express-mode/how-it-works.md): The 7 steps of an AI Express Mode conversion, from picking a design to opening your finished page. - [Export to WordPress](https://docs.uichemy.com/ai-express-mode/export-to-wordpress.md): What your AI Express Mode conversion lands as in WordPress, and where to learn Composer in depth. - [Overview](https://docs.uichemy.com/classic-mode/overview.md): Classic Mode overview, manual tagging and conversion control across Elementor, Gutenberg, and Bricks. - [Step by Step Introduction of Figma to Elementor Using UiChemy](https://docs.uichemy.com/classic-mode/getting-started/first-conversion.md): A complete walkthrough of exporting a Figma design as an Elementor template with UiChemy. - [How to Use Copy to Clipboard in UiChemy?](https://docs.uichemy.com/classic-mode/copy-mode/workflow.md): Export a specific section of your Figma design directly into WordPress using UiChemy's Copy to Clipboard. - [Plugin Requirements](https://docs.uichemy.com/classic-mode/getting-started/plugin-requirements.md): Which Elementor and Plus Addons plugins you need, depending on which widgets you tag. - [Can Any Online Resources Be Transformed Directly?](https://docs.uichemy.com/classic-mode/getting-started/online-resources.md): Using free online Figma templates with UiChemy, and what to check before you do. - [How Manual Tagging Works in UiChemy?](https://docs.uichemy.com/classic-mode/figma-to-elementor/manual-tagging.md): Understand how UiChemy's manual widget tagging connects your Figma design to Elementor widgets. - [How to Export Figma Design to Elementor Using UiChemy?](https://docs.uichemy.com/classic-mode/figma-to-elementor/export-guide.md): Export your Figma design to an editable Elementor page or template using UiChemy. - [Figma Style Sync](https://docs.uichemy.com/classic-mode/figma-to-elementor/global-style-sync.md): Sync Figma's global colors, typography, and container width directly to Elementor with UiChemy. - [How to Export Non-Auto Layout or Auto Layout design from Figma to Elementor using UiChemy?](https://docs.uichemy.com/classic-mode/figma-to-elementor/non-auto-layout.md): Export both Auto Layout and non-Auto Layout Figma designs to Elementor with UiChemy. - [Which Properties of Figma Are Not Connected for Elementor?](https://docs.uichemy.com/classic-mode/figma-to-elementor/unsupported-properties.md): A reference list of Figma properties and options that UiChemy doesn't export to Elementor. - [List of Supported Elementor Widgets in UiChemy Conversion](https://docs.uichemy.com/tagging-library/elementor/supported-widgets.md): The full list of Elementor and Plus Addons widgets UiChemy supports today, how to check them in the plugin, plus what's coming soon. - [Figma to Elementor: Atomic Elements (v4)](https://docs.uichemy.com/tagging-library/elementor/atomic-elements.md): How UiChemy converts to Elementor's v4 Atomic Editor, and why there's no widget tagging step. - [How to Tag The Alert Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/alert.md): Tag an alert message in your Figma design as an Elementor Alert widget using UiChemy. - [How to Tag The Counter Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/counter.md): Tag a number counter in your Figma design as a dynamic Elementor Counter widget using UiChemy. - [How to Tag The Google Map Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/google-map.md): Tag a map or address section in your Figma design as an Elementor Google Maps widget using UiChemy. - [How to Tag The Icon Box Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/icon-box.md): Tag key features, benefits, or services in your Figma design as an Elementor IconBox widget using UiChemy. - [How to Tag The Icon List Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/icon-list.md): Tag an icon list in your Figma design as an Elementor Icon List widget using UiChemy. - [How to Tag The Image Box Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/image-box.md): Tag key features, benefits, or services shown with an image in your Figma design as an Elementor Image Box widget using UiChemy. - [How to Tag The Image Carousel Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/image-carousel.md): Tag a multi-image frame in your Figma design as an Elementor Image Carousel widget using UiChemy. - [How to Tag The Image Gallery Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/image-gallery.md): Tag a portfolio-style image section in your Figma design as an Elementor Image Gallery widget using UiChemy. - [How to Tag The ProgressBar Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/progress-bar.md): Tag a progress indicator in your Figma design as a dynamic Elementor Progress Bar widget using UiChemy. - [How to Tag The Social Icons Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/social-icons.md): Tag a row of social icons in your Figma design as an Elementor Social Icons widget using UiChemy. - [How to Tag The SoundCloud Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/soundcloud.md): Tag a music player mockup in your Figma design as an Elementor SoundCloud widget using UiChemy. - [How to Tag The Rating Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/star-rating.md): Tag star ratings in your Figma design as an Elementor Star Rating widget using UiChemy. - [How to Tag The Testimonial Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/testimonial.md): Tag a customer testimonial section in your Figma design as an Elementor Testimonial widget using UiChemy. - [How to Tag The Video Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-free/video.md): Tag a video placeholder in your Figma design as an Elementor Video widget using UiChemy. - [How to Tag The Animated Headline Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/animated-headline.md): Tag a multi-part title in your Figma design as an Elementor Pro Animated Headline widget using UiChemy. - [How to Tag The Blockquote Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/blockquote.md): Tag a quote section in your Figma design as an Elementor Pro Blockquote widget using UiChemy. - [How to Tag The Elementor Form Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/elementor-form.md): Tag a contact or input form in your Figma design as an Elementor Pro Form widget using UiChemy. - [How to Tag The Featured Image Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/featured-image.md): Tag a post's featured image in your Figma design as an Elementor Pro Featured Image widget using UiChemy. - [How to Tag The Flip Box Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/flip-box.md): Tag a feature or icon box section in your Figma design as an Elementor Pro Flip Box widget using UiChemy. - [How to Tag The Gallery Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/gallery.md): Tag an image grid or portfolio section in your Figma design as an Elementor Pro Gallery widget using UiChemy. - [How to Tag The Page Title Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/page-title.md): Tag a dynamic WordPress template's title in your Figma design as an Elementor Pro Page Title widget using UiChemy. - [How to Tag The Post Comment Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/post-comment.md): Tag a comments section in your Figma design as an Elementor Pro Post Comments widget using UiChemy. - [How to Tag The Post Excerpt Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/post-excerpt.md): Tag a post excerpt in your Figma design as an Elementor Pro Post Excerpt widget using UiChemy. - [How to Tag The Post Info Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/post-info.md): Tag post metadata in your Figma design as an Elementor Pro Post Info widget using UiChemy. - [How to Tag The Post Navigation Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/post-navigation.md): Tag a prev/next post navigation section in your Figma design as an Elementor Pro Post Navigation widget using UiChemy. - [How to Tag The Post Title Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/post-title.md): Tag a post's title in your Figma design as an Elementor Pro Post Title widget using UiChemy. - [How to Tag The Price List Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/price-list.md): Tag a pricing section in your Figma design as an Elementor Pro Price List widget using UiChemy. - [How to Tag The Search Form Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/search-form.md): Tag a search field in your Figma design as an Elementor Pro Search Form widget using UiChemy. - [How to Tag The Share Buttons Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/share-buttons.md): Tag social sharing buttons in your Figma design as an Elementor Pro Share Buttons widget using UiChemy. - [How to Tag The Site Logo Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/site-logo.md): Tag your website logo in your Figma design as an Elementor Pro Site Logo widget using UiChemy. - [How to Tag The Site Title Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/site-title.md): Tag your site title in your Figma design as an Elementor Pro Site Title widget using UiChemy. - [How to Tag The Slides Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/elementor-pro/slides.md): Tag a slider section in your Figma design as an Elementor Pro Slides widget using UiChemy. - [How to Tag The TP Heading Title Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-heading-title.md): Tag a section title in your Figma design as The Plus Addons Heading Title widget using UiChemy. - [How to Tag The TP Heading Animation Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-heading-animation.md): Tag a title in your Figma design as The Plus Addons animated Heading Animation widget using UiChemy. - [How to Tag The TP Advanced Text Block Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-advanced-text-block.md): Convert any text block in your Figma design into an Advanced Text Block widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Blockquote Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-blockquote.md): Tag a blockquote in your Figma design as the Blockquote widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Message Box Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-message-box.md): Tag an alert or message box in your Figma design as the Message Box widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Button Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-button.md): Tag a button in your Figma design as the TP Button widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Number Counter Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-number-counter.md): Tag a stats counter in your Figma design as the Number Counter widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Progress Bar Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-progress-bar.md): Tag a progress bar or pie chart in your Figma design as the Progress Bar widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Count Down Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-count-down.md): Tag a countdown timer in your Figma design as the Countdown widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Creative Image Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-creative-image.md): Tag an image in your Figma design as the Creative Image widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Before After Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-before-after.md): Tag a before/after comparison in your Figma design as the Before After widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Social Icon Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-social-icon.md): Tag social icons in your Figma design as the TP Social Icon widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Navigation Menu Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-navigation-menu.md): Tag a navigation menu in your Figma design as the Navigation Menu widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP Table Of Content Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-table-of-content.md): Tag a table of contents in your Figma design as the Table Of Content widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP MailChimp Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-mailchimp.md): Tag a newsletter signup section in your Figma design as the MailChimp widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The TP WP Login & Register Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/tp-wp-login-register.md): Tag a login or registration form in your Figma design as the WP Login & Register widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Dark Mode Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/dark-mode.md): Tag a dark mode toggle in your Figma design as the Dark Mode widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Blog Post Listing Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/blog-post-listing.md): Tag a blog or post listing in your Figma design as the Blog/Post Listing widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Dynamic Listing Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/dynamic-listing.md): Tag a post listing section in your Figma design as the Dynamic Listing widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Dynamic Smart Showcase Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/dynamic-smart-showcase.md): Tag a showcase section in your Figma design as the Dynamic Smart Showcase widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Chart Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/chart.md): Tag a bar chart or pie chart in your Figma design as the Chart widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Social Feed Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/social-feed.md): Tag a social media feed section in your Figma design as the Social Feed widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Social Review Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/social-reviews.md): Tag Facebook or Google reviews in your Figma design as the Social Review widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Meeting Scheduler Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/meeting-scheduler.md): Tag a meeting calendar in your Figma design as the Meeting Scheduler widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Contact Form 7 Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/contact-form-7.md): Tag a form in your Figma design as the Contact Form 7 widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Ninja Form Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/ninja-form.md): Tag a form in your Figma design as the Ninja Form widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The WP Form Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/wp-form.md): Tag a form in your Figma design as the WP Form widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Everest Form Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/everest-form.md): Tag a form in your Figma design as the Everest Form widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The Woo Product Listing Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/woo-product-listing.md): Tag a WooCommerce product list in your Figma design as the Woo Product Listing widget from The Plus Addons for Elementor using UiChemy. - [How to Tag Coupon Code Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/coupon-code.md): Tag a WooCommerce coupon code offer in your Figma design as the Coupon Code widget from The Plus Addons for Elementor using UiChemy. - [How to Tag The WordPress Menu Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/wordpress-menu.md): Tag a site navigation menu in your Figma design as the WordPress Menu widget from Elementor Pro using UiChemy. - [How to Tag The Menu (Elementor Experimental) Widget for Figma to Elementor?](https://docs.uichemy.com/tagging-library/plus-addons/menu-elementor-experimental.md): Tag a site navigation menu in your Figma design as the Menu (Elementor Experimental) widget from Elementor Pro using UiChemy. - [Figma to Gutenberg](https://docs.uichemy.com/classic-mode/figma-to-gutenberg.md): Convert Figma designs into editable Gutenberg blocks with UiChemy Classic Mode. - [List of Blocks Which Are Compatible With Figma to Gutenberg Conversion in UiChemy](https://docs.uichemy.com/gutenberg-blocks/all-blocks/compatible-blocks.md): The full list of Gutenberg blocks UiChemy supports when converting a Figma design. - [Nexter Blocks Tagging Guides: Coming Soon](https://docs.uichemy.com/gutenberg-blocks/nexter/coming-soon.md): Step-by-step tagging guides for Nexter Blocks are on the way. - [Kadence, Core, GenerateBlocks & Spectra Tagging Guides: Coming Soon](https://docs.uichemy.com/gutenberg-blocks/other-builders/coming-soon.md): Step-by-step tagging guides for Kadence Blocks, Gutenberg core blocks, GenerateBlocks, and Spectra are on the way. - [Figma to Bricks](https://docs.uichemy.com/classic-mode/figma-to-bricks.md): Convert Figma designs to Bricks Builder elements with UiChemy Classic Mode. - [List of Elements Which Are Compatible With Figma to Bricks Conversion in UiChemy](https://docs.uichemy.com/bricks-elements/all-elements/compatible-elements.md): The full list of Bricks elements UiChemy supports when converting a Figma design. - [How to Export Figma Design in Responsive Layout using Responsive Manager in UiChemy?](https://docs.uichemy.com/classic-mode/responsive-manager/responsive-layout.md): Customize font size, line height, padding, and flex gap per device using UiChemy's Responsive Manager. - [How to Export Figma Design in Fluid Responsive Layout using Responsive Manager in UiChemy?](https://docs.uichemy.com/classic-mode/responsive-manager/fluid-layout.md): Use CSS Clamp in UiChemy's Responsive Manager to make font size scale fluidly between viewport widths. - [How to Use Calculator in Responsive Manager?](https://docs.uichemy.com/classic-mode/responsive-manager/calculator.md): Use the Calculator in UiChemy's Responsive Manager to quickly work out responsive percentage and pixel values. - [How to Export Your Figma Design With Scaled Images?](https://docs.uichemy.com/classic-mode/conversion-settings/scaled-images.md): Export your Figma design with scaled images using UiChemy, for control over image quality and performance. - [Conversion Settings](https://docs.uichemy.com/classic-mode/conversion-settings/settings.md): Disable custom CSS or export without images in UiChemy, for cleaner or faster output. - [How to Quickly Create Figma Layouts using Templates in UiChemy?](https://docs.uichemy.com/classic-mode/templates/quick-layouts.md): Use UiChemy's 1,300+ pre-designed templates to quickly build Figma layouts, pre-tagged for Elementor. - [What is Direct Import?](https://docs.uichemy.com/classic-mode/getting-started/direct-import.md): Export your Figma design directly into WordPress with UiChemy's Direct Import feature, manage sites and import settings. - [How to Import Multiple Designs at Once With UiChemy?](https://docs.uichemy.com/classic-mode/getting-started/bulk-import.md): Import multiple Figma layouts into WordPress at once with UiChemy, instead of one at a time. - [How to Add Auto Layout to Your Design With UiChemy?](https://docs.uichemy.com/design-optimization/auto-layout/convert-your-design.md): Use UiChemy's Convert to Auto Layout feature to prepare your Figma design for widget tagging. - [Ideal Way to Design in Figma With Auto Layout for Pixel Perfect Conversion](https://docs.uichemy.com/design-optimization/auto-layout/best-practices.md): Learn the ideal way to structure your Figma layout with Auto Layout for a pixel-perfect UiChemy conversion. - [Figma Design Checklist to Make it UiChemy-Friendly](https://docs.uichemy.com/design-optimization/pre-conversion-checklist/figma-readiness.md): A complete checklist to make sure your Figma design is ready for accurate conversion with UiChemy. - [Things to Avoid in Figma Design for Optimum Conversion](https://docs.uichemy.com/design-optimization/things-to-avoid/common-mistakes.md): Common Figma design mistakes to avoid for a smooth, accurate conversion with UiChemy. - [How to Combine Multiple Elements in Figma and Export as an Image?](https://docs.uichemy.com/design-optimization/images/combine-elements.md): Combine multiple Figma elements and export them as a single image using UiChemy's locking feature. - [How to Split a Large Figma Layout for an Optimal Conversion in UiChemy?](https://docs.uichemy.com/design-optimization/layer-structure/split-large-layout.md): Split a Figma design that exceeds UiChemy's 12,000px height limit into smaller sections for a clean export. - [What Data Does UiChemy Store For Smooth Conversion?](https://docs.uichemy.com/help-center/data-security/data-storage.md): What data UiChemy stores from your Figma design, how long, and how to delete it manually. - [How to Fix PHP Time Limit Issue?](https://docs.uichemy.com/help-center/troubleshooting/php-time-limit.md): Fix the PHP time limit (max_execution_time) error when importing large UiChemy templates into Elementor. - [My Images Are Not Migrated After Transfer?](https://docs.uichemy.com/help-center/troubleshooting/missing-images.md): Fix missing images after importing a UiChemy-exported template into Elementor. - [While Direct Import process URL Unreachable, Token Mismatch, Connection Error : Resolved](https://docs.uichemy.com/help-center/troubleshooting/live-import-errors.md): Fix the common UiChemy Direct Import errors, URL Unreachable, Token Mismatch, Connection Error, and missing page builder plugins. - [How Do I Fix Common AI Express Mode Issues?](https://docs.uichemy.com/ai-express-mode/troubleshooting.md): Common issues when converting Figma designs with AI Express Mode, and how to fix them. - [Why My Imported Template is Blank?](https://docs.uichemy.com/classic-mode/troubleshooting/blank-template.md): Fix a blank Elementor template after importing a UiChemy export, Flexbox container and MySQL packet size. - [Why are Icons Misaligned or Off Centered?](https://docs.uichemy.com/classic-mode/troubleshooting/icon-alignment.md): Fix misaligned icons and off-center SVG images after importing a UiChemy export into Elementor. - [Why are SVGs missing in the Template?](https://docs.uichemy.com/classic-mode/troubleshooting/missing-svgs.md): Fix missing SVG images in an Elementor template imported from UiChemy. - [FAQ About AI Express Mode](https://docs.uichemy.com/ai-express-mode/faq.md): Answers to common questions about converting and publishing with AI Express Mode. ## AI Website Creator - [What is UiChemy AI Website Creator](https://docs.uichemy.com/ai-website-creator/overview/what-is-ai-website-creator.md): What AI Website Creator is and the four-phase flow from prompt to export. - [Getting Started](https://docs.uichemy.com/ai-website-creator/getting-started/create-your-first-project.md): Start a project from a good first prompt and walk through scope, sitemap, design, and export. - [Scope Editor](https://docs.uichemy.com/ai-website-creator/scope-editor/overview.md): Answer 6 steps of questions about the business, audience, brand, and references to generate a tailored sitemap and design. - [Sitemap Editor](https://docs.uichemy.com/ai-website-creator/sitemap-editor/overview.md): Plan your site's pages and sections on a visual canvas, then add, rename, and manage them before design begins. - [Design Editor](https://docs.uichemy.com/ai-website-creator/design-editor/overview.md): Customize colors, fonts, buttons, layouts, text, and images on an infinite canvas, then preview and pitch the result. - [Export to WordPress](https://docs.uichemy.com/ai-website-creator/export/export-to-wordpress.md): Send your finished project to WordPress, where it opens in Composer. - [FAQ](https://docs.uichemy.com/ai-website-creator/faq/faq.md): Common questions about AI Website Creator projects, exports, and re-runs. ## AI to WordPress - [What is AI to WordPress?](https://docs.uichemy.com/ai-to-wordpress.md): Drive UiChemy from the AI tools you already use and build WordPress pages without leaving them. - [What is MCP?](https://docs.uichemy.com/ai-to-wordpress/what-is-mcp.md): How the Model Context Protocol lets AI tools drive Composer. - [Set Up AI to WordPress](https://docs.uichemy.com/ai-to-wordpress/set-up.md): Connect UiChemy MCP to run AI Express Mode conversions from Claude, Cursor, Codex, or Antigravity. - [Connect an MCP Client](https://docs.uichemy.com/ai-to-wordpress/connect-mcp-client.md): Connect Claude, Cursor, or another MCP client to your site. - [Supported AI Tools](https://docs.uichemy.com/ai-to-wordpress/supported-tools.md): Which MCP clients work with UiChemy, and what each one can do. ## Composer - [What Is Composer?](https://docs.uichemy.com/uichemy-composer/getting-started/what-is-uichemy-composer.md): Composer is the flexible, design-first widget the UiChemy plugin adds to Elementor, build any section visually, in code, or with AI chat. - [Requirements & Compatibility](https://docs.uichemy.com/uichemy-composer/getting-started/requirements.md): What you need before installing UiChemy: WordPress, Elementor, PHP, and browser requirements, plus plugin compatibility notes. - [Install and Activate UiChemy](https://docs.uichemy.com/uichemy-composer/getting-started/install.md): Install and activate the UiChemy plugin on your WordPress site, free and Pro. - [A Tour of the Dashboard](https://docs.uichemy.com/uichemy-composer/getting-started/dashboard-tour.md): A guided look at the UiChemy admin menu: Home, Theme Builder, Form Submissions, Role Manager, White Label, and Settings. - [Build Your First Section](https://docs.uichemy.com/uichemy-composer/getting-started/quickstart.md): Add a Composer widget in Elementor and build your first section, in code, visually, or with Chat AI. - [Free vs Pro: What's Included](https://docs.uichemy.com/uichemy-composer/getting-started/free-vs-pro.md): What UiChemy Free includes and what the UiChemy Pro plugin adds: dynamic data, unlimited Global Style, advanced Theme Builder, Role Manager, White Label, and MCP. - [One Composer, Real Code](https://docs.uichemy.com/uichemy-composer/concepts/one-widget-real-code.md): Why UiChemy ships a single flexible widget instead of a fixed widget library, and why that widget stores actual HTML, CSS, and JavaScript rather than configuration. - [Design vs Developer Mode](https://docs.uichemy.com/uichemy-composer/concepts/simple-vs-developer-mode.md): The two ways to edit a Composer widget's design, plus Chat AI as a third, Pro-only path, and how Role Manager controls who can access each. - [Slots: How Editable Content Works](https://docs.uichemy.com/uichemy-composer/concepts/slots.md): How Composer scans a widget's HTML and turns text, links, and images into editable slots in the Elementor panel. - [What Is a Composer?](https://docs.uichemy.com/uichemy-composer/uichemy-widget/what-is-a-uichemy-widget.md): Every AI Express Mode conversion lands as a native, editable Composer you can keep refining. - [Design Mode](https://docs.uichemy.com/uichemy-composer/uichemy-widget/design-mode.md): Design Mode is the Composer's default, no-code editing state, what it means, who it's restricted to, and the details not covered elsewhere. - [How the Composer Works](https://docs.uichemy.com/uichemy-composer/uichemy-widget/how-it-works.md): The anatomy of a Composer: how design gets into it, what it stores, code scope, external dependencies, and what it can't do. - [Design Mode: Build Without Code](https://docs.uichemy.com/uichemy-composer/build/simple-mode.md): A step-by-step walkthrough for updating text, images, links, and visual styles in a Composer using the Elementor panel, no code required. - [Developer Mode: The Code Editor](https://docs.uichemy.com/uichemy-composer/build/developer-mode.md): Direct HTML, CSS, and JavaScript access inside a Composer widget: structural changes, Twig expressions, forms, and custom interactions. - [Paste and Import Code](https://docs.uichemy.com/uichemy-composer/build/paste-and-import-code.md): Bring HTML and CSS from an AI tool, a template library, or a Figma export into the Composer's code editor. - [Editing Directly with the Editor Tab](https://docs.uichemy.com/uichemy-composer/uichemy-widget/editor-tab.md): Use the Composer's Editor tab to change your converted section visually, without touching code. - [Editing with Code Using the Code Tab](https://docs.uichemy.com/uichemy-composer/uichemy-widget/code-tab.md): Work directly in HTML, CSS, and JS, or paste in a layout you already built, using the Composer's Code tab. - [Editing with Chat AI](https://docs.uichemy.com/uichemy-composer/uichemy-widget/chat-ai-tab.md): Edit your converted section by describing the change in plain language using the Composer's Chat AI tab. - [MCP Tools Reference](https://docs.uichemy.com/uichemy-composer/uichemy-widget/mcp-tools-reference.md): What your AI tool can actually do once it's connected to your site over MCP, why it matters, how it works, and the exact capability behind every request. - [Working with Slots](https://docs.uichemy.com/uichemy-composer/build/working-with-slots.md): A practical guide to finding, editing, and binding slots, plus tips for widgets with many slots. - [Visual Loop & Form Builder](https://docs.uichemy.com/uichemy-composer/build/visual-loops-and-forms.md): Turn any element into a repeating loop or a working form by filling in fields, no hand-typed Twig or attributes required. - [Global Style: The Design System](https://docs.uichemy.com/uichemy-composer/global-style/overview.md): How UiChemy's Global Style Manager works: the globals style block, what it stores, and how CSS variables, typography classes, and utility classes flow to every Composer widget. - [CSS Variables: Site-Wide Design Tokens](https://docs.uichemy.com/uichemy-composer/global-style/css-variables.md): Define color, spacing, and sizing tokens once in Global Style and reuse them across every Composer widget. - [Typography Classes](https://docs.uichemy.com/uichemy-composer/global-style/typography.md): Define reusable heading and body text styles once in Global Style and apply them across every Composer widget. - [Reusable CSS Classes](https://docs.uichemy.com/uichemy-composer/global-style/css-classes.md): Create named component classes in Global Style that apply consistent styles across every Composer widget and Elementor element on your site. - [Dynamic Content Overview](https://docs.uichemy.com/uichemy-composer/design-data/overview.md): How UiChemy adds dynamic content to a Composer widget: Elementor dynamic tags for no-code binding, and Twig expressions for code-based data access. - [Dynamic Tags: Bind Content Without Code](https://docs.uichemy.com/uichemy-composer/design-data/dynamic-tags.md): The complete reference for every Elementor dynamic tag UiChemy registers, organized by group, with the Twig equivalent for each. - [Dynamic Data With Twig](https://docs.uichemy.com/uichemy-composer/design-data/twig.md): Use Twig expressions inside a Composer widget's HTML panel to output post data, apply filters, write conditions, and access site-wide values. - [Loops & Listings](https://docs.uichemy.com/uichemy-composer/design-data/loops.md): Use Composer's loop system to build dynamic post grids, product listings, term archives, user directories, and external API feeds. - [ACF Custom Fields](https://docs.uichemy.com/uichemy-composer/design-data/acf.md): Bind Advanced Custom Fields values to Elementor widgets via dynamic tags, and access ACF fields in Twig expressions inside a Composer widget. - [WooCommerce Product Data](https://docs.uichemy.com/uichemy-composer/design-data/woocommerce-data.md): Use UiChemy's WooCommerce dynamic tags and the product Twig provider to build custom product pages, product cards, and shop templates. - [JetEngine Custom Fields](https://docs.uichemy.com/uichemy-composer/design-data/jetengine.md): Use JetEngine meta fields in UiChemy's dynamic tags and Twig expressions to surface custom field data anywhere in a Composer widget. - [Troubleshooting: Common Issues & Fixes](https://docs.uichemy.com/uichemy-composer/troubleshooting/common-issues.md): Fixes for the most common UiChemy issues: the Composer widget not appearing, slots missing, CSS not applying, Theme Builder templates not applying, and more. ## UiChemy Plugin - [Theme Builder Overview](https://docs.uichemy.com/uichemy-composer/theme-builder/overview.md): Build headers, footers, single, archive, search, and 404 templates that apply site-wide using the Composer widget. - [Creating Templates](https://docs.uichemy.com/uichemy-composer/theme-builder/creating-templates.md): Create a new theme template with the Composer widget and publish it with a display condition. - [Assigning Conditions](https://docs.uichemy.com/uichemy-composer/theme-builder/assigning-conditions.md): How templates get matched to pages: template type, target, and display conditions are three separate mechanisms, and not every template type uses all three. - [Build a Header Template](https://docs.uichemy.com/uichemy-composer/theme-builder/header-template.md): Create a custom site-wide header with the Composer widget: navigation, logo, and a responsive layout. - [Build a Footer Template](https://docs.uichemy.com/uichemy-composer/theme-builder/footer-template.md): Create a custom site-wide footer with the Composer widget: columns, links, and dynamic site data. - [Single Post & Page Templates](https://docs.uichemy.com/uichemy-composer/theme-builder/single-templates.md): Build custom layouts for individual posts and pages with the Composer widget, with full access to post content and metadata on Pro. - [Archive & Search Templates](https://docs.uichemy.com/uichemy-composer/theme-builder/archive-templates.md): Build custom archive layouts and a custom search results page using the Composer widget's loop system. Requires Pro. - [WooCommerce Templates](https://docs.uichemy.com/uichemy-composer/theme-builder/woocommerce-templates.md): Build custom single product and shop/archive layouts with the Composer widget and WooCommerce data providers. Requires WooCommerce and Pro. - [Build a 404 Page](https://docs.uichemy.com/uichemy-composer/theme-builder/404-page.md): Build a custom not-found page with the Composer widget so visitors who hit a broken link see a helpful, branded experience. - [Forms Overview](https://docs.uichemy.com/uichemy-composer/forms/overview.md): How UiChemy turns any HTML form inside a Composer widget into a managed form: submission storage, email notifications, webhook delivery, and built-in spam protection. - [Turn Any Element Into a Form](https://docs.uichemy.com/uichemy-composer/forms/atom-form.md): Mark any HTML form inside a Composer widget, via the data-atom-form attribute or the Layers panel, to turn it into a managed form that captures submissions, sends emails, and fires webhooks. - [Form Submissions](https://docs.uichemy.com/uichemy-composer/forms/submissions.md): How UiChemy captures and stores form submissions from the Composer widget. - [Viewing and Exporting Submissions](https://docs.uichemy.com/uichemy-composer/forms/viewing-exporting.md): Browse, filter, search, and export form submission data from UiChemy. - [Role Manager Overview](https://docs.uichemy.com/uichemy-composer/role-manager/overview.md): Control which WordPress user roles can use UiChemy and its features. Administrators always have full access. Requires Pro. - [Setting User Permissions](https://docs.uichemy.com/uichemy-composer/role-manager/user-permissions.md): Configure access levels and feature toggles for each WordPress user role in UiChemy's Role Manager. - [White Label Overview](https://docs.uichemy.com/uichemy-composer/white-label/overview.md): Rebrand UiChemy everywhere it shows, with a live preview of every change. Requires Pro. - [Dashboard Branding](https://docs.uichemy.com/uichemy-composer/white-label/dashboard-branding.md): Replace the UiChemy name, logo, and author details shown in the WordPress admin sidebar and dashboard. - [Plugins Screen](https://docs.uichemy.com/uichemy-composer/white-label/plugins-screen.md): Customize the plugin name and description shown in the WordPress Plugins list. - [Widgets](https://docs.uichemy.com/uichemy-composer/white-label/widgets.md): Customize the Composer widget's name, category, and icon shown inside the Elementor editor. - [Advanced White Label](https://docs.uichemy.com/uichemy-composer/white-label/advanced.md): Lock down the White Label settings and hide UiChemy notices from your clients. - [AI Tokens](https://docs.uichemy.com/uichemy-composer/ai-tokens/overview.md): Your AI Tokens balance, what spends it, and where to top up. The same balance the Figma plugin calls Credits. - [License Overview](https://docs.uichemy.com/uichemy-composer/license/overview.md): What a UiChemy license key does, where to find it, and why Pro features work whether or not a license is active. - [Activating & Switching a License](https://docs.uichemy.com/uichemy-composer/license/activating-and-switching.md): How to activate a UiChemy license key and switch which license this site connects to. - [General Settings](https://docs.uichemy.com/uichemy-composer/settings/general-settings.md): Configure how UiChemy behaves on your site: per-builder registration, editor mode, the MCP server, form storage, and uninstall behavior. - [Common Issues](https://docs.uichemy.com/uichemy-composer/plugin-troubleshooting/common-issues.md): Fixes for the most common UiChemy plugin problems, most of which come down to a single Settings toggle.