Webflow sync, pageviews & more.
NEW

Can I automatically change the color of a Webflow template to match the colors of my app without manually updating each element? Also, how can I remove "www" from my website's URL? Lastly, is it possible to change the color of the small circles on the home page of my Webflow website?

TL;DR
  • Use Global Color Swatches and utility classes in Webflow to update your app's color scheme site-wide efficiently.
  • Set the root domain as default in Project Settings > Hosting and configure proper DNS records to remove "www" from your URL.
  • Identify homepage circle elements (div, SVG, etc.) and change their colors via the Style Panel or embed code, using swatches for easier future updates.

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.
Rate this answer

Other Webflow Questions