🔍 Overview
In Website Studio, your hero section may display a dark overlay (also called an image scrim) over your background image, and your logo may appear smaller than you'd like. This article walks you through how to remove the overlay and resize your logo so your homepage looks exactly the way you want it.
🗑️ Removing the Dark Overlay from Your Hero Image
The dark overlay is a semi-transparent layer applied on top of your hero background image. Follow these steps to remove it:
- Open Website Studio from the left-hand navigation menu.
- Select your website and navigate to the Home page.
- Click on the Hero section to open its settings panel.
- Look for the Overlay or Image Scrim toggle in the settings panel.
- Toggle the option off to remove the dark overlay from your hero image.
- Click Save or Publish to apply your changes.
Important: After removing the overlay, make sure to save your page before navigating away. If you leave the page without saving, the overlay may be re-applied automatically. Always confirm your changes are saved before moving to another section.
📐 Resizing Your Logo on the Home Page
If your logo appears too small in the hero section or header, you can increase its size directly in Website Studio:
- In Website Studio, open your Home page in the editor.
- Click on the logo element in the hero section or header to select it.
- In the settings panel on the right, locate the Logo Size or Width slider.
- Drag the slider to the right or enter a larger value to increase the logo size.
- Preview the result on both desktop and mobile views to ensure the logo looks good across all screen sizes.
- Click Save or Publish to apply your changes.
Tip: If your logo appears blurry after resizing, upload a higher-resolution version of your logo file (PNG or SVG recommended) through Agency Settings (Logo) → Upload Agency Logo before adjusting the size.
⚠️ Common Issues and How to Fix Them
- The overlay comes back after saving: This can happen if you navigate away too quickly. Save your changes, then refresh the page to confirm the overlay has been removed successfully before closing the editor.
- Logo changes are not saving: If your logo size edits are not persisting, try clearing your browser cache and making the adjustment again. Ensure you click Save before leaving the page.
- Logo is hard to read on the hero image: If your logo blends into the background after removing the overlay, consider uploading a version of your logo with a contrasting color or a transparent background. You can also add a subtle drop shadow through the logo element settings.
- Edits on duplicated pages overwrite the original: Avoid editing both a duplicated page and the original at the same time. Make all changes on one page, save, and then proceed to the other to prevent conflicts.
✅ Best Practices for Your Hero Section
- Always preview your page on both desktop and mobile after making changes to the hero section.
- Use high-resolution images (at least 1920×1080 px) for hero backgrounds to avoid pixelation.
- Keep your logo file in SVG or PNG format with a transparent background for the best results at any size.
- Save frequently while editing to prevent losing your work.
💬 Need More Help?
If you need further assistance, open the chat widget in the bottom-right corner of the platform and type human teammate to be connected with a member of our team.