Styling & Customization

The Styles Panel on the right side of the screen allows you to fine-tune the appearance of every element in your hero section.

How to Style an Element

1. Select the element you want to style on the canvas. A blue outline will appear around it.
2. The Right Panel will automatically show the properties for that element.
3. Click on a category (e.g., "Background", "Typography") to expand its options.

Style Categories

Background

Customize the background of sections, containers, or buttons.

• Background Color: Choose a solid color using the color picker.
• Background Image: Upload an image to use as the background.
  • Image Size: Choose Cover to fill the area, Contain to fit the image, or Auto.
  • Image Position: align the image (e.g., Center, Top Left).

Spacing (Margin & Padding)

Control the space around and inside elements.

• Padding: The space inside the element (between the border and the content).
• Margin: The space outside the element (between this element and its neighbors).
• You can set Top, Right, Bottom, and Left values independently.

Size & Position

• Width/Height: Set specific dimensions (px, %, vh/vw).
• Min/Max Width/Height: Set constraints.

Text Style

Customize typography.

• Font Family: Choose from a list of web-safe fonts (Arial, Georgia, etc.).
• Font Size: Adjust the text size.
• Font Weight: Make text Bold (700), Normal (400), or Light (300).
• Color: Change the text color.
• Align: Left, Center, or Right align text.

Layout (Flexbox)

Control how child elements are arranged. This is powerful for aligning buttons or columns.

• Display: Select Flex to enable flexible layouts.
• Direction: Row (horizontal) or Column (vertical).
• Justify Content: Aligns items along the main axis (e.g., Center horizontally in a Row).
• Align Items: Aligns items along the cross axis (e.g., Center vertically in a Row).
• Gap: Adds space between flex items.

Effects

• Opacity: Make an element transparent.
• Border Radius: Round the corners of buttons or images.
• Box Shadow: Add depth with shadows.

Device Responsiveness

The Hero Builder allows you to style elements differently for different devices (Desktop, Tablet, Mobile).

1. Click the device icon in the top toolbar (Desktop, Tablet, or Mobile).
2. The canvas will resize to simulate that device.
3. Any style changes you make while in Tablet or Mobile mode will only apply to that device (and smaller devices).
   • Example: You can have a large font size on Desktop and a smaller one on Mobile.

Next, learn how to save and publish your design.