Overlay - Style Editor
The overlay option enables you to apply a color or image as a background to an element.
To apply overlay:
- Click the Element on your website to which you want to add an overlay.
- Click the
settings icon on your chosen element and navigate to the Style Editor
section
- Expand Background. To edit the overlay of the selected element, under the Background Type dropdown, choose Background image.
- To upload a background image: Click Change Image to add a different image to the background of the element.
You can adjust the position, size, alignment, and attachment of the background by clicking on the respective dropdowns.
Select the attachment as per your requirement:
- Fixed: The background image will be fixed while the elements move while scrolling.
- Scroll: The background image will scroll along with the other elements.
- Scroll down to Overlay Type and choose Single color and Linear gradient. Compared to a single color, a linear gradient shows the linear transition from one color to another.
- If you choose the single color option, you can choose a color to be applied to the background.
- If you want to have a linear gradient effect, choose two colors to fill in Overlay color 1 and Overlay color 2. Choose the Overlay Direction to determine how you want the colors to transition.
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Spacing - Style Editor
This tool helps you add padding and margins to your elements. Enable Even padding for all sides to evenly space the components within that element. You can also adjust the same using the arrows below. Enable Even margin for all sides to create a ...Shadow - Style Editor
This tool enables you to add shadows to your element. You can specify if the shadow should be offset or inset. You can also customize components such as the axis, blur, and spread of the shadow. Click the Add icon in the top-left corner of the ...Background - Style Editor
To apply a solid colored background: Click the Element on your website to which you want to add a background Click the settings icon on your chosen element and navigate to the Style Editor section. Expand Background. To add a background to a specific ...Style Editor
Customizing your website is simple with Style Editor. These tools can be found in each element's corresponding property box. You can individually customize the Background, Typography, Border, Shadow, and Spacing of every element on your page. To ...Typography - Style Editor
Using Typography, you can edit the: Font style Font size Font color Line spacing Letter spacing To edit the typography: Click the text Element on your website that you want to edit. Click the settings icon on your chosen element and navigate to the ...
New to Zoho LandingPage?
Zoho LandingPage Resources