Change the Size of the Hero Banner

How to modify the Hero Banner’s size in GemPages

Step 1: Select the Hero Banner

• If you haven’t added a Hero Banner to your page yet, refer to this guide on how to insert a Hero Banner.
• If you’re modifying an existing Hero Banner, click on it to select it. This will open the settings panel on the left side of your screen.

Step 2: Locate the Size Settings

• In the settings panel, scroll down to find the Size section.
• Here, you will see different options for adjusting the banner size.

Step 3: Adjust the Banner Size

You have two options to modify the Hero Banner size:

1. As Banner Source (Auto Adjustment)

• • If you select “As banner source,” the banner will automatically adjust its size based on the dimensions of the uploaded image.
  • This ensures that your image is displayed at its optimal resolution without stretching or distortion.

2. Custom Size (Manual Adjustment)

• • If you prefer full control over the banner dimensions, select “Custom” from the dropdown menu.
  • Two input fields will appear, allowing you to enter your preferred values for:
    • Banner Width (in pixels or percentage)
    • Banner Height (in pixels or percentage)
  • Adjust these values to fit your page design.

How to make the Hero Banner full screen?

If you want to set the Hero Banner to full screen, nest the hero banner element inside a row. Here are the steps:

• In the left sidebar, drag a Row element into your page.
• Click on this Row element to open its settings.
• Toggle on the Full Width switch.

• Drag and drop the Hero Banner element inside this row.

• Hit Save to save the changes.

This will make the hero banner fill the full width of the row.

Best Practices for Image Quality

• For the best visual appearance, use high-resolution images that match the dimensions of your banner. Refer to this guide for recommendations on optimal image sizes.
• Once you have set your desired banner size, preview your page to ensure the changes look as expected.
• Adjust the dimensions further if necessary to maintain responsiveness across different screen sizes.