In this video, we’ll show you 3 simple ways that you can customize your links on your WordPress site.
We’ll show you how to change the color, add an underline, and highlight your links – all these things will make it easier for people to see our links and encourage them to click your call-to-action!
0:00 Intro
0:49 Method #1 Customize your links using the Block Editor
4:07 Method #2 Customize your links directly in your Theme
7:00 Method #3 Customize your links with a code snippet
Related Links
►Don’t forget to subscribe to the channel and always stay ahead! https://www.youtube.com/user/wpbeginner?sub_confirmation=1
►WPCode https://wordpress.org/plugins/insert-headers-and-footers/
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
One of the biggest goals a webmaster or Website owner has is to get users to Click on stuff whether it be links in The search results links on the website To affiliate products links to other Content on their website so that they Can read more content clicks on ads Click on even subscription boxes or Clicks on products so that they can Purchase products all of these are click Based events and that's one of the Reasons the biggest websites in the World like Amazon Walmart e-commerce Website affiliate websites or just Publications all have clickable events Which they highlight on their site so That you as a user can click and make More money for them and in this video I'm going to show you exactly how to Replicate that process how to highlight The links on your site make them Clickable make them stand out on your Website so that you can entice your Users to click on those links and you Making more money let's begin All right so I'm going to be discussing A few different ways how you can Highlight the links on your website Depending on what you're trying to Achieve with those links any of these Methods can be applicable to you so I Would highly encourage you watch the Video till the end because you want to Learn some seriously good stuff let's
Start with the method number one which Is the easiest and is applicable for Unique links that you want to highlight On your website so I have on my website A simple post created content test and I've added this link let's add a link From this page and this part which you Can notice is the actual link now Obviously you want to highlight this Link and this is the default color the Current color of this link is the Default color which is blue with an Underline how do you change that well You might not have noticed that the Block editor in WordPress now has a Feature where you can change the color Of your links directly just click on the Block itself and make sure that the Block settings are visible in this case This is a paragraph block and you'll see These color options appear you can Change the color of the text the Background and the link so in this case We're going to just be messing with the Link so I click the link option here you Have two options if you're website or if Your theme supports Global colors you'll See the theme based colors yes or you Can use any of the default colors you Can set this to any color you like for Example I like this green color a lot so I'll just click on it and instantly see The link is now changed color now Important thing to realize is that this
Will change only this link color and if You duplicate the block it will also Change the color of the duplicated block For example if I click here and I just Press Ctrl shift d or command shift d on A Mac it'll duplicate this block and It'll also duplicate the settings here But if I create a new block and I add a Paragraph and I just type in another one Like this And I add a new link here let me just Add a link quickly Wbeginner.com this will be the original Link so if I just update the post and Let me just open up the poster new tab It's already open Let me refresh the Post And you notice that now there are three Links on the page and the first two are Actually in a different color and the Third one is a different color or this Is the default color and then the easy Way to highlight links on landing pages Or one-off Pages or if you have one of Links you're running a special promotion On your website you want to highlight Just a couple of links it's an easy way To highlight those links on your site And you have other controls here as well So if you have let's say you didn't have The surrounding text you just had the Link you can also change the size and Make some other changes here as well for Example if I click this option here I
Can specify the size of this specific Block in pixels so if I had just had the Link or for let's let's example I was Just customizing this one I can go to The link color here I can change it to Let's say uh light green this one and I Can go back here and I can go to this Option and I can just drag this and make It bigger or smaller and let me update The post once again I'll go back to the Page I'll refresh it And now you see this is a highlighted Link specifically so you can just use This in creative ways to highlight links On your site it's very easy but remember This does not translate to the entirety Of your website just on the specific Link that you have customized and I'd Say that's a good thing because if you Just want to highlight a couple of links On your site couple of important links a Couple of let's say uh important events You're doing you can use this technique Or you can use this feature not a Technique to Simply highlight the link On your website this is Method number One let's talk about method number two So let's talk about the second method to Change the color of links on your Website and this method is going to be Using your theme or seeing if your team Actually supports changing colors of Links directly from the themes options In this case I'm using the Astra theme
Which supports the customizer if you're Using a Blog based theme then the Interface and the way to do this will be Quite different since blog based teams Haven't picked up as much or they are Not uh let's say the majority of the Market are not covering that specific Area but if you're using a Blog based Teams let me in the comments and we Might just plan a dedicated video on how To make any kind of changes cosmetic Changes on your website using the editor In WordPress right now I'm using the Azure theme which is not blog based it's Just a regular theme in WordPress and That's why I'm using the customizer to Make changes and inside the Astra teams For your team it might be different you Might have a theme options panel so make Sure to check out the theme settings in The Azure theme I know it's going to be Inside the customizer and I can go to The global options here and inside Global I have the colors options where I Can make changes to the colors of my Site so I have a theme color which is or Not the theme color I have a team accent Color the color of the links which we'll Be customizing we also have colors of Headings body text and borders and of Course we want to be changing the colors Of the links and the two colors here Which means there we can change the link Color or normally and also the power
Color of the link so this is the link Color you might just notice I'll just go Uh pay attention to the screen here if I Hover over the link the color does not Change but if you change these colors Then that will change as well so let's Click on this and then now we can start Changing or customizing the link color Let me just change the u a bit I'll just Make this a little bit green and I'll Also change the same color or I'll just Pick the same color copy it from here Paste it here and I'm going to just make A little change I'm going to make the Shade a little darker however and Sometimes this might also happen to you That you're seeing changes right here But the actual changes have been applied But sometimes you need to save your Changes in the customizer and refresh it And then the actual changes appear for Example you don't see the changes here But you already have made the changes Here so what you do is just publish this And just go to the actual post which is Here I'll just refresh it And now you see all the links are now Different colored or exactly the color That we used here and if I even hover Over this you'll notice that it turns to A dark green shade which is what we said In the customizer but this brings us to Another problem even if a theme supports Changing the links of colors you might
Not have wanted to change all the links You might not have wanted to have these Links changed these links changed or Else these links as well because then All the links on your website are the Same color you wanted to highlight a Specific set of links just to make sure That they stand out how do you actually Achieve that well it is possible with Method number three so if you don't want To use this method or the first method Isn't applicable to you let's watch and Let's learn about method number three on How to customize the links on your Website let's begin All right so I've added a piece of code Here and you might not understand what This code snippet is let me explain what It is and I promise everything will Start making sense it's very simple so If we go to the Post first if I select The properties of this link you'll Notice something here this link is this Piece of code which is represented by an A tag the a tag here and that's exactly What I'm targeting in this CSS I'm just Telling CSS or using CSS I'm telling Website Hey whenever you find an a tag Which means a link just change its color To this hex code it's a shade of green It's a hex code changes color or change The link to this color of green and the Color is not showing up here right now Because the code snippet is disabled if
I enable it it'll work so this is the Basic logic of how we are going to use CSS we're going to attach or we're gonna Say hey change the properties of this Link in this case the color to anything That I like so let me enable this Refresh the final post and I'll explain What else can you do with CSS which Makes it very flexible and Powerful so We'll enable this we'll update the post Or update the code snippet it's updated Now let's go to the Post here I'll close This part I'll refresh the page now you See all the links on the site are now Green color which is the color I picked Absolutely beautiful easy right but There are a couple of problems that we Also see first of all again the same Problem all the links are now changed to Same green color and what difference Does it make if I can make only this Change I want to customize or highlight My links in a special way the two things That we're going to fix first how to Make sure only the links inside the body Of the post are change and second how Can we make links stand out even more I'm going to start with problem number Two first and how we're going to do it Is by adding some more properties here Right here so just as I change the color We can change other properties of links As well using CSS so let me just copy And paste to code snippet that I've
Already written down I'm going paste it Here and explain what that code snippet Does so let's just make let me just copy It for a second And I've copied it I'll just paste it Here and this is the code snippet and What this code snippet is saying that Hey inside the text decoration property Which is a fancy way of saying hey how's The text highlighted right in this case It's an underline what are the Properties the website should display Based on this so make sure that the text Or the link is underlined which is Already in line but I'm just specifying It use this specific color for the Unwrite use this as the type of Underline in this case it's a solid you Can also have a dotted and a wavy Underline with a couple of options Add the thickness of that link to this Percentage you can also when percentage Is more flexible and with this not only Are we changing the color of the links We are also specifying a specific kind Of underline thickness of an online and The color of the underline right here With CSS I hope now it's easy to Understand what we are doing right I'll Update this once again and I'll go to The Post once again I'll just refresh it And now you see everything is now Beautifully highlighted on the page and Everything or the thickness of the link
Is based on the actual element itself That's the beauty of using CSS now let's Fix the first problem which is that Every link on the page is now Highlighted so I'll go back here I'm Going to just make one change here which You can also follow along what I'm going To do is instead of just saying a I'm Going to say dot entry Hyphen content space a and what this Means is that instead of targeting all The links on the website or on the links On the page just Target the links that Are inside this area this is webs or WordPress's way of saying entry content So any links inside the entry content Will be affected so let's update the Post I'll refresh the page and now only the Links inside the content area are now Highlighted and it looks beautiful I'm Not a great designer but I still I can Or the links do stand out on the page But yuvraj there's one thing we are Missing when you displayed method number Two you're also able to change the hover Color of the links can we also change The hover color here absolutely it's Actually very easy what I'm going to do Is just copy the same code snippet paste It once more and make one small change Once again you can do the same thing I'm Just going to copy the entire code Snippet paste it here
And instead of just the a I'm going to Say a colon H-o-v-e-r however and now what this code Somewhere say hey when there's a normal Link just use this properties when you Hover over the link just change the Properties a little bit and what I'm Going to do is change the color both in This both cases so that we can actually See the difference so I'll pause the Video for a second find a different Color which actually suits the website And we're going to see a live demo once Again so I'll pause the video and be Back in a second All right so I've made the changes to The color codes here I've picked the Shade of blue just to give it a little Bit of contrast so that I can it's easy To understand and follow along I'm going To update the post once again I'm gonna Go here refresh the post and now once we Hover over the link now you see the Color is changing so it's easy to see How simple this code snippet is right It's just the same properties I've just Changed the properties for the hover and You can do the same thing if you want to Change the properties for a link that is Already visited on a regular website or Regular blog post if you click on a link And it's visited it changes to a shade Of purple that's the property you can Change right here and again you don't
Have to do something fancy just take This or take this entire code snippet Paste it once more and instead of hover Just change it to visited and make those Changes in this case I would let's say Change the Highlight to something Smaller and change the colors to Something else I'll pause the video for One second for a second change it to Some shades of purple just to give it a Similar feel and we'll back and I'll Show you the live demonstration All right so I've made changes to the Code snippet making it a shade of purple And just let us revise what we did where Did this piece of code snippet this is Representing the four properties of a Regular link this is representing the Properties of the hour properties that Means when we hover over link and this Is representing uh properties of the Link that we've already visited so I've Already saved and updated the post Tested it out and this was the regular Link this is what the code snippet we Did here if you hover it it's the shade Of blue but we visited or I already Tested it out if you visit the link it Turns to a shade of purple so that's how Easy it is to highlight the links and CSS it's not that scary right so this is How you can follow along the tutorial Add any kind of properties and make more Changes this is just a I said tip of the
Iceberg CSS allows you to make even more I'd say exciting changes to your Websites so if you're interested in Learning more CSS you can have tons of Resources available on the internet but You can use this tutorial to just make The specific changes that I showed you Just replace the color course based on The Branding of your website and you'll Have a beautiful looking website in no Time and and the best part about this Approach is that even if you build your Website or Pages using a page builder Then all these changes that you make Here will also reflect to all the pages Landing pages if you create an entire Theme using a page builder all those Links or all those changes will also Reflect to those pages as well so if You're using a hybrid strategy that you Have just a regular theme but you create Some of the pages with a page builder Like Ctrl all these changes will be Reflected to those pages as well so it's A very robust strategy and if you want To make any changes you just go to the Code Snippets you have this code snippet Here you can always edit this course but Without messing with your WordPress Theme files or forgetting to change your Theme and then losing all these changes All right so these were three exciting Ways to change and highlight the links On your website if you enjoyed this
Tutorial then make sure to leave a Thumbs up if you have questions leave a Comment otherwise you can subscribe and Watch a couple of videos I'll place on The screen you're watching if you asked From W beginner I'll catch you in the Next video take care
