Skip to main content

How Do I Add and Configure Jumbotron Button for the Event App?

Azavista Support
Updated

Adding and Configuring a Jumbotron Button for the Event App

Overview

The Jumbotron component in the Event App Web Builder allows you to create visually prominent sections with headings, text, and a customizable “Learn More” button. This feature is useful for highlighting key information, promotions, or calls to action on your event website.

Using the Web Builder, you can easily drag and drop the Jumbotron component, edit its content, style the text, configure the button behavior, and reposition or remove it as needed.

Step-by-Step Approach

1. Add the Jumbotron Component

  • On the Event dashboard, navigate to the Content module.
  • Select Pages submenu.
  • Open the required event app page in edit mode.
  • Drag and drop the Jumbotron onto the desired section of your webpage.

2. Configure Heading and Text

  • Click on the Jumbotron component to open its settings panel.
  • Enter or edit the following fields:
    • ID for Heading/Text – Define a unique identifier for internal reference.
    • Title for Heading/Text – Add the main heading or descriptive text.

3. Edit and Style Heading/Text

  • Click directly on the heading/text within the Web Builder.
  • Use the available styling and formatting options to:
    • Change font size, color, and alignment
    • Apply bold, italics, or other formatting
    • Customize layout and spacing

4. Configure the “Learn More” Button

  • In the settings panel:
    • Enter or edit the Title for the Learn More button.
    • Select a URL from the URL selection field.
    • Choose the Target option (e.g., same tab or new tab).

5. Customize Button Appearance

  • Click on the “Learn More” button in the Web Builder.
  • Use styling options to:
    • Rename the button text
    • Adjust font, color, and size
    • Modify button alignment and appearance

6. Reposition the Jumbotron Component

  • Drag the component within the Web Builder to move it to a different section of the page.
  • Ensure proper placement for optimal visibility and user engagement.

7. Remove the Jumbotron Component

  • Select the Jumbotron component.
  • Click on the Delete/Remove option.
  • Confirm the action to remove it from the page.

Summary of User Capabilities

As a user, you can:

  • Drag and drop the Jumbotron component
  • Enter or edit ID and Title for heading/text
  • Customize and format heading/text using styling tools
  • Configure and rename the “Learn More” button
  • Select URL and target behavior for the button
  • Reposition the component on the page
  • Remove the component when no longer needed

Related to

Related articles