Transcription
What’s up? It’s dave here from profitable Tools. Now if you’ve ever been on Instagram, you’ve undoubtedly seen the message to click the link in the bio. Often when you do, you’re taken to a page that is a literal laundry list of everything that person has ever done anywhere on the Internet. If you’d like a page like that for your own business, typically that means you’re going to sign up for a service like Linktree, which is a monthly cost.
But if you already have your own website, it sure would be nice to just add that page to your website and not have to pay the extra fee each month. In this video, I’m going to attempt to recreate the look and feel of Linktree using the examples they provide on their website of Gary V, Selena Gomez and Alicia Keys. Best of all, I’m going to make the template available for download at the end of the video. So let’s see how easy this is to do. Let’s go.
All right, so I am on the Link tree homepage. We’ve all seen websites like this. You’re on Instagram checking out your favorite influencer. You click on the link in the Bio and you’re taken to a page that looks something like this, where you got their photo up top. Then there’s a bunch of buttons followed by relevant social media icons at the bottom.
This is actually a decent way to do things so that you have one place to update with all of the most important links in your life. So if you’re appearing on lots of different properties all over the internet, you can have one place to update rather than having to go around to all of the different social media sites and constantly update them. But is there really a reason you couldn’t just do this with your existing website? Well, probably not, but maybe because as you see here, there’s lots of features built into this and it is very easy to use. Point of this video is to see if I can recreate the look of a Linktree profile using Tools in WordPress, in this case elementor.
So I’m going to look at some examples of people actually using linktree. So the one that stands out to me right away is Gary V because he’s obviously in the digital marketing landscape. That’s an area that appeals to me. But let’s check out a few of them here. Kind of get a feel for what a Link tree page looks like and then we’ll dig into trying to recreate things.
So here is Gary Vee’s link tree. You can see he’s got a solid background photo of Gary at the top, then his name. I can actually see that they are cropping this into a circle for him because if I try to move the photo, I grab it. You can see it’s actually a square. So that’ll be something to take a look at.
Then we’ve got all of these buttons here. These are just linking off to various podcast platforms where you can subscribe to Gary’s podcast. So you’ve got specific ones for itunes, Spotify, SoundCloud, and so on and so forth. Down at the bottom we have some more interesting features. So this is a link off to his texting app.
It’s my community. Not familiar with that service, but it’s a texting community. Nothing special about this link though. If I click it, it just opens up the service in a new window. Actually tries to grab my messages app here and I guess subscribe me.
So kind of interesting how they show Gary’s contact information as though you’re actually going to be able to just call him up and chat with Gary. That’s not the point of this video though. Back on target. Nothing else very interesting about the links here other than the bottom one. So we got a link to his wine brand, we’ve got a link to his YouTube channel.
And then this one right here is actually pretty cool. If I click on it, it turns into a submit form for basically subscribing to his newsletter. And I get a little GDPR bar at the top here saying that he’s going to contact me if I provide my email address. So overall, a pretty plain page here. Should be fairly easy to recreate inside of elementor, but we’ll see as we go.
This form definitely is going to be a little bit trickier. Social media icons down below, nothing special about those. There’s a little hover effect here. As I go over them, they get slightly bigger. There’s a hover effect for the buttons where they turn transparent with a nice outline and background to them.
Let’s check out Selena Gomez. I think her page is probably the most beautiful because they have this nice custom photography where there’s looks like some chairs with some red blankets over them. And then Selena is in a red dress that almost matches as we hover over the icons, it kind of reveals some of the dress. So definitely more of an artistic approach here, which you’d expect from a big pop star. Definitely going to have the funds to do something like custom photography.
If we check out her actual Instagram page, you’re going to see not only does she have 251,000,000 followers, but she’s actually putting linktree into practice. If I click this, it takes me right back to that same page. The same actually can’t be said for Gary. Just might I point this out? He is not using linktree on his Instagram page.
This probably gets swapped out several times per week, I would guess. I don’t really follow Gary that closely, but I would imagine that he is going to actually use this at some point or on other networks. Finally. Let’s look at Alicia. Her page is very simple.
I would say actually even more simple than Gary’s. It does have a beautiful gradient background here, but there’s nothing really special about that. It’s just a couple of colors blended together. Get a nice profile image up here, and then the buttons are nice and transparent with a hover effect. As I go over them, they turn to white.
What’s different here is there are no images in the buttons. If I compare this to Gary’s or Selena’s, they have images in their buttons. It gives you a little bit of a clue as to what you’re going to be clicking on. The T shirt goes to her Official Store where you can buy merch. So I imagine for her particular audience, that little image is probably going to get people to click a little more frequently than just seeing the words my Official Store Alicia’s page a lot more doable, a lot easier to replicate using Elementor.
All right, so we’re going to get started here. I just want to point out that I’m thirsty. Affiliatewp for Linktree. It’s only $6 a month to use this service, so what we’re about to do probably doesn’t make a lot of sense unless you already have a WordPress website. However, I’m not going to take that route.
I went ahead and I bought a domain name. I used the Link top level domain so you could say anything you want, like mylinks link. And you can buy this domain for like $5 a year. It looks like that one’s already taken, but if I search for another one here, you can see this one’s. $5 for the first year.
Over on namecheap. I am a Namecheap affiliate, so I’ll have a link in the description. If you want to grab yourself a domain name, again, I don’t necessarily recommend it unless you’re just very, very comfortable with WordPress or you’d like to use this domain name with perhaps another service that allows custom domains. I also spun up a brand new server because we got to start from somewhere. We’re going to build this site on something.
I’m using cloudways. Also a cloudways affiliate. Check the link below. Save yourself $10. This is the provider that I recommend everyone begin their WordPress journey on.
You can use this up until you get to about ten sites or so. At that point, I usually recommend checking out grid paying. That is actually who we use for our WordPress agency to host our client websites. So here I am. It’s a default WordPress, website.
It sure is ugly. I don’t know why WordPress has to look so terrible right out of the box. It definitely gives it a bad rep, but let’s go ahead and fix things up here. Now, I did do a couple of things ahead of time just to save some time. So over under plugins, you can see I added a few plugins, but really all you’re going to need to follow along right away is regular plain old Elementor that is totally free.
So just go add new, search for Elementor and click Install and activate. Let’s stop wasting time and add a new page. So I’m going to go to Pages, add New, and let’s edit this with Elementor. Wow, this sure is ugly. What are we going to do about this?
It doesn’t look anything like a Bio link page. So first things first. I could change this background color using a different theme or just going into the customizer and changing the background color. I’m not going to do that. It’s not the point of this video.
We’re trying to copy the Gary V. Selena Gomez style link tree page. So let’s do this in Elementor right now. First of all, I’m going to click on this gear icon in the lower left hand corner, and I’m going to change the title of my page to link in the Bio. There we go.
And I’m also going to change this page layout right here from Default to Elementor Canvas. Now, what this is going to do is not remove that background color, but you saw it did get rid of everything else, which was actually the header and the footer as ugly as they were. All right, so now I’m good there. I’m actually going to save these changes by clicking on the triangle and choosing Save Draft. Looking up at this tab, I can see it’s called Elementor 41.
If I reload the page, sure enough, it changes to link in the Bio. I am ready to begin working. Now, the first thing I need to do is add a section here. I’ll click the plus button, and we’ll add just a single column section. The column that I’m working in is actually at the very top of the page here.
A little unintuitive. Everything else beyond this is just wasted space. At this time, I’m going to change the background color. To start off, I’ll click on the six dots here. I can confirm I’m working on the edit section, because over here it says Edit section.
All right, now we’re going to go to Style and choose Background Type. Now, if I wanted to go for maybe the Alicia Keys look, what I want to do is find a couple of colors that look really good. I could use a chrome extension. I like one called ColorZilla. This is going to allow me to pick colors from the page so I could grab, say, at the top color up here.
Maybe we’ll go to the upper left hand corner. I’ll grab this one back over an elementor. I can choose my background type. The first one is classic. That’s going to be a solid color.
The second one is Gradient. Chose that for our top color. I’ll just paste in that code that ColorZilla copied for me, and then we’ll head back to Alicia’s page. I’ll use ColorZilla one more time here, and this time I’m going to go to the lower right hand corner of the page, and I will select a color down here that copied to my clipboard. Back over an elementor.
I’ll choose my second color right over here. Paste it in, and you can see I’ve got the right color selection. It’s not looking exactly right yet, but that’s because we have a very small space to see. Let’s head over to layout right here. We’ve got a few settings to change inside of the layout.
Now, obviously, we want this to be taller, so I’m going to go under height, and I’m going to change this to be fit to screen. All right, that’s looking a lot better. And if I compare that to Alicia’s page, it’s almost identical at this point. The next thing I’m concerned with is the width of this. So looking at all of these pages, they all look like they’re the exact same width on a desktop computer.
Now keep in mind that most people are not going to view these pages on their desktop. They’re going to be looking at Instagram on their phones, and it’s going to be a lot smaller. So we want to make sure that this has a good look on the desktop as well as the mobile phone and any device in between. So let’s figure out how wide we want the desktop look to be. I’m going to use the Inspector feature of Chrome.
All browsers can do this, so it doesn’t really matter what you’re using. I’ll right click and I’ll choose Inspect. And now I’ve got all of this gobligook code. It looks really intimidating, but don’t worry, it’s going to be simple. We just want to click on this icon right here.
It’s this little square with a mouse pointer in it. And if I click that now, I can hover over items, and it’s going to tell me things about them. So what I want to do is figure out how wide this section is. This little header section you can see is selected. It’s kind of got that orange look to it because of the the overlay.
It says it’s 680 pixels by 136 pixels. So 680 pixels wide, 136 pixels tall. That’s actually useful in both cases. I don’t really care so much about the height right now, but maybe I’ll want to jot that down for later. So what I do want to do is change my infrastructure over here on Elementor to make sure that I’m only working 680 pixels wide.
So, again, making sure that I’m editing this section and I’m still in the right place from when I changed the height. I’m going to go ahead and change the width here to be 680 pixels. So you can see my canvas shrunk up here. It’s now in the middle of the screen. I actually want this to be at the top.
So let’s change the column position to the top, and I’ve got a lot more narrow range to work with. That’s exactly what I want. Now, if I wanted more of Selena’s look with a nice background image, of course I’d have to find a suitable background image. I think one of the reasons this works so well is because it has such a monochrome appeal to it, a monochrome look to it with all of the red. It just makes it a lot easier to look at the content on the page rather than just having an image with a lot of different colors, which is going to pull your eyes all sorts of different directions.
So I recommend kind of taking a page out of this book and not having too crazy of a background image if you choose to go this route. But if you do want to have a background image, what do we do about it? Well, I’m over here on envato elements. I am a paying subscriber to the site I find it invaluable for circumstances such as these. So I’m going to look for a background image.
I’m going to go ahead and search for poker. I’ve been learning a lot about poker lately. I really like playing poker. So let’s go ahead and find a background image that I could go ahead and use. If you haven’t heard of this website before, it’s basically a supply of endless amounts of stock videos, stock photography, stock illustrations.
They’ve got music, fonts, even WordPress plugins. I’ve been a subscriber here for several years. Find it really, really valuable. I’m going to go ahead and find an image that would work well for a background image for my Links page. I kind of like this one.
It’s got the computer keyboard in the background, the poker hand. The ace is full there. Let’s go ahead and download this and we’ll use it on the website. Okay, so back over an elementor. I’m going to get rid of this lovely gradient going back into the style section here.
And instead of having a gradient, I’m going to go back to Classic where I can actually choose an image. So I’m just going to go ahead and click here where it says Choose Image and I will drop my poker image in here. Now this is going to be quite large because it’s the original file from Envato. I highly recommend changing it to the correct size before uploading. However, I didn’t do that here.
All right, there we go. We can see it’s. 1700 pixels. I’m going to go ahead and insert that media. All right.
Now this is really, really bright. It’s obviously also very stretched out. So we’re going to go ahead and modify things to make it look just a little bit better. The first thing I’m going to do is add what’s called a background overlay. So I’m going to go down to this section here and where it says background overlay, I’m going to choose a color and let’s just make this kind of a black color.
You can see that looks pretty good already. And if I click away, I can change the opacity so I can make this darker or lighter. So I’m going to make it not too dark of an overlay because I’m going to have buttons here. I think that looks pretty good. Now I can change the location of this photo.
You can see it’s kind of right in the middle right now, so I can actually move it to the right position. Maybe I want to see a little bit more of the bottom of the image where I can see a little of the green felt. So I’m going to go ahead and choose the position has bottom, center. There we go. Now I’ve got the poker hand.
I think that’s looking pretty good. Now the only thing I don’t really like here is I’m zoomed in so far and I know this image is really large. So again, the best thing to do is just to size it appropriately before you upload it. But assuming you don’t do that, because most people don’t, what can we do to make this work? Well, we’ve got some size options down here and I can see right now I’m on the default option.
I can go to custom here and I can start to slowly change the width. Now you can see that the image is actually only so wide. It was kind of more of a landscape image. So as I move out, I’m getting lots and lots of repeats of the image. It starts to look kind of like MySpace from about 2003.
So I’m going to go ahead and just make this the viewable width of 100%. There we go. Now I changed the position to center, center. Now I’m seeing some chips, the keyboard, the bottom of the cards. I think that looks pretty good.
All right, next up we can see that every one of these pages starts exactly the same with a photo of the person in question. And it’s always in a circle and there’s a background color for the photo. Now what I recommend doing here is just adding the background color inside of whatever image editing application you’re used to using. You don’t have to turn it into a circle though because as you can see, all of these are actually squares. And we’ll show you how to do that here inside of elementor.
So I’m going to click the hamburger icon here, which actually brings me back into my blocks. And then I can go over to the image block and drop it in. It’s a very, very large image here. And I’m going to upload a photo of myself. I’ll click Choose Image and then under upload files.
I can either browse for the file or if I know where it is on my desktop, I can just drag it in. All right, let’s insert this image here. You can see this looks quite a bit like the Gary V image. That’s what I was going for there. Now it’s obviously way too large.
So what I want to do is go ahead and resize this now when you upload an image to WordPress, it’s automatically going to resize the image for you into several different sizes. Right now it’s set to large. I don’t really need it any bigger than this 150 by 150 thumbnail. So I choose that it automatically gets a lot closer to what I want to see. It’s actually still a little bit big.
If you remember the entire top section when we went to the inspector here, the entire top section is only 136 pixels. And if I select the image here for Gary V, it’s actually 96 pixels. So let’s shrink this up even a little bit more. I’m going to go under style again, still editing the image. And for max width, I’m going to set this to be pixels and enter 96.
All right, now I’ve got the right size image. So the next thing we need to do is obviously make this a circle, right? So let’s go ahead and under border radius. I’m going to change this to a 45 pixel border radius around everything. And then all of a sudden my image becomes a circle.
Now if these lines are bothering you, like right now, I can’t really see the top of my image. I can always click this little icon right over here. It’s going to hide all of the formatting on the page. And now I can just see my background with my profile image up there. Back over on Gary Vee’s page, I can see there’s about a twelve pixel margin on the top.
And then there’s also a little margin or a little padding here of 24 pixels above. So we’re looking at 36 pixels before we actually get to his photo here. So let’s go ahead and fix this up over an elementor. I will select the section, go over to Advanced, and then what I want to do is change the padding here. So I’m going to decouple all of the sections together so I can edit them individually.
I’ll just add a 36 pixel top margin for now. That bumps everything down. That way I’m not touching the top of the page. It looks a lot better. Now the next thing everybody is doing here is just adding their name or their instagram handle.
Let’s go ahead and do that over an elementor for this. We can do it a couple of different ways. We could either use the heading element or we can use the text editor. I’m going to choose the heading element in this case. I think it’s most fitting.
Again, the really ugly default font is way too big in our circumstance here. But I don’t know why it needs to be blue. Let’s go ahead and click right here and change it to my name. I can center this up here under alignment and then let’s go over to style and make this look a little bit better. So I’m going to change the text color right now.
It is set to this blue color. Let’s make it more of a black color. So that looks pretty good, although in my opinion, it is still a little bit hard to read. So what I’m going to do is go back into my section here, and I can go ahead and go down to to the background overlay, and I’ll just decrease the opacity here. That’ll bring out a little bit more of the brightness of the keyboard and add some more contrast between our black and our white.
This is, again, why Selena’s all red background is so effective, because you really don’t have to fight with a lot of different colors compared to this image. Where we’ve got white here, it’s going to be dark down at the bottom. There’s some blue over here. The type is not going to work on every single color. So I don’t really like my background image here.
Maybe I’ll just switch over to Gary V’s color to do that. Once again, I’m going to go back over to Gary V and I’m going to grab color Zillow for my Chrome extensions. I’ll pick the color on this page that’s now copied to my clipboard. Heading back to Elementor, I’m going to remove my background image. Just click the little trash can right here and let’s change this color to the dark gray paste in the hex code.
And there we go. So Gary’s using some white type here. I think I’ll match that. And obviously, my typeface is way too big. Let’s see what Gary is using.
Time for another chrome extension. This one’s called What Font? It’s also free. I can go ahead and hover right over Gary’s name here, and I can see he’s using a font called Carla, and it is 16 pixels tall. Back in elementor.
I’m going to go ahead and edit the heading. I’m going to change the typography here to 16 pixels. Can check if they have the Carla font. I kind of doubt they do. Oh, that’s a Google Font.
So we do have the exact same font available to us in Elementor. So that’s pretty great. All right, we’re looking pretty good here. Let’s go ahead and check what the next step is going to be. It’s going to be these buttons, right?
All of the different links. Now, recreating these buttons from Alicia is going to be fairly simple. To capture the look of Selena or Gary V is going to require a different approach. So let’s start with Alicia’s buttons. This is going to be your standard elementor button.
I’ll click on the hamburger icon, go back to my elements here, and just find the button option right here. I can just drag and drop it down below, and you can see I’ve got a button right here. It’s off to the left. I’ve got a bunch of blank space. It’s ugly and green.
Let’s have it match Alicia’s look a little bit more. I’m going to click on the corner to make sure. I’m editing the button. I’m going to change the alignment to justify that’s. Going to make the button go full width.
You can see Alicia’s buttons here are transparent, and then they have a white outline. When I hover over them, the text changes color, and the button fills in with white. Let’s try to get that look. So let’s go over to style and under color, I can see that green color. I don’t want that.
I want it to be transparent. This second slider down at the bottom is going to allow me to change the button to be transparent in color. Now, if I click away, I’m going to actually close this window. We can see. Now I don’t really have a button anymore.
I just have some plain text. We need to add that outline back in. So that’s called a border. Under border type, I’ll choose solid. I can modify the width.
I think probably two pixels. Looks pretty close. Or maybe even one was what Alicia was using. Yeah, that looks like one pixel. And then when we hover, we want it to change to be a solid white color.
So I’ve got the options here for hovering. I’m going to choose that. And under color, I’m going to choose white. Now, if I hover, sure enough, it turns to white. But my problem is that my text also disappears.
So still, under hover, I can change the text color to be something else. Maybe in this case, I’ll have it match this red color in my photo. Again, this is a perfect opportunity to grab the free color zillow. I’m going to pick the color from the page. Grab that, and my hover color for text is going to be pasted in.
Now it’s that red color. Click away as I hover. Sure enough. Now it says click here in red. All right, that looks pretty good.
There is one little problem. When I hover, the outline is also turning red. Let’s get rid of that. So that’s being inherited here under the border color. So I’m actually going to change the border color to be white.
Check our changes here. Yeah, that looks a lot better. Now, there is a very slight radius on these buttons by default, in elementor, I don’t quite like that. Let’s go into border radius here and just set that to zero. All right, now I can see I have some squared off corners that’s going to match the look of something like Gary’s Page a little bit more.
So we’re looking pretty close. However, my buttons are a little bit short. They’re not quite as tall as the other buttons. Let’s go ahead and grab the inspector here again and figure out how tall the buttons need to be. Okay, so these buttons are 56 pixels tall.
Let’s try to match that back over. In elementor, I’m going to click on the button just to make sure I’m editing the right section. I’m over in. The style category here. And what we need to do is add some padding.
Now I can kind of just blindly add in some numbers here. I’m going to unlink the values and let’s add say like 20 pixels to the top as well as 20 pixels to the bottom. And let’s compare that. That looks pretty good. Let’s compare that over to Leashes page.
Just eyeballing it. I think that looks almost right on. So back over to elementor. The way we could actually check to make sure is to inspect this page. Now I can’t really do this inside of the builder because if I right click, I get the navigator.
And besides, let’s just go ahead and look at what this looks like on a live page. I’m going to go ahead and save this draft. Then we can click the little preview changes button here. All right. So we got a problem.
The image is obviously way too large. We’ll fix that. But first, let’s stay on task. Let’s go ahead and inspect the button size. I’m going to go to the little selector here and we can see that this is 57 pixels.
Now memory serves me correct. I believe the buttons on the other pages were 56. Let’s double check that. Yeah, sure enough. 56 pixels for these.
So we’re one pixel off. You know what, that’s actually close enough for me. I could make it be a little bit tighter by just getting rid of one pixel of padding. But now we have another problem, right? Because we’ve got the image here, it’s obviously not taking the styling from Elementor.
So we have an issue. Now, this kind of thing happens from time to time with Elementor, especially when you’re using the default theme. That comes with WordPress which I used. Now I think the fastest solution to this is just to switch out the theme and see if that fixes things. So I’m going to go to the dashboard here and I’m going to go to appearance and themes.
And let’s go ahead and just add a new theme. You got a couple of options here for good ones. Obviously, astra is one of the first things to be recommended. I think that is a solid choice. But in the case of the circumstance here, I’m using Elementor.
I don’t have anything else going on. So I’m just going to go ahead and install and activate Elementor hello, Elementor’s theme. And this is a really, really minimalist blank theme. There’s going to be no style conflict. So I can be sure if I go back to this page now.
And I’m running the hello elementor theme view the page. And sure enough, it did take into account my image. Now it looks like my radius is gone. Let’s go ahead and make sure that that is still in there. All right, it’s here.
So let’s go ahead and check this style radius is here. It’s update. I just published the page. There couldn’t view it. All right there.
Now everything is working okay. So the theme is going to be a large part of the issues that you run into with Elementor. I like just basically a few different themes on WordPress, out of the thousands to choose from. Hello. Elementor is great if you are Elementor centric.
It’s kind of the path I’ve moved towards with sites lately that I’ve built. Astra is a classic theme that is used for millions and millions of sites. It loads very quickly. It’s reliable. I like it a lot.
It’s free. And then the other one I might consider if I’m doing something a little bit more gutenberg centric. So away from Elementor is probably going to be generate press at this point. All right, so back inside of our builds here. Now the process we want to take is make sure that we get the style right for this button and then we can just duplicate it so we don’t have to do this over and over again.
Let’s go ahead and actually add in a link here. I haven’t done that yet. So I’m choosing the little pencil icon over in the right hand corner here. And let’s give this a name, a proper name here. Rather than just click here, I’ll say subscribe to Profitable Tools on YouTube.
Now if I don’t need an icon or an image here, I’m pretty much good to go if I want to add an icon, that’s fairly easy to do in this version of Elementor as well. I’m using the free version still. I can simply go over to icon here and then I can choose one from their icon library. I’ll look for YouTube. I like this one right here.
We’ll insert it and you can see it shows up over here to the left. It’s white by default and when I hover, it turns red to match the color of the type. It actually works quite well since YouTube’s logo is red. But the problem with the icon is obviously that it’s way too small and it’s right on the corner of the button. So let’s try to fix this up.
Now, we don’t have a lot of options for how to do this with this particular method of just adding buttons, but let’s try our best. So we can go under style here. There’s no option to just change the size of the icon, which would be nice, but we can actually change our typography size, which is going to change the size of the button as well. So you want to find a nice blend here of something that makes sense for your button size as well as the icon size. Now the other thing that is the issue is that it’s so close to the corner of the button.
So let’s add a little bit of padding here. I can go in and let’s add, let’s say five pixels to the left and that moves everything over and it looks a little better. I really don’t think it looks that good. To be honest, though, I probably wouldn’t use this method. If you compare it to Gary Vee’s, where he’s actually got a photo of his maybe I don’t like this either.
He’s got a photo of his YouTube channel there. It’s not very clear to me that it’s YouTube. I’d like something more representative of YouTube, but there is the icon down here. Anyway, I’m not a big fan of using these Elementor icons to try to replicate this look. I just don’t think it looks that good.
I probably just turn it off. So I’m going to show you a method to get some images into your buttons. It’s going to involve purchasing Elementor Pro, so it’s not going to be free. But if I have the style of button I liked here, I didn’t really care about images. I could simply just go in here, right click Duplicate, or you can use a key command, command D, or control D, and just add as many buttons as you like and you’ll be good to go.
Now, of course, we want to add some social images down below. But first, why don’t I show you how you can add more of a Gary V or Selena Gomez style button? So everything in the video thus far has been free aside from paying for your domain name and WordPress hosting. Or maybe if you grabbed a stock photo, that might cost you some money. But basically we’re looking at $0.
Next, I’m going to show you a Pro feature. So we’re looking at elementor pro here. You can get this for as little as $49 a year. I will have a link in the description if you want to pick it up through my affiliate link. It supports the channel.
What I’m going to show you is fairly simple, but it’s going to involve a lot more work than just using something like linktree. So again, I only recommend going this route. If you’re already in WordPress land, you have other uses for Elementor. You’re going to build your entire website out with it. So I’ve already got Elementor Pro installed here.
Let’s go about recreating the kind of Selena Gomez Gary Vaynerchuk style buttons inside of Elementor using one of their pro widgets. Now I’m going to clean this up over here. I’m going to delete these. I’m going to keep one of them so we have it kind of for reference, but we don’t need all of these buttons here. Now let’s get started building a button that looks a little bit more like Gary V.
I’m going to go down here and choose the Call to Action widget, and I’ll just drop that underneath. Now, this looks nothing like this, but by the end of this, it’ll look pretty similar. So the first thing we need to do is move the image over to the left hand side, right? Because that’s where it is on the link tree widgets. So let’s go ahead and add an image in here so we have something to work with.
Went ahead and uploaded my Profitable Tools logo. I’m going to go ahead and grab that. I did size it appropriately to about 54 pixels. I recommend doing that if possible, but if not, you can always customize it. Here.
I recommend choosing the thumbnail. It’s the next closest dimensions. But here I can actually choose full because it’s the right size. And now I’m going to go into the content section. And this is kind of where the key part happens to make this work.
So we need to get rid of the title. We can’t have a title and we can’t have any button text if we want to have it be the appropriate design. Of course you can add it in and make it look like whatever you want. But essentially this is our call to action. We can style this text later on.
Don’t worry about that. A nice little bonus feature here is we can actually have a ribbon. So maybe you have a sale ends Friday. You can have some text show up over here. That’s probably too much.
But sale, you can have a little call to action or a little identifying trait. We can move that over to the other side if you prefer. For now, we’ll leave that off. Just want to mention that it is there at no extra cost to you in terms of adding it in. All right, next we’re going to move over to the style section here.
And this is where it’s going to start to take shape. So what we need to do is actually get rid of the padding here. So we’ve got a lot of padding going on on the top and bottom. It didn’t look like that change anything, but it will as soon as we add the right image height and width in. So remember, this is like 54 pixels.
I’m going to do that. 54 pixels on the top, 54 pixels on the bottom. All right. Now we are looking a lot more like a button. Now one issue I see is that there is not really a color match up here, right?
I’ve got a transparent background on my image. It’s really, really close to the edge. I’ve still got a little hover effect here I don’t really want. And then it’s white here. So let’s go ahead and get rid of that white background and go into the content section and change the background color to be transparent.
There we go. I’m going to want to change the description color, which is going to be the type color to be white. And that’s looking pretty good. If I wanted to change the typography, there’s an option for that as well. There.
I just made the weight 600. It looks a little bit more like a button. Next, let’s get rid of this little hover effect. It’s nice but I don’t really want it. So under hover effects, you guessed it.
We can just go ahead and choose none. And now when I hover, it looks a lot better. Let’s go and preview this. Getting rid of this. All right, so we just are missing our outline here.
Everything else is looking pretty good. We also don’t have a hover effect. We’ll need to add that in as well. We’re going to head over to the advanced section, and we’ll go down to border here. We’ll add in a solid border with one pixel width and a white color.
Go ahead and check this out. All right, now we’re getting close. Now, if I wanted to have this Lina Gomez look here, I’d want to have a more rounded border and obviously a solid white background. So what we would do there is go ahead and change the border radius to, say, probably about 15. That might even be a little much.
I’ll make it ten. All right. That’s looking a little bit more like Selena. I don’t really like that for this. Since we’ve already kind of built out the Gary V look, I’m going to leave it squared it off.
Now the next thing I want to do is probably just move this image over a little bit because it’s too close for comfort to me to the side of the button. So I’m going to go up to the top here and under padding. I’m just going to add a couple of pixels in here on the left. That looks pretty good. I’m actually even going to mess with the top and bottom padding.
I think I like it how it is. So really just two things left to do here. We need to make this thing a button, because right now I can’t click on Niches, and also, I don’t have the hover effects that I want, so let’s go ahead and get those set up. So back over under the advanced section, we’re going to go down to background and under hover. I’m going to make this white.
So I will choose hover, background type, classic color, white, and hovering. Sure enough, we’ve got white. Now it looks like there’s a kind of grayed out background there. Let’s see if that shows up. Yeah, sure enough, it does.
That’s not good news. The other problem we have is that our text here is disappearing. Let’s go ahead and fix those issues. First of all, fixing the text is going to be very easy. Back under style, I can go to content.
And under hover, my description color is going to be that reddish color that we grabbed before. Coloradozilla has got a nice color picked history for me, so I can go ahead and just grab that. Paste it in. Now hovering looks a lot better. All right, so our button is looking pretty good.
We’ve got the hover color correct here. The only thing we need to fix is this weird little overlay as I hover. So what we’re going to do is click on the pencil icon to edit this call to action box. And then under style, we’ll go down to hover effects. Now here we’re going to see a very similar option that we’ve seen before, which is normal versus hover.
Now we’ve got no hover animation on right now, but that doesn’t mean there’s not another effect. So if I go ahead and choose hover right now, I can see there is an overlay color and it looks like there’s not one selected. But that’s not always the case inside of Elementor. So I’m going to go ahead and click this box and let’s just go ahead and make this completely transparent. And now if we go ahead and hover over, sure enough, our image looks pretty good.
So the last thing we need to do is actually turn this thing into a button so that we can click it. Now. Right now there is nothing to click if we go back over to the content section. I skipped through this the first time through under content, we had button text, right? I deleted all of that button text.
Well, don’t worry, we can add something in here. Like maybe I’ll add the profitable tools. Facebook group. All right, so here is a link to the Facebook group. Right now it applies the link to button only, and obviously the button is gone, so that’s a problem.
But what I can actually do is have it apply to the whole box, which is ideal. Now I can see my mouse has changed from a pointer into a little click. And if I turn it off, you can see that is no longer a link. So we definitely want to have on the whole box and we’re good to go. Now, just as before, I can just duplicate this and update the text and link and I’m ready to go.
I can add as many as I want on my page. Looking at Gary Vee’s page, we’re getting pretty close here, right? There’s just one thing left to do, and that is the social icons at the bottom of the screen. This is very easy to accomplish in Elementor. We’ll go back over there.
There’s actually a widget that’s perfect for this. It’s called social icons. I’ll search for that up top here. Social icons. There we go.
Very different than social share. I’m going to go back just to point this out. You might choose the wrong ones. Social sharing buttons will look very similar, but this will be to share the actual page. We don’t want to do that.
This is to link up people to our other social media profiles. So by default, it gave me Facebook, Twitter, and YouTube. I can click on the pencil here to style things, and I can see a list of the social icons. It’s easy for me to add another one if I want, and I can go ahead and just choose the service that I want it to represent. So let’s say I wanted this one right here, which would be this WordPress icon to actually be TickTick.
Well, I’ll just choose the icon library and we’re going into all icons here. And I’ll search for TikTok. Click on that and insert. Now I’ve got a TickTick logo. All that’s left for me to do is go through and add in my links for each service.
And then I might want to style things so they look a little bit better. I’ve got some styling options here. I can change the shape if I want to be rounded or squared or circle. That’s definitely an option. Or we could turn off the background color altogether by going over to style.
And then under color, we’ll look for custom. We’ve got a primary color and a secondary color. I’m going to grab the primary color here and I’m going to make it totally transparent. That will leave me with just the white logos, very similar to how we see Gary V. Although he chose slightly different logos, there are multiple options for each icon.
So I can go back into the library here under all icons, I will search for Facebook, and you can see I’ve got several different options. You can also upload your own. So if you’re very particular and you want to have just the right icon, or maybe you want to feature a service that isn’t in the icon library, you can definitely do that. Now for me, we’re getting close enough here that I’m pretty happy. I noticed kind of going through, looking at the mobile responsive view, it looks pretty good, although my height is not quite accurate.
So I’m actually going to modify that. I’m going to select my container here again, my section. And before we chose a height of fit to screen. But what I’m actually going to do here is change it to minimum height and then change the the viewable height to be 100%. That’ll make sure that it’s always filling up the entire screen.
Preview this on mobile, now on tablets and on desktop, and it’s looking pretty good. One thing that’s not going to be very easy for me to do with the built in widgets of elementor would be to copy this style right here for Gary Vee’s newsletter. When I click it, it changes to an opt in form. I can, however, just add a button here that pops open an opt in form. For me, that’s going to work just fine.
If you want to replicate the exact design of linktree, we’re going to fall just a little bit short here. So a few options. You could simply just add in a form, right? You could do that. You could put it right below and get rid of these extra fields.
We need the email address. And you could say, I’m actually going to hide the label as well. And you can make the Placeholder text right here where it says email. Have that say something like subscribe to the newsletter. So I’ll click here under Placeholder, say subscribe to the newsletter.
And for column width, I’m going to make this say about 70%. And then for my button, I will make that be about 30%, and they’ll be bumped up onto the same line. Now, style wise, if I want to get this a little bit closer to the look of this, of course I can continue working here. I’m going to go ahead and go under the Style section. I’m going to remove the column gap.
So now everything’s touching each other. Under Field, I’m going to change the text color to be white and the background color to be transparent. Move this. Slider over under buttons. I’m going to change the button color.
Why don’t we just make it white here? The border radius should be zero, and the text color I’ll have, it be black. All right. So if I hide this, we can kind of get an assessment of where we are. That looks pretty good.
My border is a little bit faint. I would like it to match the other ones. Let’s go and adjust this. So under Field, I’m going to go to the border color and we’ll make that white and set the border radius to be zero. Under HTML Field, I’m going to change the color to be white.
Let’s update the Placeholder text here where it says subscribe to the newsletter. So once again, under Style, we’ll go to Field, and I’m going to go to the typography section here and just make this 16. And we will also change the weight to be 600. All right, so just checking in where we’re at with this little form design. I’m going to show you how to do a pop up as well.
But first here is an inline form. So, you know, we’ve got this button over here to the side. The hover color is off. The text is really far to the left. I’m thinking it might look better centered up in the middle of the field.
Also, we’re a little bit short and the text here looks slightly gray. So I’m going to try to fix all four of those problems. The first thing I’m going to do is try to get the height correct. So get those matching the other buttons. I’m going to go ahead and make sure I’m selected on the correct element here.
Go over to style. And I really have two fields here to mess around with. So I’m going to go under let’s see, go under Field and we’ll go to type Ography. And I’m just going to change the line height here. I’m going to make this be probably about 37 or so, I would guess.
- We’re kind of getting in the ballpark here, so I’m just kind of eyeballing it there’s. 37. I’m going to get 36. All right.
Now I can obviously go and check to make it pixel perfect, the same as all the other buttons. But the other half of this, you can see that if I close up the preview window, see my button didn’t grow to match my form. So let’s go ahead and do the same thing to the button. I’ll go under buttons and here we don’t have to change the typography. We can do this text padding field.
I’m going to increase this to probably about 20 pixels. There we go. And now everything is lining up pretty good. Now if I wanted this to match perfectly, you can see there’s probably one pixel off. And I believe that’s because the form has an outline to it and the button does not.
So my idea here is I’m going to add a border to the button. Then I’m going to remove one pixel of padding and for the border type, I’m going to have it be on the top and I’ll unlink these, turn it off from the right and turn it off from the left. There we go. Now everything is looking really good. Now the other issue I have is of course, when I hover over the button, the word send disappears.
So the way we’ll fix this is under style buttons go to text color, actually. Well, first we’ll go over to hover, then we’ll go to text color. And let’s just make that black as well. Of course, you could very easily change this to be any color that you like if you want it to be red. Sure enough, it’ll change to be red.
Now I’ll leave it as black. So I really don’t have a hover effect going on at all here. Okay, so we’re getting pretty close here on our form field. Let’s try the alternate way, which I think I might prefer, which is to add a pop up here. So maybe I’ll convert this button right here into being a pop up.
So let’s go ahead. I’ve got everything saved right now. I’m going to go back to the WordPress dashboard. So you will need Elementor Pro to do what I’m about to do. I’m going to go under templates and then go to Pop VPs and I’ll add a new pop up here.
I’ll call it Opt in, hit create template. Elementor does come with a lot of options for pop up templates. So you can go ahead and browse through and see if one catches your eye or of course, you can design one from scratch, maybe modify an existing template. For now, I’m just going to go ahead and choose one that looks pretty simple. Let’s insert this right here.
Okay, so this right here is essentially the form that is going to pop up when someone clicks on the sign up for the newsletter button. So I could modify this, say sign up for the newsletter. So you’d want to match the style of the rest of your form. Of course, for now, let’s go ahead and just save this. We’ll just hit save and close.
Now before we go, actually it’s very important to note that we need to connect up our email service in order for this to get saved. So clicking on the form, we go over to Actions after submissions. By default, elementor is going to collect everything and save it in the WordPress dashboard as well as email you a notification. But probably what you want to do is actually connect it up to something like MailChimp Active, campaign Drip, so on and so forth. There’s a lot of services that are supported.
Okay, so now we’re done with our pop up, let’s exit to the dashboard. We’re going to go back on your pages and open up our link in the Bio page. Edit with elementor. Now I want to change this button right here to open that pop up. So I’m just going to click on it.
I’ll go under Content, I’ll say subscribe to the newsletter, and then for my link, I’m going to choose a dynamic tag. I’ll go under pop up, click again, and then right here where it says all, I’m just going to start typing in opt in, which is what I called my pop up and hit Update. Now if we view this page, I can click right here and there is my pop up. Someone could fill that out. Right now I’d get an email, but ideally I’d configure it to work on my email service provider.
You probably don’t want to have your logo there twice, so of course you’d swap that out with a different image. Just go over here, choose the image that you want. Maybe I want this picture of me. And then sure enough, I show up over there on the corner. So our page has come a long way here and I think it looks pretty good.
You could definitely use this as your link in the Bio without any hesitation. However, we still have a lot of features to COVID if we’re going to stay on par with something like Linktree for just $6 a month. So maybe this type of product really does have a good purpose. You can see the features that Linktree is providing. Some of them are fairly useful, others I don’t think many people are going to use.
Let’s cover a few of the things and how you might do them in WordPress, but I’m not actually going to show you exactly. So unlimited links, no problem. We can add as many links as we want inside of our page. QR codes, you can do that, but it’s going to be a little bit more difficult. And you’ll need a third party tool in order to access third codes that load up your links.
So the idea here is that you could print off a QR code. Someone would scan it with their phone and it would go to your link tree page video links. Like embedding YouTube TikTok Facebook. That is no problem. You can easily do that in WordPress.
Leap links allows you to redirect all of your traffic to a specific link that bypasses your link tree. So we can’t really do that by default in WordPress. You could certainly use a link shortener to do that, but it’s not going to be something that’s very easy to do. Link Scheduling schedule a link to go live and turn off at specific times. Perfect for releases, sales and limited time offers.
So I could see that being actually very useful if you’re trying to promote a sale or promote a launch of an album or something like that. There is this tool right here called If So which will allow you to schedule content to go live on WordPress. It’s not going to integrate into our Elementor page all that easily. You’d have to kind of take a call to action save as a widget, put it into If So and then paste that shortcode into your Elementor design. It would work.
It’s just a whole heck of a lot of monkeying around as opposed to just being in link tree and saying like hey, schedule this to go live. Priority links allow you to animate your most important link. We can definitely do things like that in Elementor. It would not be very hard for me to just go in here, choose one of my favorite call to actions and let’s go ahead under Advanced and I can do an animation under Motion effects entrance animation maybe I have a Wobble. There we go.
Definitely not a hard thing to do. Email and SMS links we’ve already talked a little bit about that. Social icons we can do an RSS feed link so it says you can connect your blog or articles via RSS feed to showcase your most recent articles. So that is a really cool feature and definitely something that you can do if you have your own website that is connected to the same page that you’re using your link in the Bio for. So for example, if I wanted to list my most recent posts, I can do that with Elementor quite easily.
Assuming I have the pro version. There is the post widget right here. I can simply drop it in and it’ll always stay updated with the most recent posts on my page. Now I don’t really have any posts on this website so it looks very ugly. Of course we need to stylize it so it displays our featured image and all of that jazz.
Now we’ve got lots of customization available here inside of Linktree. I think these things are going to be really nice and going to save you a lot of time over the hours of tinkering with your Elementor page. So I definitely see the value there. Commerce Links this is no big deal really to add. There are many, many ways to get payments online.
Now you could do something as simple as a PayPal button or a stripe button without any plugins or anything added to your site. You could also link up to your WooCommerce site if you have already existing ecommerce on your WordPress site, that would be a benefit to building on WordPress, the analytics section. I think if analytics are important to you on your link in the Bio page, this is really where something like Linktree is going to shine. Because if you want to get click through Rate unique button clicks and set that up inside of something like Google Analytics, boy, now we’re talking about a lot of extra work. You need an entire video just dedicated to setting that up.
It’s quite complicated and it would take you a great deal of time to get it going. So having the analytics built right in sure would be nice. You can see all of the integrations here and that’s really no problem. You can really integrate WordPress with just about anything and more. Nothing really here of value.
Team access. We can add as many users as we want to WordPress. Custom terms and conditions, sensitive content, warnings. That’s all things you can easily do inside of WordPress. So there you have it.
It’s actually quite a bit of a pain in the neck to try to replicate the look and feel of Linktree on your very own website. Now, if you don’t care that much about making it look like a linktree page, sure you could slap anything together and it would probably work just fine. But if you do want that linktree look and feel and you’re already using Elementor Pro, I will link the JSON file down below. You just have to sign up for my email list. Once you do that, you’ll get an email once per week from me and you’ll be able to instantly download that JSON file, import it into Elementor, and you’ll have the page available to use on your very own website that’s going to do it for this one.
If you found this video helpful, make sure you click the like button and don’t forget to subscribe so you get regular content from me. I’ve also got that link down to the newsletter I just mentioned below, as well as a link to our Facebook group. And feel free to leave a comment if you have any questions. I try to get back to everybody. Thank you so much for watching and I’ll see you in the next one.
