How to Upload Mobile Images to a Banner Block in Zibster
Overview
The Banner Block allows you to create large image-based sections on your Zibster website with optional text, buttons, and links. Because desktop screens are wide and mobile phone screens are vertical, the same banner image may not display well on every device.
Zibster allows you to add separate mobile images to a Banner Block so you have more control over what visitors see on phones. This is especially helpful when a wide desktop image crops out faces, logos, or other important details on smaller screens.
This guide walks you through uploading mobile-specific banner images, choosing a mobile banner size, customizing mobile banner content, and previewing the results on your website.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
This opens the Website Builder, where you can manage your website pages and blocks.
STEP TWO
Click the page that contains the Banner Block you want to update.
This opens the page editor so you can view and edit the blocks on that page.
STEP THREE
Click the BANNER BLOCK you want to edit and locate the MOBILE IMAGES section.
Upload an image from your computer, insert an image from the Clipboard, or select an image from the Stock Image Library.
For best results, use a portrait-oriented image for your mobile banner. 1080 × 1920 pixels, or another image with a similar 9:16 portrait ratio, is a good starting point. This is a recommendation rather than a required image size.
STEP FOUR
After your image uploads, confirm that its thumbnail appears in the MOBILE IMAGES section.
Images added here are used for the mobile version of the Banner Block and remain separate from the images in the desktop IMAGES section.
If you add more than one mobile image, the Banner Block can display those images as a slideshow on mobile devices.
STEP FIVE
Open the Banner Block layout settings and choose the layout and mobile banner size you want to use.
The Classic, Carousel, No Crop, and Modern Carousel layouts include mobile size options such as Full Screen, Medium, Short, and Thin.
The selected layout and mobile size can affect how much of your image is visible on a phone.
Click SAVE CHANGES when you are finished. Saving applies your changes to your website. There is no separate publish step.
FINAL STEP
Use the mobile preview option in your Website Builder or open your live website on a phone.
Check that the main subject, text, and other important details display correctly. Your mobile image will display for phone visitors, while the images in the desktop IMAGES section will continue to display on larger screens.
Different phone screen sizes can display the banner slightly differently, so review important content carefully before you finish.
Customize Your Mobile Banner Content
Click a thumbnail in the MOBILE IMAGES section to customize the content associated with that mobile banner image.
Depending on your Banner Block layout, you can customize options such as:
- Title
- Subtitle
- Alt text
- Link
- Button text
- Button link
- Text alignment
- Vertical positioning
- Image alignment
These settings allow you to fine-tune how an individual mobile banner image and its content appear on a phone.
Mobile Banner Image Best Practices
A separate mobile image gives you more control over how your banner appears on smaller, vertically oriented screens.
For best results:
- Use a portrait-oriented image, such as 1080 × 1920 pixels or a similar 9:16 ratio.
- Treat 1080 × 1920 as a recommended starting point rather than a required size.
- Keep faces, logos, and other important subjects near the center of the image.
- Avoid placing critical details close to the outer edges.
- Create a separate mobile version rather than simply resizing a wide desktop image when possible.
- Avoid placing important text directly inside the image.
- Use the Banner Block title, subtitle, and button settings for text whenever possible.
- Add descriptive alt text when an image provides meaningful visual information.
- Preview your Banner Block on both desktop and mobile after making changes.
A 9:16 image does not guarantee that the entire image will appear on every phone. The Banner Block layout, mobile banner size, image alignment, and the visitor's screen dimensions can all affect cropping.
Important Notes About Desktop and Mobile Images
The IMAGES and MOBILE IMAGES sections control different versions of your Banner Block.
- IMAGES controls the banner images used on desktop and larger screens.
- MOBILE IMAGES controls the images specifically used on phones.
- Adding a mobile image does not replace or edit the corresponding desktop image.
- If you add multiple mobile images, they can display as a mobile slideshow.
- If you do not add separate mobile images, the Banner Block can use your desktop banner images on mobile.
Adding mobile images is optional, but it is recommended when your desktop images do not crop well on phone screens.
Banner Layout Notes
Your selected Banner Block layout affects how your desktop and mobile images display.
- Classic layouts can crop images to fill the available banner area.
- Carousel layouts are useful when displaying multiple banner images.
- No Crop layouts prioritize showing the full image rather than filling the entire banner area.
- Modern Carousel provides another slideshow-style layout for displaying multiple images.
If a mobile image is cropping more than you want, try adjusting its image alignment or changing the mobile banner size. You can also try a No Crop layout when displaying the entire image is more important than filling the banner area.
Troubleshooting & FAQs
Do I have to upload a separate mobile image?
No. Mobile-specific images are optional.
If you do not add images to the MOBILE IMAGES section, your Banner Block can use the desktop banner images on mobile devices.
Adding separate mobile images is helpful when your desktop images are too wide or do not crop well on a vertical phone screen.
Why does my banner look good on desktop but not on mobile?
Desktop screens and phone screens have very different dimensions. A wide landscape banner may need significant cropping to fill a vertical mobile banner area.
Upload a separate portrait-oriented image to the MOBILE IMAGES section for greater control over what mobile visitors see.
Why is my 1080 × 1920 mobile image still being cropped?
A 1080 × 1920 image uses a recommended 9:16 portrait ratio, but the exact visible area can still vary.
The Banner Block layout, mobile size, image alignment, and the visitor's phone dimensions can affect cropping. Try adjusting the image alignment or mobile banner size. You can also try a No Crop layout if displaying the entire image is more important.
Why is my mobile image cutting off faces or important details?
Keep the main subject toward the center of the image and avoid placing important details near the outer edges.
You can also adjust the image alignment or try a different mobile banner size.
Why is my desktop banner image still showing on mobile?
Confirm that your image appears in the MOBILE IMAGES section and that your changes were saved.
Then use the mobile preview or open the live website on a phone to check the Banner Block again.
Why won't my mobile image upload?
Check the image file size.
The standard Zibster Website Package supports image uploads up to 4 MB. Accounts with the Original Files upgrade can upload files up to 50 MB.
If your image exceeds the upload limit available on your account, reduce the image file size before uploading it.
Why is the text on my mobile banner difficult to read?
Avoid adding important text directly to the image whenever possible.
Instead, use the Banner Block title, subtitle, and button fields. This gives Zibster more flexibility to display your text across different screen sizes and helps keep the text accessible to website visitors.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
