You want to automate color updates in a Webflow template, remove "www" from the URL, and customize design elements (e.g., homepage circles). Here's how to handle each item:
1. Automatically Apply Your App's Color Scheme
Webflow doesn't currently offer a built-in feature to auto-sync your app's color palette, but you can streamline updates using Global Color Swatches:
- Open the Style Panel and select a colored element.
- Click the color square and choose Create Color Swatch.
- Reuse this color swatch throughout the site. When you update the swatch, all linked elements using that color will update.
- To streamline further, use Client-First naming conventions or utility classes so you're reusing classes instead of styling things individually.
- While there’s no native API to auto-inject color data from your app, if you export the project or use custom code, a developer could write a script to dynamically style elements based on your app’s theme.
2. Remove "www" from Website URL
To always redirect from "www" to your root domain (non-www), follow these steps:
- Go to Project Settings > Hosting.
- Under Custom Domains, ensure both versions (e.g.,
yourdomain.com
and www.yourdomain.com
) are added. - Click the ‘Make default’ button next to the root version (
yourdomain.com
). - Webflow will automatically set up a 301 redirect from "www" to non-"www".
Make sure your DNS settings include:
- A Records for (a) 75.2.70.75 and (b) 99.83.190.102 pointing to
yourdomain.com
. - CNAME Record for
www
pointing to proxy-ssl.webflow.com
.
3. Change Color of Circles on Homepage
To change the color of graphic elements like small circles:
- Select the element directly on the homepage (e.g., click the small circle).
- In the Style Panel, look for Backgrounds, Borders, or Fill (depending on whether it’s a
div
, SVG, or image). - If it’s an SVG, you may need to:
- Upload a new colored version.
- Or embed the SVG inline via Embed element and update the
fill
attribute with CSS or JavaScript. - If multiple circles use the same class, update once and all will change.
- You can also use Global Color Swatches here, so any future brand changes are easier to apply.
Summary
- Use Global Color Swatches and utility class structures to broadly apply new color themes across your Webflow project.
- To remove "www”, set the root domain as default in Hosting settings and verify DNS records are correct.
- For homepage circles, identify their type (div, SVG, etc.) and update their color via the Style Panel or embedded code if needed.