How to Update Colors
ο»ΏIntroductionο»Ώ
Colors play a key role in shaping your websiteβs visual identity and overall user experience. From buttons and text to backgrounds and callouts, consistent color usage reinforces your brand and helps guide visitors' attention. In the Storagely Website CMS, you can easily update colors across sections to match your branding, improve readability, and create a polished, professional look. This guide walks you through how to adjust color settings effectively throughout your site.
ο»ΏNOTE: Colors are chosen during onboarding and will impact the consistency of your entire site, including location pages and rental system. If you need assistance with color changes, please consult with Storagley to complete this. ο»Ώ
To change an element's color:
- Click on the element (text, button, icon, etc.).
- In the toolbar, click the color circle.
- Use the color picker or paste in a HEX/RGB code.
- ο»ΏReview the changes made in all 3 device types (desktop, tablet, mobile) to ensure they look correct.
- If you want to save the update made, select βUpdateβ in the bottom right corner of the window. Then close the tab.
π₯ Watch Tutorial Video:
To edit global color swatches:
- Click the paint roller icon in the top-left of the Website Editor, and click the paint roller icon to open global design settings.
- Click any swatch color to change it.
- New swatch values apply everywhere that the swatch color is used site-wide.
- ο»ΏReview the changes made in all 3 device types (Desktop, tablet, mobile) to ensure they look correct.
- If you want to save the update made, select βUpdateβ in the bottom right corner of the window. Then close the tab.
π₯ Watch Tutorial Video:
Best Practices for Editing Color Swatches
β Use your brandβs official color palette: Stick to your primary and secondary brand colors for consistency across your website, marketing materials, and signage. If available, use exact HEX or RGB codes from your brand guide.
β Update swatches instead of individual elements: Always edit global swatches when possible. This ensures consistency and saves timeβevery element using that swatch will update automatically across the site.
β Preview changes across all devices: Color visibility and contrast can appear differently on smaller screens. Always test updates in desktop, tablet, and mobile views before publishing.
As always, if you have any questions during this process, our Customer Success Team is here to help. The best way to reach us is by submitting a support ticket.
ο»ΏSubmit a Ticketο»Ώ