The Landing Page Builder is the visual editing workspace used to customize a Landing Page after it has been created from a Template or produced through the Clone workflow.
The confirmed user Builder is implemented with GrapesJS and combines page content, reusable Blocks, styling controls, Layers, and an Asset Manager in one editing environment.
You can reach the Builder through several normal user workflows:
AIUNIFY Funnels maintains separate Builder content for the Landing Page's:
The Landing Page model contains separate sets of saved fields for these two experiences.
| Main Page | Thank You Page |
| HTML | Thank You Page HTML |
| CSS | Thank You Page CSS |
| Components | Thank You Page Components |
| Styles | Thank You Page Styles |
The Landing Page model also contains a Main Page script field.
Changes to one page experience should not be assumed to replace the saved content of the other.
The Main Page normally contains the primary acquisition or sales experience, while the Thank You Page can be used after supported form-submission or payment-success workflows.
Chapters 16 and 17 cover these two Builder experiences separately.
The Builder loads available reusable Blocks into the GrapesJS Block Manager.
The confirmed Builder data prepared for each available Block includes:
Blocks allow you to begin from reusable content structures instead of constructing every section manually.
The Builder exposes a GrapesJS panel identified as:
Style Manager
Use the Style Manager to work with supported visual styling for selected Builder elements.
The Builder is configured to avoid unnecessary inline styling and maintains page CSS as part of the saved Builder data.
The Builder also exposes:
Layers
Layers provide a structural view of the elements contained in the current page design and can help you work with nested content that may be difficult to select directly on the visual canvas.
The confirmed GrapesJS panel tooltip for reusable page sections is:
Blocks
Open Blocks when you want to browse the reusable content structures made available to the user Builder.
The user Builder is configured with remote storage.
It uses separate application endpoints to:
This is how visual Builder changes are persisted into the Landing Page's saved HTML, CSS, Components, and Styles fields.
The confirmed GrapesJS storage configuration uses:
stepsBeforeSave: 5
This means you should not interpret every individual Builder interaction as a separate immediate server write.
After making important changes, allow the Builder's save cycle to complete before closing the page or navigating away.
The Builder includes an Asset Manager for page images.
The current user Builder configures asset upload with:
multiUpload: false
The normal asset workflow therefore handles one uploaded file at a time through the configured Builder upload endpoint.
The Landing Page image-upload controller validates uploaded Builder files as:
The controller applies a maximum upload validation value of 20000 KB.
If the uploaded file does not satisfy the supported image validation, the current endpoint can return:
The file must be an jpg,jpeg,png,svg
Uploaded Builder images are stored within a user-specific public storage path based on the authenticated user's ID.
The resulting image URL is returned to the Builder so the uploaded asset can be used on the Landing Page.
The Builder listens for an asset-removal event.
When an asset is removed through that supported workflow, the Builder sends the image source to the Landing Page image-deletion endpoint.
The controller extracts the image filename and removes the matching file from the authenticated user's storage location when that file exists.
Asset caution: Do not remove an uploaded image from the Asset Manager if another part of the page still depends on that file.
AIUNIFY Funnels provides a Builder icon-search endpoint.
When an icon-search keyword is supplied, the application searches its configured icon list for matching values.
If no keyword is supplied, the endpoint can return the configured icon list for browsing.
The Landing Page Builder also supports searching the application's Google Font data.
The font-search controller searches the bundled google-fonts.json items for font families containing the supplied search value.
Landing Page Font Settings are covered in Chapter 28.
When the Builder loads, it inserts the application's default Landing Page template stylesheet into the editing canvas.
It also inserts the configured Block CSS used by reusable Builder Blocks.
This gives the editing canvas the styles required to represent the Landing Page and available reusable content more accurately while you work.
The Builder marks existing and newly added GrapesJS selectors as private within the editing environment.
This is an implementation detail that helps the Builder manage page styling internally.
Users should make page-design changes through the visual Builder controls rather than attempting to manage the application's internal selector system directly.
The Builder is an editing workspace.
It should not be treated as the final verification of how the campaign behaves for a public visitor.
After completing meaningful Builder or Settings changes:
The next Builder chapters provide detailed operating instructions for:
| Chapter 16 | Editing the Main Page |
| Chapter 17 | Editing the Thank You Page |
| Chapter 18 | Using Builder Blocks and Components |
| Chapter 19 | Managing Builder Images, Icons, Fonts, and Page Assets |
| Chapter 20 | Designing and Reviewing Desktop, Tablet, and Mobile Layouts |
Operating principle: Build visually, allow changes to save, and then validate the actual public visitor experience. The Builder is the editing environment; the public Landing Page is the final test.