Beaver Builder AI uses screenshots and design mockups as visual references for generating editable WordPress pages. On a live site, the workflow requires Beaver Builder 2.11 or later and the Beaver Builder AI plugin, integrating image-guided generation into the existing page-builder environment rather than treating the reference as a static image.

Images can be dragged into the chat in JPEG, PNG, GIF or WebP format, or selected through the chat’s plus button from the Media Library or a local upload. Choosing “SEND AS IS” passes the image as a design reference, not as page content. Prompts can specify which elements to preserve or change; follow-up instructions and direct editor adjustments help address mismatches in the initial result.

The generated layout is built from Custom Modules comprising HTML, CSS and JavaScript. Their settings expose Content fields for routine editing, while Design and Code controls—including styling for hover states and responsive breakpoints—are available to users with code access. Clean screenshots improve the reference, and complex pages can be approached section by section. This structure leaves a modifiable Beaver Builder page rather than a flattened visual, while retaining code-level control for authorised users.

Author of the original text: Jennifer Franklin (Beaver Builder)