/ How to

How to Update Hyperlink Colors in WebFlow Site Builder

WebFlow is a popular no-code website builder that makes it easy to create professional-looking websites without coding. One common customization many WebFlow users want to make is updating the default hyperlink colors.

Here is a step-by-step guide on how to change hyperlink colors in WebFlow:

Use Global Color Swatches

The easiest way to update link colors across your entire WebFlow site is to use global color swatches. Here’s how:

  1. Go to the Design menu and open the Colors panel
  2. Click the “+” icon to add a new swatch
  3. Give your swatch a name like “Primary Links”
  4. Choose the color you want your links to be
  5. Click “Create Swatch”

Now that the color swatch is created, you can apply it to links:

  1. Select any text link on your page
  2. In the Text section of the Editor panel, click the colored square next to “Color”
  3. Click the swatch you just created e.g. “Primary Links”

Now all text links using that swatch will change color. This makes it easy to update link colors sitewide.

Use CSS Classes

Another option is to create CSS classes to style links. Here’s how:

  1. In the Design menu, go to CSS
  2. Click “Add Class”
  3. Give the class a name e.g. .orange-links
  4. Add CSS rules like:
.orange-links {
  color: #f18500; 
}
  1. Click “Save”

Then, apply this class to links:

  1. Select a link
  2. In the Editor panel, scroll down to “Class”
  3. Start typing your class name e.g. “orange” and select it when it pops up

The link will now use that CSS class and styling. You can apply this class to multiple links.

Use Custom Code

You can also use custom code to target links site-wide or individually:

Site-wide:

a {
  color: hotpink;
}

Individual link:

a.special-link {
  color: rebeccapurple;
  text-decoration: none;
}

Add your custom CSS code in the Design > CSS section.

Remove Underlines

To remove underlines from links:

  1. Select the link
  2. In Editor panel > Decoration, click “None”

You can remove underlines from all links by adding this CSS:

a {
  text-decoration: none;  
}

Conclusion

Updating hyperlink colors in WebFlow is easy once you know how to leverage color swatches, CSS classes, and custom code. Consistently styled links will make your site look clean, professional and intentional.

As you gain more experience with WebFlow, you can explore advanced options like:

  • Using CSS pseudo-classes to style link hover/active states
  • Adding animations and transitions to links
  • Dynamically updating links based on user interactions

Hopefully this guide gives you a good starting point for customizing hyperlinks within your WebFlow sites. Let me know in the comments if you have any other questions!

Related Posts