• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    Changing the Text Color in WordPress

    April 5, 2021 by ProfK Leave a Comment

    There are 4 ways to change the text color in WordPress. You can change a single word or phrase, an entire paragraph, or all of the text throughout the site. Each method is easy!

    Method #1 – Use the Gutenberg editor

    Changing the text color with WordPress’s visual editor has always been pretty simple. With the new Gutenberg editor, it’s even easier. Place your cursor on a paragraph and look in the right-hand sidebar. Make sure the “Block” tab is selected (as opposed to the “Post” tab). Open the “Color settings” panel and you’ll see options for the Text Color as well as Background Color.

    Gutenberg Block Color Settings

    You can select one of the existing options or click on “Custom color” for something else. A color picker will open up. Click inside the color palette area, moving the slider underneath to display new hues. You’ll see the hex code change as you move around the palette. When satisfied with your choice, click outside of the picker.

    Block Color Picker

    This same Color settings panel will appear for headings, lists, buttons, and blockquotes. And, naturally, you can change the Background color in the same fashion. The “Clear” button will revert to the default settings.

    If you want only one word or phrase, highlight the word(s). Instead of using the Color Settings for the block, select the down arrow on the content editor toolbar. Scroll to “text color”. You’ll have the same opportunity to select one of the existing colors, or click on “Custom color” for an alternative.

    Text color in Gutenberg

    Method #2 – Use the Customizer

    There are usually some color settings in the Customize area. The options vary wildly by theme. You may be able to change only the background or links color. Sometimes, you’ll be able to change colors for text, headings, links, etc. The advantage of the Customizer is that the color modifications are site-wide. The most common places you’ll find color settings are in “Typography” or “Global”.

    Astra Theme Global Colors
    In the Astra theme, there are global color settings you can change.

    Just like the Color settings for blocks, clicking on the default color circle will bring up the color picker. Here is where you can select your custom color. Play around with the slider to get different hues to appear.

    Method #3 – Use the Theme Options

    Some themes come packaged with extensive options for modifying all sorts of things. The Avada theme, for example, has quite a substantial options feature. The color settings are in several sections, including the generic color area, as well as typography, menu, header, footer, sidebar, background, etc.

    Avada Theme options
    Avada Theme options

    Method #4 – Use CSS

    When you want to alter color globally and your theme doesn’t provide adequate options, use the Customizer’s Additional CSS area. A good place to start is the body text. Each snippet of CSS code is a rule that starts with a selector (“p” in the code below), followed by curly brackets that contain a property (“color”) and value (“#0187d1”). Copy and paste the following code into your Additional CSS field:

    p {color: #0187d1;}

    Click on the “Publish” button at the top of the sidebar to save the code. View the website in your browser window. If you don’t like the blue hue, use Google‘s color picker to find what you prefer (and make life much easier!). Replace the blue property value with the new hex code of your choice.

    Customizer Additional CSS

    Headlines can be adjusted, too. There are 6 levels of heads, with “h1” being the largest and most important. Explore by copying and pasting the following code into your Additional CSS field:

    h1 {color: #0187d1;}
    h2 {color: #011dd1;}
    h3 {color: #652cc7;}
    h4 {color: #bf1fb5;}
    h5 {color: #eb3e0e;}
    h6 {color: #91d111;}

    Using the Customizer is a safe way to modify your theme. Starting with the paragraph and heading selectors is a good introduction to the world of Cascading Style Sheets. To learn more about CSS, subscribe to my blog!

    Related Posts

    How Can I Change the Typeface in WordPress?
    Why and How You Create WordPress Child Themes
    How to Choose a WordPress Theme
    Introduction to Web Design

    Filed Under: WordPress Tagged With: color picker, Color settings, CSS, Gutenberg, hex value, text color, theme options, WordPress Customizer

    Reader Interactions

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    StudioPress
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design