Skip to main content

How do I Add and Configure Jumbtron Button for an Event App Page on the Web Builder?

Azavista Support
Updated

Adding and Configuring Jumbtron button on a Webpage

Overview

The Jumbtron component allows users to highlight important content on an Event App page by displaying a prominent heading, descriptive text, and a “Learn More” button. Using the Web Builder, users can add and configure the Jumbtron component by customizing its identifiers, titles, button settings, and formatting options. This article explains how to add, configure, edit, remove, and reposition the Jumbtron component on an Event App page.

Step-by-Step Approach

1. Access the Web Builder

  • From the Event Dashboard, navigate to the Content module.
  • Select the Pages submenu.
  • Open the required Event App page in edit mode.

2. Drag and Drop the Jumbtron Component

  • From the Components panel, locate the Jumbtron component.
  • Drag and drop the component onto the desired area of the page.
  • The Jumbtron is added and becomes visible in the page layout.

3. Enter or Edit ID for Heading/Text

  • Select the Jumbtron component to open its settings panel.
  • Locate the Id field for the heading or text.
  • Enter or edit the Id as required.
  • The Id uniquely identifies the content section.

4. Enter or Edit Title for Heading/Text

  • Locate the Title field for the heading or text.
  • Enter or modify the title as required.
  • The title represents the main message displayed in the Jumbtron.

5. Edit Heading and Text Using Formatting Options

  • Select the heading or text directly on the Web Builder canvas.
  • Edit the content using available styling and formatting tools.
  • Apply options such as font size, bold, alignment, or color.
  • Changes are reflected immediately in the preview.

6. Enter or Edit Title for the Learn More Button

  • Select the Learn More button within the Jumbtron.
  • Locate the Title field in the settings panel.
  • Enter or edit the button title as required.
  • This defines the text displayed on the button.

7. Select URL for the Learn More Button

  • Locate the URL select field for the button.
  • Choose or enter the destination URL.
  • This determines where users are redirected when clicking the button.

8. Select Target for the Learn More Button

  • Locate the Target select field.
  • Select whether the link opens in the same tab or a new tab.
  • Apply the selected option.

9. Rename and Format the Learn More Button

  • Select the button on the Web Builder canvas.
  • Edit the button text directly if required.
  • Apply available styling and formatting options.
  • Customize the appearance to match the page design.

10. Manage the Jumbtron Component

  • Reposition the Jumbtron using drag-and-drop within the page layout.
  • Remove the Jumbtron component if it is no longer required.

11. Save and Apply Changes

  • Publish the page to apply the Jumbtron configuration.
  • Preview the page to confirm that the component displays and functions correctly.

Related to

Related articles