How can I change the link colors in the Webflow template I purchased, considering that the links are generated by CMS collections and I can't find where to change them?

Published on
September 22, 2023

To change the link colors in a Webflow template that utilizes CMS collections for generating links, follow these steps:

  1. Open your Webflow project in the Designer.
  2. Select the page where the links are located.
  3. On the right-hand side of the Designer, go to the Styles panel.
  4. Locate the element that contains the CMS-generated links. This could be a text element or a link block, depending on how the template is structured.
  5. Click on the element to select it.
  6. In the Styles panel, find the Text section.
  7. Look for the Link section within the Text section.
  8. Expand the Link section and you will see options for styling the link colors.
  9. Use the Color dropdown to choose a new color for the links.
  10. You can also customize the link styles further by adjusting the Hover, Pressed, and Current states if desired.

If you are unable to find the link styles in the Styles panel, it's possible that the link colors are being set using custom code or through the use of classes. In this case, you'll need to search the code of your Webflow project for the classes or custom code responsible for styling the links.

To search for CSS classes:

  1. Open the Pages Panel on the left-hand side of the Designer.
  2. Double-click on the page where the links are located.
  3. In the site preview mode, right-click on a link element and choose Inspect.
  4. The browser Developer Tools will open.
  5. Look for the CSS styles associated with the link. This may be in a separate code file or within a <style> tag on the page.
  6. Once you identify the CSS class responsible for the link styles, you can go back to the Designer and locate that class in the Styles panel to make changes.

If you find that the link colors are set using custom code, you can make the necessary changes by following these steps:

  1. Open the Pages Panel and navigate to the template page where the links are located.
  2. Click on the Settings (gear) icon next to the page name.
  3. Select the Custom Code option.
  4. Look for HTML or <style> tag and search for the styles associated with the links.
  5. Edit the color or any other styles related to the links.
  6. Save the changes.

Remember, it's always a best practice to duplicate your project or make a backup before making any changes to ensure you can easily recover in case anything goes wrong.

Additional questions:

  1. How do I change the font size of the links in Webflow?
  2. Can I add animation effects to links in Webflow?
  3. How do I style the visited links in Webflow?