Skip to main content

App- Header

1. Overview

The App Header section is used to configure the header displayed in the VirtuApp application. It allows administrators to customize the header title, subtitle, background image, and buttons displayed in the header area.

Administrators can also configure button positions, icons, and types to provide quick access to application features.

2. Navigation Path

Navigation Path: VirtuBox → Settings → VirtuApp → App Header

3. App Header Page

The App Header page contains three main sections:

    App Header Add Content Add Buttons Settings

    4. App Header

    The App Header section displays a preview of the configured header content.

    The preview can display:

      Title: The main heading displayed in the header. Subtitle: Additional text displayed below the title. Buttons: Configured header buttons, when available.

      For example:

        Title: Hello, Subtitle: Welcome Back

        If no buttons have been configured, the preview displays the message No buttons added yet.

        5. Add Content

        The Add Content section allows administrators to configure the main header content.

        5.1 Available Fields

        Field Description Title Specifies the main heading displayed in the application header. Subtitle Specifies the supporting text displayed below the title. Background Image Allows users to select a background image for the header. Save Saves the configured header content.

        5.2 How to Configure Header Content

          Navigate to VirtuApp → App Header. Locate the Add Content section. Enter the required text in the Title field. Enter the required text in the Subtitle field. Select a background image from the Background Image dropdown, if required. Click Save. Verify the updated content in the App Header preview.

          6. Add Buttons

          The Add Buttons section allows administrators to add buttons to the application header.

          6.1 Available Fields

          Field Description Position Specifies where the button appears in the header. Title Defines the button label. Icon Allows users to select an icon using the Icon Picker. Type Specifies the functionality associated with the button. Save Saves the configured button.

          6.2 Button Positions

          The Position dropdown provides the following options:

            Left button: Places the button on the left side of the header. Right button: Places the button on the right side of the header.

            6.3 Button Types

            The Type dropdown provides the following options:

              Back Search Addresses Bookmark Broadcasts Cart Form Hamburger Home Listing Map-points Map-track Maps Order-history Page Page-share Profile Settings Share Workflow

              The selected type determines the functionality associated with the button.

              6.4 How to Add a Header Button

                Navigate to VirtuApp → App Header. Locate the Add Buttons section. Select the required position from the Position dropdown. Enter the button label in the Title field. Click Icon Picker to select an appropriate icon. Select the required option from the Type dropdown. Review the configured details. Click Save. Verify that the button appears in the App Header preview.

                7. Icon Picker

                The Icon Picker allows administrators to select an icon for a header button.

                How to Select an Icon

                  Click Icon Picker. Select the required icon from the available options. Confirm the selection. Save the button configuration.

                  8. Background Image

                  The Background Image field allows administrators to select a background image for the header from the available options.

                  How to Configure a Background Image

                    Navigate to the Add Content section. Open the Background Image dropdown. Select the required image. Click Save. Verify the header preview.

                    9. Settings

                    The Settings section provides access to the header appearance configuration.

                    Available Option

                    Option Description Style Opens the style configuration interface for customizing the header appearance.

                    How to Configure Header Style

                      Navigate to VirtuApp → App Header. Locate the Settings section. Click Style. Configure the available style settings as required. Save the changes if a save option is provided. Verify the updated header appearance.

                      10. Important Notes

                        Configure the title and subtitle according to the application's requirements. Select the appropriate button position. Choose the correct button type to provide the intended functionality. Use suitable icons to make buttons easy to identify. Available background images depend on the assets configured in the application. Verify all changes in the App Header preview. Button behavior depends on the selected type and its configuration.

                        11. Key Benefits

                          Allows customization of application header content. Supports title and subtitle configuration. Provides background image selection. Supports left and right header buttons. Allows button types and icons to be configured. Provides access to header appearance customization.

                          12. Conclusion

                          The VirtuApp App Header section allows administrators to customize the application header by configuring its content, background image, and buttons. Proper configuration helps create a consistent interface and provides users with convenient access to important application features.

                          Back to top