Webflow for Squarespace Designers: Changing text color site wide
So you're a Squarespace Designer considering to jump on the Webflow bandwagon? This blog post (which is part of the series "Webflow for Squarespace Designers") will hopefully help you find your way around Webflow quicker and/or answer the question of "How do I work with XXX (Squarespace feature) in Webflow?". In this article, I want to talk about changing font colors. Sounds easy? Well, there are some key differences doing this in Webflow as well as Squarespace.
Hey there! So you're a Squarespace Designer considering to jump on the Webflow bandwagon? This blog post (which is part of the series "Webflow for Squarespace Designers") will hopefully help you find your way around Webflow quicker and/or answer the question of "How do I work with XXX (Squarespace feature) in Webflow?". In this article, I want to talk about changing font colors. Sounds easy? Well, there are some key differences doing this in Webflow as well as Squarespace.
How do you change text color in Squarespace?
As you might know, in Squarespace you use the Site Styles panel to change text colors (e.g. headlines, paragraph text etc.) site wide. This means if you change your H1 headline color to green, each H1 headline on your site will have the color green. You can also style the font colors for specific sections of your site by customizing the color scheme for that section. However if you want to really get nitty gritty with your font colors and for instance just style one particular word inside a sentence, you will need the markdown block (which in tis case is basically custom code) for this.
Is there an easy way to change text color in Webflow?
In Webflow you work with so called classes. These have noting to do with the lessons at school but are an important element of the HTML structure. Each item on your page, no matter if it's text, images or a simple Div block has a class and can be given a class name. You can then style each of these elements as you see fit. For instance each paragraph which you haven given the name "green-text" with the text color green, will have the color green applied to it. You can then re-use this style wherever you like. For site-wide color changes it is often advisable to choose "All Paragraphs" in your style panel, this way all paragraphs you create will automatically have your desired style settings applied. By using individual class names you can style each text element as you like, no matter where on your page it is located. You can even give one word inside a sentence a different color than the remainder of your sentence by applying a different class to just this particular word. You basically have lots and lots of flexibility when it comes to design and styling with color in Webflow and can really fine tune the appearance of any text on your site. To learn more about typography in Webflow, check out their short video here:
All in all Webflow lets you do extensive changes to your text colors and other text settings. For basic changes to your text you don't need to write custom CSS code at all, but can do all of this visually right inside Webflow. Pretty neat.
Still looking for a great alternative to PayPal for accepting client payments? Check out TransferWise – a tool I use for any non-Aussie clients. You can read more about it in a previous blog article or try out TransferWise here (yep, this is an affiliate link).
