18.1 Blocks and Components in the Builder

The AIUNIFY Funnels Landing Page Builder uses reusable Blocks together with individual Builder Components to create page layouts.

A Block gives you an existing content structure. Once that structure is placed into a page, the elements inside it become part of the Landing Page's editable Builder content.

18.2 What the Builder Receives for Each Block

The confirmed user Builder prepares the following information for available Blocks:

Block ID Internal identifier used by the Builder.
Thumbnail Visual representation used when browsing available Blocks.
Name Identifies the reusable Block.
Category Groups related Blocks in the Block Manager.
Content The reusable content structure inserted into the Landing Page.

18.3 Opening the Blocks Panel

The GrapesJS Builder exposes a panel labeled Blocks.

The Blocks panel is opened as part of the Builder interface and lets you browse reusable structures made available to the user Landing Page editor.

18.4 Block Categories

Blocks are grouped into categories.

The confirmed Builder collapses Block categories and uses an accordion-like behavior: when one category is opened, other Block categories can be closed.

This helps keep the Block browser manageable when many reusable structures are available.

18.5 Adding a Block

To use a Block:

  1. Open the correct Main Page or Thank You Page in the Builder.
  2. Open Blocks.
  3. Open the Block category you want to review.
  4. Locate the required Block by its thumbnail and Name.
  5. Add or drag the Block into the intended area of the page canvas using the Builder's supported workflow.
  6. Select the resulting components and replace the example content with information appropriate to your campaign.

18.6 A Block Is a Starting Structure

Do not assume that a Block is finished simply because it looks complete when first inserted.

Review the Block for:

  1. Template or placeholder text
  2. Images
  3. Links
  4. Buttons and calls to action
  5. Forms
  6. Spacing and typography
  7. Responsive presentation

18.7 Components Inside Blocks

Once page structures are part of your Landing Page, the Builder maintains component data representing the page structure.

The Main Page and Thank You Page each maintain their own saved component collection.

When you save the Builder, the corresponding Components, Styles, HTML, and CSS are persisted for the current page type.

18.8 Selecting the Correct Component

Visual sections often contain nested components. Selecting a visible area on the canvas may select a container rather than the specific text, image, button, or other child element you intended to change.

If the wrong properties appear, use Layers to locate and select the correct component in the structural hierarchy.

18.9 Using Layers with Complex Blocks

Layers are especially useful after adding a larger reusable Block.

Use Layers to understand relationships such as:

  1. Section → container → column → content
  2. Form → fields → button
  3. Card → image → heading → text → action

The exact structure depends on the Block that was inserted.

18.10 Using the Style Manager

After selecting a component, use the Style Manager for the visual properties exposed by the Builder.

The Builder is configured to maintain saved CSS as part of its page data rather than depending entirely on inline styling.

Apply style changes carefully and check whether a change affects only the selected element or a broader structure.

18.11 Using Component Settings

The Builder adds a Settings section for traits associated with the selected component.

A component's Settings can differ from another component's Settings. The available controls are based on the type of element being edited.

18.12 Builder CSS and Block CSS

When the Builder loads, AIUNIFY Funnels inserts the application's Landing Page Template stylesheet into the editing canvas.

It also inserts the configured reusable Block CSS.

This allows the editing canvas to represent the available page structures using the styling needed by those structures while you work.

18.13 Payment-Related Components

The user Builder supports payment-related components as part of supported Landing Page ecommerce workflows.

If a supported PayPal or Stripe payment component is placed on the Main Page and associated with a Product, the Builder prepares Main Page script information that preserves that Product relationship during storage.

Do not change or remove payment-related components without retesting the entire checkout workflow afterward.

18.14 Forms Inside the Builder

Landing Page forms can collect visitor information and send submissions into the AIUNIFY Funnels Leads workspace.

When modifying a form visually, remember that the Landing Page Settings also control important submission behavior. Form next actions, autoresponders, and mailing integrations are documented later in this manual.

18.15 Save After Structural Changes

Adding, removing, or rearranging large page structures can change many Builder components at once.

After structural changes:

  1. Confirm the page still contains the intended content.
  2. Review Layers for unexpected nesting.
  3. Review styles.
  4. Save the Builder.
  5. Open the public Landing Page and verify the result.

18.16 Block Administration Is Not a User Operation

This User Operations Manual explains how to use Blocks made available in the Landing Page Builder.

System-wide creation, maintenance, categorization, or administration of the application's reusable Block library is an administrator function and is outside the scope of this user manual.

18.17 Recommended Block Workflow

Choose Blocks based on the outcome needed in that part of the visitor journey. Start with the closest reusable structure, customize it, save the page, and then verify it in the actual public Landing Page.

Operating principle: Blocks accelerate page construction; Components are what you ultimately edit. Use Layers to understand structure and the Style Manager and Settings to refine the selected element.

Write Your Comment