How can I change the text color and swap the icon image in the "tileRowLink" style in Webflow?

Published on
September 22, 2023

To change the text color and swap the icon image in the "tileRowLink" style in Webflow, follow these steps:

  1. Open your Webflow project and navigate to the page where you have the "tileRowLink" element that you want to modify.

  2. Select the "tileRowLink" element. You can do this by either clicking on it directly in the Designer or using the Navigator panel to locate the element.

  3. With the "tileRowLink" element selected, you will see the style options in the right-hand sidebar. Look for the options related to text color and icon image.

  4. To change the text color, locate the "Color" option under the Text section. Click on the color swatch to open the color picker and choose a new color for the text. You can either select one of the predefined colors or enter a custom color using the hexadecimal code.

  5. To swap the icon image, scroll down to the Style section in the right-hand sidebar. Look for an option related to the icon image, which might be called "Icon" or "Icon Image".

  6. Click on the icon image option to open the image picker. From here, you can upload a new image or choose an existing image from your project's media library.

  7. Once you have selected a new image, Webflow will automatically update the "tileRowLink" element with the new icon image.

  8. If you want to further customize the appearance of the "tileRowLink" element, you can explore additional style options such as font size, padding, margin, etc., by expanding the relevant sections in the right-hand sidebar.

Remember to save your changes and publish your site for the modifications to take effect on your live site.

Additional questions:

  1. How do I change the text size in Webflow?
  2. Can I change the background color of a specific section in Webflow?
  3. Is it possible to add hover effects to elements in Webflow?