Following this flow allows for a systematic and user-friendly approach to building a page or template in the vCard project. Users can customize the structure, components, and advanced settings to create a tailored and visually appealing result.

Section 1: Navigate to Builder Page

Purpose: Enable users to seamlessly navigate to the Builder page by clicking the designated builder button.

Section 1: Select Structure

Purpose: Choose a template structure for customization. users can choose a desired template structure from available options.

Section 2: Drag & Drop Component (Selected Row)

Purpose: Drag and drop components from the selected row onto the template.

Section 1: Copy, Remove, or Move Component

Purpose: Provide options to manipulate components within the template.

1. Copy Component:

   • Users can duplicate a selected component, creating a copy that can be placed elsewhere in the template.

2. Remove Component:

   • Choose to remove a selected component from the template, streamlining the design.

3. Move Component:

   • Adjust the placement of a selected component within the template for optimal arrangement.

Section 2: Set Selected Component Settings

Purpose: Enable users to configure specific settings for the selected component.users can access settings for the selected component to tailor its appearance or behavior.

Section 1: Update Selected Component Advanced Settings

Purpose: Allow users to modify advanced settings for the selected component within the template.

Section 2: Select Advanced Options

Purpose: Enable users to choose advanced options for the overall template or specific elements.

Section 3: Publish and Preview This Page

Purpose: Facilitate the publication and preview of the designed template.

1. Publish:

   • In Section 3, users can initiate the publishing process to make the template live or apply changes.

2. Preview:

   • Access a preview of the page to ensure the design meets expectations before publishing.