Editing & Components

The Hero Builder uses a flexible component system. You can build your hero section by dragging and dropping various elements onto the canvas.

Adding Components

The Components Panel on the left side of the screen contains all available blocks. To add a component:

1. Open the Components panel if it's not already visible.
2. Find the component you want to add (e.g., "Heading 1", "Image", "Button").
3. Click and drag the component from the panel onto the canvas.
4. Drop it into the desired position. Green guidelines will appear to show you where the element will be placed.

Available Components

• Text Elements:
  • Heading 1: Large main title.
  • Heading 2: Subheading or secondary title.
  • Paragraph: Body text for descriptions.
• Media:
  • Image: Placeholders for images. You can double-click or use the settings panel to change the image source.
• Buttons:
  • Solid Button: Primary call-to-action button with a solid background color.
  • Outline Button: Secondary button with a transparent background and border.
  • Button Group: A pre-made set of two buttons (Primary & Secondary) side-by-side.
• Layout:
  • Full Section: A full-width container for grouping content.
  • Content Box: A centered container to keep content within a max-width.
  • 2 Columns: Splits the area into two equal columns.
  • 3 Columns: Splits the area into three equal columns.

Editing Content

Text

To edit text:

1. Double-click on any text element on the canvas.
2. Type your new content directly.
3. Use the formatting toolbar that appears above the text for basic styling (bold, italic, etc.), or use the Right Panel for more advanced styling.

Images

To change an image:

1. Select the image on the canvas.
2. Go to the Settings (gear icon) tab in the Right Panel if available, or simpler:
3. Go to the Style Manager (paintbrush icon) > Background section.
4. Click the file icon next to Background Image to upload or select a new image.
   • Note: Some image blocks might use the src attribute. If so, double-clicking usually opens the image manager.

Buttons & Links

To edit a button's link:

1. Select the button.
2. Go to the Settings tab (gear icon) in the Right Panel.
3. Enter the URL in the Link URL field.
4. Check Open in new tab if you want the link to open in a new window.

Deleting Components

To remove an element:

1. Select the element on the canvas.
2. Press the Delete or Backspace key on your keyboard.
3. Alternatively, use the trash can icon in the toolbar if available.

Next, learn how to style your components to match your brand.