{"id":46029,"date":"2021-11-08T16:25:21","date_gmt":"2021-11-08T14:25:21","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=46029"},"modified":"2022-10-21T12:52:03","modified_gmt":"2022-10-21T09:52:03","slug":"change-link-color-wordpress","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/change-link-color-wordpress\/","title":{"rendered":"5 Easy Ways to Change Link Color in WordPress"},"content":{"rendered":"\n

Whether they\u2019re helping with navigation<\/a> or driving conversions<\/a>, links play a crucial role on most modern websites. However, you may feel like your theme\u2019s default URLs are falling short, which is why you might want to change the link color in WordPress.<\/p>\n\n\n\n

Fortunately, it is possible to change the link color in WordPress, using your choice of editor options, plugins, or custom code. By applying your own custom color(s), you can make your links stand out from the background \u2013 or blend seamlessly with the rest of your design.<\/p>\n\n\n\n

In this post, we\u2019ll cover five different ways to change the link color in WordPress. Regardless of whether you\u2019re using a page builder plugin<\/a> or the WordPress Customizer<\/a>, you should find a technique that works for you.<\/p>\n\n\n\n\n\n\n\n

Easiest ways to change link color in WordPress<\/h2>\n\n\n\n

If you want to learn how to change the colors of your links in WordPress, read this tutorial. Here are the methods we’ll be covering next:<\/p>\n\n\n\n

  1. Custom CSS code<\/a> – if you feel comfortable adding some basic CSS code, this is often the most flexible and widely applicable method.<\/li>
  2. WordPress Customizer<\/a> – there’s a good chance your theme might offer dedicated options to change the link color.<\/li>
  3. Elementor<\/a> – the Elementor page builder makes it easy to change link color sitewide.<\/li>
  4. Beaver Builder<\/a> – the Beaver Builder page builder plugin and theme also include options to change link color.<\/li>
  5. WordPress editor (individual links)<\/a> – if you only want to change the color of specific links, you can do it manually via the WordPress editor.<\/li><\/ol>\n\n\n\n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tWant to change the #color of links in #WordPress? Try these 5 methods \ud83d\udd17 \ud83c\udfa8<\/a>\n\t\t \t<\/div>\n\t\t \t
    \n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n
    <\/div>\n\n\n\n

    1. Add CSS code<\/h2>\n\n\n\n

    One way to change the link color in WordPress is to write some custom CSS code<\/a>. This requires you to enter the hex code for the color that you want to use on your website. You can explore the various codes using a service such as color-hex<\/a>:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Once you\u2019ve found your perfect hex code, log into your WordPress dashboard. Then navigate to Appearance > Customize<\/em>:<\/p>\n\n\n

    \n
    \"How<\/figure><\/div>\n\n\n

    In the left-hand menu, select Additional CSS<\/em>. You can now enter the following CSS:<\/p>\n\n\n\n

    a {\n     color: #0000FF;\n}<\/code><\/pre>\n\n\n\n
    Make sure to replace the color:<\/em> value with the hex code you identified previously. To make your changes live, click on Publish<\/em>:<\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    The color of all the links across your site should now change. If you\u2019re not happy with this new look, you can always enter a different hex code into the WordPress Customizer: <\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    At some point, you may change your mind and decide to restore your theme\u2019s default link color. To achieve this, simply delete all of the code in the Customizer\u2019s Additional CSS<\/em> section, and then click on Publish<\/em>.<\/p>\n\n\n
    <\/div>\n\n\n\n
    2. Check the WordPress Customizer<\/h2>\n\n\n\n
    Depending on your chosen theme, you may be able to modify your links in the WordPress Customizer<\/a>. This means you won\u2019t have to write any CSS.<\/p>\n\n\n\n
    In your WordPress dashboard, navigate to Appearance > Customize<\/em> and search for any options labeled Color<\/em>. These settings can vary between themes.<\/p>\n\n\n\n
    For example, if you\u2019re using our own Hestia WordPress theme<\/a>, select Appearance Settings > Colors<\/em>. You can then customize your links using the Accent Color<\/em> settings:<\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    Alternatively, if you have a specific hex code in mind, you can type this value into the accompanying text field. When you\u2019re happy with your selection, click on Publish<\/em>. <\/p>\n\n\n\n
    After experimenting with various colors, you may decide that you prefer the defaults. If this is the case, you can restore Hestia\u2019s original accent color by clicking on the Default<\/em> button. <\/p>\n\n\n\n
    Our Neve theme<\/a> also makes it easy to customize your links directly in the WordPress Customizer. In the left-hand menu, select Colors & Background<\/em>:<\/p>\n\n\n
    \n
    \"How<\/figure><\/div>\n\n\n
    Then choose Primary Action<\/em>. You can now make your selection from the color picker:<\/p>\n\n\n
    \n
    \"Changing<\/figure><\/div>\n\n\n
    To make your changes live, click on Publish<\/em>.<\/p>\n\n\n\n
    If you have a change of heart, you can restore Neve\u2019s defaults by scrolling to the bottom of the Colors & Background<\/em> menu. Then select Reset all to default<\/em>. <\/p>\n\n\n
    <\/div>\n\n\n\n
    3. Use the Elementor page builder<\/h2>\n\n\n\n
    With over five million active installs, Elementor is one of the most popular WordPress page builder plugins. If you\u2019re using Elementor on your website<\/a>, you can change the link color by opening any page or post in the Elementor editor:<\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    In the upper-left corner, select the Hamburger<\/em> icon. Then click on Site Settings<\/em>:<\/p>\n\n\n
    \n
    \"How<\/figure><\/div>\n\n\n
    Next, select Typography<\/em>. In the subsequent menu, you can change the link\u2019s color when it\u2019s in its default, non-selected state. To make this change, ensure that the Normal <\/em>tab is selected:<\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    Next, click on either of the icons that accompany the Color<\/em> settings. Left-to-right, these icons launch a list of your theme\u2019s globally-defined colors, or the WordPress color picker:<\/p>\n\n\n
    \n
    \"Changing<\/figure><\/div>\n\n\n
    While you\u2019re customizing your links, you may also want to change various typography attributes<\/a>. This includes the style, letter spacing, and line height. You can make these changes using the Typography<\/em> popup:<\/p>\n\n\n
    \n
    \"How<\/figure><\/div>\n\n\n
    Elementor also gives you the option to define a different hover color. This can confirm that the visitor is successfully positioned over a specific link, which can be particularly useful for pages that feature multiple URLs. It may also boost your site\u2019s accessibility<\/a> for those who have vision-related impairments: <\/p>\n\n\n
    \n
    \"Changing<\/figure><\/div>\n\n\n
    To make this change, select the Hover<\/em> tab in Elementor\u2019s left-hand menu. You can then use the familiar Color<\/em> and Typography<\/em> popups to create a unique hover effect. <\/p>\n\n\n\n
    When you\u2019ve finished customizing your URLs, don\u2019t forget to click on the Update button. Elementor will now apply these changes to every link across all of your Elementor designs and templates.<\/p>\n\n\n
    <\/div>\n\n\n\n
    4. Use the Beaver Builder plugin and theme<\/h2>\n\n\n\n
    Beaver Builder is an intuitive drag-and-drop builder that\u2019s used by almost four hundred thousand websites. If you\u2019re using this popular plugin<\/a> plus the Beaver Builder Theme, then you have access to a series of presets. To change the link color in WordPress, you\u2019ll need to override those presets. <\/p>\n\n\n\n
    In your WordPress dashboard, navigate to Appearance > Themes<\/em>. Then hover over the Beaver Builder Theme and select Customize<\/em>. This launches the Beaver Builder editor:<\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    In the left-hand menu, navigate to General > Accent Color<\/em>. You can now click on Accent Color<\/em> and use the subsequent picker to choose a new color:<\/p>\n\n\n
    \n
    \"Changing<\/figure><\/div>\n\n\n
    If you have a specific hex code in mind, you can type that value into the accompanying text field. Similar to Elementor, Beaver Builder gives you the option to define a different color when you hover over a link:<\/p>\n\n\n
    \n
    \"Beaver<\/figure><\/div>\n\n\n
    After editing these presets, you can update your site by clicking on Publish<\/em>. Your links will now have an entirely new look and feel! If you want to restore Beaver Builder\u2019s defaults at any point, simply navigate back to this section and click on the Default<\/em> button.<\/p>\n\n\n
    <\/div>\n\n\n\n
    5. Change the color of individual links in the WordPress editor<\/h2>\n\n\n\n
    Up until this point, all of the methods we\u2019ve covered have changed the link color across your entire website. A consistent design is often essential for presenting a professional image. It can also help users understand and navigate your website.<\/p>\n\n\n\n
    However, occasionally you may need to override these site-wide settings. For example, you might want to draw attention to a specific link on a page that features multiple URLs. Alternatively, you may try to catch the visitor\u2019s attention by creating a landing page<\/a> that contrasts with the rest of your site\u2019s design. <\/p>\n\n\n\n
    You can change the color of an individual link using the standard WordPress editor. To start, highlight the URL in question. In the floating toolbar that appears, select the downwards-pointing arrow:<\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    Then choose Text Color<\/em>. You can now either pick from the predefined colors or select Custom color<\/em>. The latter launches WordPress\u2019 built-in color picker:<\/p>\n\n\n
    \n
    \"How<\/figure><\/div>\n\n\n
    You can repeat these steps to apply a unique color to any other links on this page. When you\u2019re happy with the results, either update or publish the page as normal.<\/p>\n\n\n
    Go to top<\/a><\/div>\n\n\n\n
    Conclusion on how to change your WordPress link color<\/h2>\n\n\n\n
    \n
    \n
    When it comes to creating a beautiful, professionally-designed website, the right WordPress theme is crucial. However, every site is unique, and even after finding your perfect theme, you may still need to make some tweaks. <\/p>\n<\/div>\n\n\n\n
    \n\t\t
    <\/div>\n\t\t\t
    \n\t\t    \t
    \n\t\t    \t\tWant to change the #color of links in #WordPress? Try these 5 methods \ud83d\udd17 \ud83c\udfa8<\/a>\n\t\t    \t<\/div>\n\t\t    \t
    \n\t\t    \tClick To Tweet \n\t\t    \t\t<\/span>\n\t\t    \t<\/a>\n\t\t    <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n
    Let\u2019s quickly recap five ways to change the default link color in WordPress:<\/p>\n\n\n\n
    1. Add CSS code.<\/li>
    2. Check the WordPress Customizer.<\/li>
    3. Use the Elementor page builder.<\/li>
    4. Use the Beaver Builder plugin and theme. <\/li>
    5. Change the color of individual links.<\/li><\/ol>\n\n\n\n
      For some tips on the best colors to use, check out our post on choosing a color scheme for your website<\/a>.<\/p>\n\n\n\n
      Do you have any questions about how to customize the WordPress link color? Let\u2019s talk about them in the comments section below!<\/em><\/strong><\/p>\n\n\n