By default, unvisited links on websites created in Webflow are blue. Of course, this is the case for most Internet platforms. If you’re tired of seeing the same blue color everywhere, we have good news. Webflow made it easy to change the color of your website links, making them stand out.
Continue reading to learn more about links in Webflow and how to change the link color.
Types of links in Webflow
Before you design your links, let’s go over your link options when creating a website in Webflow.
Text links
Text links are the most basic form of links in Webflow. You can use them when a text element has no other purposes except linking. One of the most common uses of text links is anchor text.
To add a text link to your website design, do the following:
- Open the “Add Items Panel” in the left sidebar.
- Navigate to the “Typography” section.
- Tap the “Text Link” field.
Once you’ve entered your link, you can edit it by double-clicking the text. Alternatively, you can select the item and press “Enter.”
Link fields
If you think text links are too simple, consider adding link fields to your layout. They are perfect for adding links dynamically. Once you add a link field, you can activate it by connecting it to a text link or button.
Link fields are typically used to:
- Link to locations outside your website.
- Registration links for third party event services.
- Linking to social media accounts.
You can add a link field to a newly created or existing collection by visiting the collection settings. From there, do the following:
- Select “New Field.”
- Tap the “Link” icon in the “Select Field Type” menu.
Link blocks
Link blocks allow you to turn any design element into a link. Although primarily used for linking, these handy blocks can also be used for layout and structure.
The most common design elements used for a link block are:
- Images
- Designs
- banners
Follow these steps to add a link block to your website:
- Go to the “Add Items Panel”.
- Navigate to the “Basic” section.
- Select the “Link Block” field and drag it to your page.
Once the link block is on the page, you can drag any element to it except other links.
Change the color of a link
Once you’re happy with the way your links are displayed on your website, it’s time to give them a little makeover. Whether you go for a bold, eye-catching color or a more subtle change, the ideal link color is just a few clicks away.
How to change the color of a single link
The default text style for the “All Links” label displays blue, underlined links. If you want a particular section of your website to stand out, you can change the link color for just one or a few elements.
The Style panel has everything you need for this action, regardless of link type. To override the default color for a specific link, do the following:
- Click the link item.
- Go to the “Style” panel on the right (the brush icon).
- Scroll down until you see the “Typography” section.
- Under “Color”, set the link color you prefer.
You can write the code in the HEX color field if you already have a color in mind. Alternatively, you can use the color selection tool to find the perfect link color.
How to change the color of all links
If you want to build a recognizable brand, establishing a consistent and compelling visual identity is essential. Of course, your website design should also visually match your brand. It may help if all links are the same color, especially the brand color.
Here’s how you can style all the links on your website:
- Click on any element of the link.
- Press the shortcut “Control + Enter” on Windows or “Command + Enter” on Mac to launch the selection menu.
- From the list of tags, select “All Links” at the bottom.
- Change the link color to your preferred color.
Any new links you add later will take the styling cues from the “All Links” tag. If you change your mind about a particular set of links, you’ll have to override the established rule on a case-by-case basis.
No more feeling of sadness
When creating a website, it’s easy to overlook links with so many design elements to consider. For that reason, changing links can go a long way in making your website stand out. The challenging part is choosing the best color to represent your brand or business. After that, implementing that color should take no more than a few minutes of your time following our guide.
