Instructions

If you’re new to Webflow, start with the Webflow 101 Crash Course. It’s a quick intro from Webflow University that walks you through the basics and gives you everything you need to build your first site.

This page goes over changes that are more complex than just clicking and modifying. For any other questions, feel free to reach out to me at tef.firoozian@gmail.com

Icons

The icons in this file are "embedded" using custom code, rather than being uploaded as a file asset. This just means you have the freedom to change their colors easier to match your brand if needed.

How to Add New Icons

  1. Go to icons.relume.io
  2. On the top left corner, click on the search icon.
  3. Type the icon you're looking for and choose one you like.
  4. Choose on what size you want your to be in webflow, and click on "Copy to Webflow".
  5. Back at your webflow page, click on where you want your icon to go, and press Ctrl + V (for windows) or Command + V (for mac).
  6. If the icon pastes differently than what you want it to look like and has a different class name, make sure you give it the correct class name inside the "Style selector" ("icon-embed-medium", not "icon-embed-medium1" or "...medium2").

How Icon Colors Work - Accent Color

All icons use two different colors. The first color that is used consistently in every icon is set as default to the accent color. To change the that color to something else:

u-icon-embed-medium
u-icon-embed-medium
u-text-color-black
u-icon-embed-medium
u-text-color-secondary
  1. Click on an Icon you want to change the color of.
  2. Make sure the icon has the correct class name (icon-embed-medium, not icon1234).
  3. If you want to change colors for all icons, scroll down on the style panel on the right hand side. Under Typography, change "Color" to what you wish.
  4. If you want to only change one icons color, at the top of the style panel click on laptop icon inside "Style selector". Then you can add a combo class with the new color you wish to add as "text-color-primary" or "...-secondary" or "...".  

How Icon Colors Work - Second Color

The second color of each icon is either set to the primary color (on light background), or the light color (on dark background). These are connected directly the colors in the variable tab. Changing the variable colors will change all icon colors, as well every where else that color was being used.

"=var(--_colors---semantics--primary)"

"=var(--_colors---semantics--light)"

"=var(--_colors---semantics--secondary)"

If you want to only change the color for one icon, you can:

  1. Double click on an Icon you want to change the color of.
  2. This will open up the custom code block. Look for the orange words that either say "stroke=..." or "fill=..."
  3. These variables are what hold the color of the icons. If you find one's that are set to "=none" or "=currentColor", ignore them.
  4. If you find ones that are set to "=var(--_colors---semantics--primary)", you found the right one. The key phrase is the last word right before the closed parenthesis.
  5. Simply change the last word to the variable color to the color you want to use. For example, the line above could be changed to "=var(--_colors---semantics--light)"
  6. You can find the names of each color in the Colors section in the Variables tab, all the way down where it says Semantics. You can also quickly copy their variable value by clicking on the 3 dots "•••", and clicking on "Copy CSS".

Button & Link Text

The interactions used for the button and link texts included two text blocks. Follow the steps in order to change the text successfully.

Button Text

Try Organic Matcha
Try Organic Matcha
  1. Click on button component.
  2. For one button only, change the text in the right panel under "Text".
  3. For all buttons, click on the component icon on the right side of the component name to edit the component.
  4. In the right hand panel, click on the Props tab.
  5. Click on the "Text" property and change it as desired.

Link Texts

Benefits
Benefits
Formula
Formula
Reviews
Reviews
FAQ
FAQ
  1. Click on Nav Links component.
  2. Click on the component icon on the right side of the component name to edit the component.
  3. Click on the link text you want to change. On the left hand panel, you should be able to see two text elements under each link.
  4. On the right hand panel, click on Settings. From there you can modify the text under "Text Block Settings".
  5. Then click on the other text element in that same link. Click on it and change the text under the settings tab.