Get your website ready for the new season by updating your Home page banner image. Banners are an essential part of any website, as they set the tone and first impression for visitors. Whether you're showcasing a new product, promoting an upcoming event, or simply highlighting your brand, having an eye-catching banner is crucial.
This blog post will guide you through changing the banner image of your Wix Editor website, from a Legend Wix Partner. You can also shop this service by having us update your banner image on your Wix Editor site for you.
Choosing the Right Banner Image
Before diving into the technical aspects, it's important to choose the right banner image. Here are a few things to consider:
Image size: Choose a horizontal photo that hasn't been cropped for your banner. The ideal size is 1920px x 550px or larger to ensure it fits the banner area without stretching or pixilation. While some devices may display the entire image, only about a third will be visible across all devices due to responsive design. Therefore, position the main focus of your photo within the central third, left third or right third of the image to ensure it remains prominent across all devices.
Image resolution: Use a high-resolution image to ensure it looks sharp and clear on all devices.
Image format: Save your image in a web-friendly format, such as JPEG or PNG.
Image content: Choose an image that is relevant to your brand and message, and that will grab the attention of visitors.
Changing the Banner Image on Wix Editor
Once you've chosen your image, follow these steps to change the banner image on your Wix Editor website:
1. Go to the Editor
Log in to your Wix account and open the website you want to edit by navigating to All Sites and selecting your site.
Click Edit Site to access editing mode.
3. Go to the page with the banner
Select the page of your site that you will be working on by using the Page navigation in the upper left corner.
4. Click on the banner image
Select the banner image you want to change, so that a set of options populates. A blue parameter will appear around your image when it has been selected. Click the Change Strip Background option.
Click Image to access the ability to upload your own image or choose from free stock photo options from Wix or Unsplash. Shutterstock is also available to use stock photos for a fee.
5. Select your new image
You can choose from your uploaded images, Wix library images, or stock photos.
6. Edit and adjust the image
Tint your image opacity to help any overlayed text to be clearly visible for accessibility purposes by clicking on the banner image > Change Strip Background > Settings. This will allow you to update the color of the tint and darken or lighten the photo as needed by altering the Image opacity and Color behind the image.
If you notice your image is cut off after you have added it, it can be updated by clicking to refocus the image under Where is it positioned?
Update the responsiveness of the image to align content to either the Left, Center or Right by clicking on the banner image to select Strip Layout. In this example the Strip layout is set to still be Centered. If the main focus of your image is on the left of the photo, align left and stay to the left of the gridline with all content such as text and buttons so that they can always be seen on all devices.
7. Settings
Click the banner image Change Background Strip > Settings. Scroll down to add alt text using keywords for accesssibility and SEO.
Make sure your banner image looks good on all devices, including mobile phones and tablets. Drag and drop as needed to realign the image, text, and call to action. If you are missing content on your mobile site click the eye icon on the left to unhide the content and make it reappear on the site.
9. Click Save and Publish
Click the blue save and published button.
Additional Tips for Changing Your Banner Image
Here are a few additional tips to keep in mind when changing your banner image:
Use a call to action Consider adding a call to action (CTA) to your banner image, such as "Learn More" or "Shop Now." This will encourage visitors to take the next step.
Use a consistent design: Make sure your banner image is consistent with the overall design of your website. This will create a more cohesive and professional look.
Test different images: Try out different banner images to see what resonates best with your audience.
By following these tips, you can change the banner image of your Wix Editor website.
Additional Resources
Prefer that a Legend Wix Partner adds your banner image for you? Shop our Custom Hero Banner Wix Editor Website Section.
Schedule a free 15-minute consultation with a Legend Wix Partner to learn more about your options for making seasonal updates to your Wix Editor website.
