How to Adjust Overlay Transparency in a Zibster Text + Image Block
Overview
Certain Text + Image Block layouts include an overlay background behind your text or image. You can adjust the overlay’s opacity to make that background more solid or more transparent. This helps you customize the design while keeping your text easy to read. This guide explains which layouts support text overlay transparency and how to adjust it.
Supported Layouts
You can adjust text overlay transparency with these Text + Image Block layouts:
- Text Overlay Left
- Text Overlay Right
- Text Overlay Center
- Text Overlay Center Left
- Text Overlay Center Right
- Text Overlay Bottom
- Text Circle Overlay Left
- Text Circle Overlay Right
- Image Overlay Left
- Image Overlay Right
- Image Overlay Top
- Image Overlay Bottom Left
- Image Overlay Bottom Right
- No Crop Image Center Left
- No Crop Image Center Right
- Overlay Split Left
- Overlay Split Right
- Overlay Box Left
- Overlay Box Right
Note: Image Overlay Text Left and Image Overlay Text Right also include an overlay opacity setting, but their overlay appears behind the image. They are not covered in this guide.
STEP ONE
Log In to Your Account
Log into your Zibster account and click on WEBSITE in the left-hand menu.
STEP TWO
Click the name of the page containing the Text + Image Block you want to update.
Click inside the Text + Image Block to open its settings. You can also click the block’s pencil icon, then click ADVANCED in the menu that opens.
STEP THREE
Click the STYLING tab. The OVERLAY OPACITY slider appears at the top of the styling settings for supported layouts.
If you do not see OVERLAY OPACITY, click the LAYOUT tab and select one of the supported layouts listed above. Then click STYLING to return to the opacity setting.
FINAL STEP
Move the OVERLAY OPACITY slider left to make the overlay background more transparent or right to make it more solid. The percentage beside the slider shows your selected opacity. 0% makes the overlay background completely transparent, while 100% makes it fully solid.
Click SAVE CHANGES to apply your update. Your saved change takes effect on your website without a separate publishing step.
What Your Visitors See
Visitors see your text with the updated overlay background. Lower opacity allows more of the image or background underneath to show through.
After saving, review the page on desktop and mobile to make sure your text remains easy to read. If the text blends into the image, increase the overlay opacity to give it a more solid background.
NEED HELP?
Have questions or need a hand? Contact our Support Team for help with your Zibster website and account.
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
