{"id":11988,"date":"2020-09-10T15:00:11","date_gmt":"2020-09-10T13:00:11","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=11988"},"modified":"2020-12-04T10:26:35","modified_gmt":"2020-12-04T09:26:35","slug":"wordpress-change-text-color","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-change-text-color\/","title":{"rendered":"How to Change Text Color in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Colors are one of the essential elements of web design that can evoke specific emotions from your targeted audience and gain their reaction. They have the power to raise brand recognition and influence the way someone perceives your brand, incite people to take action, convey messages and emotions, impact text legibility, and heaps more.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you build your WordPress website, you may feel like the default text colors don\u2019t really work for you so, naturally, you\u2019ll want to alter them. In this article, we\u2019ll show you how to change text color in WordPress using five different methods:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-qode-theme-options\">Changing Text Color in WordPress Using Qode Theme Options<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-classic-editor\">Changing Text Color in WordPress Using the Classic Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-gutenberg\">Changing Text Color in WordPress Using Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-elementor\">Changing Text Color in WordPress with Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-css\">Changing Text Color in WordPress Using CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-qode-theme-options\"><\/a>Changing Text Color in WordPress Using Qode Theme Options<\/h2>\n<p>[\/vc_column_text][vc_column_text]Even when you purchase a <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">WordPress theme<\/a> that suits all of your requirements, you may still want to tweak some of its elements to make them better fit the style you\u2019re trying to achieve.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some themes on the market allow you to control the visual aspect of your website and change text colors, usually by clicking on <em><strong>Appearance &gt; Customize<\/strong><\/em> and then selecting the typography-related options (which is where the font color settings are placed).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But Qode themes come with significantly more customization options letting you modify the colors of almost any section on your website. You can <strong>go to your theme\u2019s general options<\/strong> and change not only the text color but also the font size, weight, height, and more (the title of the core options section in the menu usually contains the name of the theme or the profile name + options, e.g. <em>Leitmotif Options, Mikado Options<\/em>, etc.).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For instance, if you\u2019ve <a href=\"https:\/\/qodeinteractive.com\/magazine\/things-to-do-after-installing-bridge\/\">installed Bridge<\/a>, you can go to <em><strong>Qode Options &gt; Fonts<\/strong><\/em> and tweak all the major typography-related global settings there.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-Options-Fonts.jpg\" class=\"attachment-full size-full\" alt=\"Qode Options Fonts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-Options-Fonts.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-Options-Fonts-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-Options-Fonts-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Depending on a theme, we also <strong>allow users to modify the text color in header and footer sections of their site, in titles, etc<\/strong>. All you have to do is select the section you\u2019d like to alter (from general options) and adjust the text color to your liking.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The quest of modifying colors on your WordPress website has been significantly facilitated with the launch of our new <a href=\"https:\/\/qodeinteractive.com\/magazine\/new-qode-interactive-framework\/\">Qode Interactive framework<\/a> that\u2019s raised the user experience to a whole new level. This mighty framework includes a variety of practical features that make the user\u2019s website building experience more comfortable, one of them being the <strong><em>Search<\/em><\/strong> option. As you navigate to the general options of your Qode theme that features the new framework, you\u2019ll notice the search bar at the top of the page. You can type in <em><strong>Colors<\/strong><\/em> and you\u2019ll see the list of all the sections where changing colors is possible.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-New-Framework.jpg\" class=\"attachment-full size-full\" alt=\"Qode New Framework\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-New-Framework.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-New-Framework-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Qode-New-Framework-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019re also no strangers to packing powerful shortcodes that allow users to create websites that entirely fit their requirements, and so, depending on a theme, we may include some shortcodes that feature textual content too, such as our <em><strong>Image with Text<\/strong><\/em> shortcode. It would only be fair to let our users customize the shortcodes too, and so we\u2019ve included the options that allow for the text color change.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-With-Text-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Image With Text Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-With-Text-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-With-Text-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-With-Text-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That\u2019s it for general theme options. Now let\u2019s see how to change text colors on individual pages. [\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-classic-editor\"><\/a>How to Change Text Color in WordPress Using the Classic Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]For anyone using the Classic Editor, changing text colors requires a few clicks. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For starters, go to the page that you wish to edit or create a new one and add the textual content. From the toolbar menu, click on the <em><strong>Toolbar Toggle<\/strong><\/em> icon to display the second row of options where the <em><strong>Text Color<\/strong><\/em> option is placed.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Toolbar-Toggle.jpg\" class=\"attachment-full size-full\" alt=\"Toolbar Toggle\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Toolbar-Toggle.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Toolbar-Toggle-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Toolbar-Toggle-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next up, highlight the parts of the text you wish to change the color of and click on the <em>Text Color<\/em> icon to play with the colors.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Colors.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Text Colors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Colors.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Colors-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Colors-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you have a specific color in mind that\u2019s not listed here, click on <em><strong>Custom\u2026<\/strong><\/em> and select a hue from the color pane or enter its hex code.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-gutenberg\"><\/a>How to Change Text Color in WordPress Using Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re working on a page or a post in Gutenberg and you wish to change the text color of the entire block, first up, click on the box containing the text. Now, take a look at the right-hand side of the screen and click on the <em><strong>Color Settings<\/strong><\/em> option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Color-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Color Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Color-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Color-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Color-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can modify not only the text color but also set the background color for the block the way you like it best.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In case you wish to alter the hue of just parts of the text and not of the whole block, <strong>highlight the text you wish to color differently, click on the downwards arrow, and choose <em>Text Color<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Text-Color.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Text-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Text-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A color palette will show up next and all you have to do now is select the hue that matches the style of your brand.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Custom-Color.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Custom Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Custom-Color.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Custom-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Custom-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>N.B. In Gutenberg, you can change text colors for both heading and paragraph blocks, but you cannot alter the background color for heading blocks.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-elementor\"><\/a>How to Change Text Color in WordPress with Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]When you wish to edit your text in Elementor, you can use the <em><strong>Text Editor<\/strong><\/em> widget that\u2019s similar to the WordPress\u2019 Classic Editor. All the options are listed on the left-hand side of the screen, but we\u2019re interested in <strong><em>Text Color<\/em><\/strong>. Highlight the part of the text that you wish to paint in another hue and choose the color to your liking.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Color.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Classic-Editor-Text-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Elementor also comes with the practical <em><strong>Edit Section<\/strong><\/em> option that\u2019s displayed above the widget you\u2019ve added to the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Edit-Section.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Edit Section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Edit-Section.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Edit-Section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Edit-Section-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Click on it and from the menu on the left select <em><strong>Style<\/strong><\/em> option and then click on <em><strong>Typography<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Style-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Style Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Style-Typography.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Style-Typography-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Style-Typography-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Besides altering the text color, you can also set the text alignment, heading color, link color, and more.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-css\"><\/a>How to Change Text Color in WordPress Using CSS<\/h2>\n<p>[\/vc_column_text][vc_column_text]Last but not least, we\u2019d like to show you how to <strong>change font colors in WordPress globally using CSS<\/strong>. If the options of the theme you chose do not suffice, this is what you can do to make some adjustments regarding the text color.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]From your dashboard menu, select <em><strong>Appearance &gt; Customize<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Appearance-Customize.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Multiple options will appear on the left side of the screen, but you should click on <strong>Additional CSS<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Customize-Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Customize Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Customize-Additional-CSS.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Customize-Additional-CSS-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Customize-Additional-CSS-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A CSS box will now appear, to which you should paste the following lines of code:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">h1 { \r\ncolor: #some_hex_code; \r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you can change the color of any heading you like, be it h2, h3, etc. depending on what headings you have on your site. For example, we wanted to color our h1 in red, and so we added the following code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">h1 { \r\ncolor: #cc0a0a;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code is enough to change the text color in headings, but if you wish to modify the color of other text elements, use different selectors, e.g.<em> \u201ca\u201d<\/em> for links,<em> \u201cp\u201d<\/em> for paragraphs, etc.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">p { \r\ncolor: #cc0a0a;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap This Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Creating an attractive website is significantly easier when you know how to change text colors in WordPress. With this tutorial, we wanted to show you how to modify text hues globally and on single pages using all the popular editors and page builders, and the method you\u2019ll decide to go with is up to your preference and perhaps skills. After all, not everyone knows how to use CSS, but with the right WordPress theme that packs a plethora of customization options, you don\u2019t even need to know how to code.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Colors are powerful elements that impact the look and the feel of a website, and we\u2019ll show you how to change text color in WordPress with five popular methods<\/p>\n","protected":false},"author":4,"featured_media":12041,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,20,15,16,13],"class_list":["post-11988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-css","tag-plugins","tag-themes","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=11988"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11988\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/12041"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=11988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=11988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=11988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}