5 Easy Ways to Change Link Color in WordPress

Whether they’re serving to with navigation or driving conversions, hyperlinks play an important operate on most trendy web pages. However, you would possibly actually really feel like your theme’s default URLs are falling temporary, which is why it’s your decision to change the hyperlink coloration in WordPress.

Fortunately, it is potential to change the hyperlink coloration in WordPress, using your different of editor decisions, plugins, or custom-made code. By making use of your private custom-made coloration(s), chances are you’ll make your hyperlinks stand out from the background – or combine seamlessly with the rest of your design.

In this submit, we’ll cowl 5 different methods to change the hyperlink coloration in WordPress. Regardless of whether or not or not you’re using an online web page builder plugin or the WordPress Customizer, you have to uncover a technique that works for you.

Easiest strategies to change hyperlink coloration in WordPress

If you want to learn the way to change the colors of your hyperlinks in WordPress, be taught this tutorial. Here are the methods we’ll be defending subsequent:

  1. Custom CSS code – in case you actually really feel comfortable together with some basic CSS code, that’s often in all probability probably the most versatile and extensively related approach.
  2. WordPress Customizer – there’s an excellent probability your theme may provide devoted decisions to change the hyperlink coloration.
  3. Elementor – the Elementor internet web page builder makes it easy to change hyperlink coloration sitewide.
  4. Beaver Builder – the Beaver Builder internet web page builder plugin and theme moreover embody decisions to change hyperlink coloration.
  5. WordPress editor (individual links) – in case you solely want to change the color of explicit hyperlinks, you’re able to do it manually by means of the WordPress editor.

1. Add CSS code

One technique to change the hyperlink coloration in WordPress is to write some custom-made CSS code. This requires you to enter the hex code for the color that you just really need to use in your site. You can uncover the various codes using a service such as color-hex:

Once you’ve found your glorious hex code, log into your WordPress dashboard. Then navigate to Appearance > Customize:

(*5*)

In the left-hand menu, select Additional CSS. You can now enter the subsequent CSS:

a {
     coloration: #0000FF;
}

Make constructive to trade the coloration: value with the hex code you acknowledged beforehand. To make your changes dwell, click on on on Publish:

The WordPress Customizer.

The coloration of the entire hyperlinks all through your site ought to now change. If you’re not happy with this new look, you will give you the option to always enter a particular hex code into the WordPress Customizer:

The Additional CSS settings.

At some stage, you would possibly change your ideas and resolve to restore your theme’s default hyperlink coloration. To get hold of this, merely delete your entire code in the Customizer’s Additional CSS half, after which click on on on Publish.

2. Check the WordPress Customizer

Depending in your chosen theme, you might need the flexibility to modify your hyperlinks in the WordPress Customizer. This means you gained’t have to write any CSS.

In your WordPress dashboard, navigate to Appearance > Customize and search for any decisions labeled Color. These settings can vary between themes.

For occasion, in case you’re using our private Hestia WordPress theme, select Appearance Settings > Colors. You can then customise your hyperlinks using the Accent Color settings:

The Hestia WordPress theme.

Alternatively, if in case you will have a selected hex code in ideas, you will give you the option to type this value into the accompanying textual content material self-discipline. When you’re joyful collectively along with your selection, click on on on Publish.

After experimenting with quite a few colors, you would possibly resolve that you just favor the defaults. If that’s the case, you will give you the option to restore Hestia’s distinctive accent coloration by clicking on the Default button.

Our Neve theme moreover makes it easy to customise your hyperlinks instantly in the WordPress Customizer. In the left-hand menu, select Colors & Background:

How to change the link color in WordPress, using the Hestia theme.

Then choose Primary Action. You can now make your selection from the color picker:

(*5*)

To make your changes dwell, click on on on Publish.

If you’ve got acquired a change of coronary coronary heart, you will give you the option to restore Neve’s defaults by scrolling to the underside of the Colors & Background menu. Then select Reset all to default.

3. Use the Elementor internet web page builder

With over 5 million energetic installs, Elementor is probably going one of many hottest WordPress internet web page builder plugins. If you’re using Elementor in your site, you will give you the option to change the hyperlink coloration by opening any internet web page or submit in the Elementor editor:

The Elementor WordPress page builder.

In the upper-left nook, select the Hamburger icon. Then click on on on Site Settings:

How to change the link color in WordPress, using Elementor.

Next, select Typography. In the next menu, you will give you the option to change the hyperlink’s coloration when it’s in its default, non-selected state. To make this variation, make certain that the Normal tab is chosen:

The Elementor Site Settings.

Next, click on on on each of the icons that accompany the Color settings. Left-to-right, these icons launch an inventory of your theme’s globally-defined colors, or the WordPress coloration picker:

Changing the link color in WordPress, using a page builder.

While you’re customizing your hyperlinks, you may also want to change quite a few typography attributes. This consists of the mannequin, letter spacing, and line peak. You might make these changes using the Typography popup:

How to change the link color in WordPress, using the Neve theme.

Elementor moreover offers you the selection to define a particular hover coloration. This can confirm that the shopper is effectively positioned over a selected hyperlink, which might be considerably useful for pages that operate numerous URLs. It could enhance your site’s accessibility for people who’ve vision-related impairments:

Changing the hover cover, using Elementor.

To make this variation, select the Hover tab in Elementor’s left-hand menu. You can then use the acquainted Color and Typography popups to create a singular hover affect.

When you’ve accomplished customizing your URLs, don’t neglect to click on on on the Update button. Elementor will now apply these changes to every hyperlink all through your total Elementor designs and templates.

4. Use the Beaver Builder plugin and theme

Beaver Builder is an intuitive drag-and-drop builder that’s utilized by nearly 4 hundred thousand web pages. If you’re using this widespread plugin plus the Beaver Builder Theme, then you definitely’ve acquired entry to a sequence of presets. To change the hyperlink coloration in WordPress, you’ll need to override these presets.

In your WordPress dashboard, navigate to Appearance > Themes. Then hover over the Beaver Builder Theme and select Customize. This launches the Beaver Builder editor:

The Beaver Builder page editor.

In the left-hand menu, navigate to General > Accent Color. You can now click on on on Accent Color and use the next picker to choose a model new coloration:

Changing the accent color, using Beaver Builder.

If you’ve got acquired a selected hex code in ideas, you will give you the option to type that value into the accompanying textual content material self-discipline. Similar to Elementor, Beaver Builder offers you the selection to define a particular coloration everytime you hover over a hyperlink:

Beaver Builder's accent settings.

After enhancing these presets, you will give you the option to substitute your site by clicking on Publish. Your hyperlinks will now have a totally new appear and feel! If you want to restore Beaver Builder’s defaults at any stage, merely navigate once more to this half and click on on on the Default button.

5. Change the color of explicit particular person hyperlinks in the WordPress editor

Up until this stage, your entire methods we’ve coated have modified the hyperlink coloration all through your full site. A continuing design is often necessary for presenting educated image. It may even help clients understand and navigate your site.

However, generally you may want to override these site-wide settings. For occasion, it’s your decision to draw consideration to a selected hyperlink on an online web page that choices numerous URLs. Alternatively, you would possibly try to catch the shopper’s consideration by making a landing internet web page that contrasts with the rest of your site’s design.

You can change the color of an individual hyperlink using the standard WordPress editor. To start, highlight the URL in question. In the floating toolbar that appears, select the downwards-pointing arrow:

The WordPress page and post editor.

Then choose Text Color. You can now each determine from the predefined colors or select Custom coloration. The latter launches WordPress’ built-in coloration picker:

How to change the color of an individual link.

You can repeat these steps to apply a singular coloration to another hyperlinks on this internet web page. When you’re happy with the outcomes, each substitute or publish the net web page as common.

Conclusion on how to change your WordPress hyperlink coloration

When it comes to creating a very good trying, professionally-designed site, the becoming WordPress theme is crucial. However, every site is unique, and even after discovering your glorious theme, it is best to nonetheless need to make some tweaks.

Let’s shortly recap 5 strategies to change the default hyperlink coloration in WordPress:

  1. Add CSS code.
  2. Check the WordPress Customizer.
  3. Use the Elementor internet web page builder.
  4. Use the Beaver Builder plugin and theme.
  5. Change the color of explicit particular person hyperlinks.

For some tips on the perfect colors to use, attempt our submit on choosing a coloration scheme in your site.

Do you’ve got acquired any questions on how to customise the WordPress hyperlink coloration? Let’s talk about them in the suggestions half beneath!

Free info

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple concepts.