Hi There!

In this video I’m going to demonstrate Orbit Media Studios best practices when it comes to linking.

We’re beginning in the back-end of a page I built specifically to demonstrate our linking best practices.

We’ve loaded in some of our most commonly used blocks.

Text + Image Page Block

2 Column Image Card Page Block

Text + Icon Blurb Page Block

Fullwidth CTA

Let’s start on the Text + Image block.

Enter the text area and you’ll see there’s already a placeholder link here. If we click into it we can see where it goes. This is taking us to the contact page. For a placeholder link you just place a hashtag/pound symbol, and click apply.

To edit your link click this edit button, and for further settings click link options.

In link options, if you have your URL, you can type it in here. Since we’re linking offsite we are going to click open link in new tab. Update your link. And since this was a placeholder it should already be styled. Let’s see what it’s styled as. It’s a button. Let’s leave it as a button and check out our link. We are going to save that. We’re going to preview changes. And here is our CTA button. A little symbol here shows that it opens in a new window. And that should take us to Google dot com. 

Back to the back end.

Let’s try linking our Image Cards. Let’s click into our text area, and as you can see we have a CTA link - there’s a placeholder symbol there. We are going to edit our link. I want this one to take us somewhere on the site instead of having to open in a new tab to take us to another site. I want this one to take us to the contact page. If I don’t know my slug I can simply search for Contact, and it inputs. Go ahead and apply that. Now that it’s linked we can style it. Let’s make this one a Button Ghost style.

When you apply one of these button/link styles you want to make sure you remove the old style, if one was in place. Update this. Preview Changes. And here’s this guy. So this is what a ghost button looks like on this styling, and it’s going to look different on your site. And you can see the designer meant this to look this way - a CTA link gets CTA link styling. So let’s try the CTA link styling and see if we can match these up so they’re consistent. Again click into your text area in your blurb, go to your link, click up to formats, and select the correct button style (CTA link style) - making sure we remove the prior class (ghost button). I’ll save this again and preview changes. Now let’s see if this is what we want. Perfect. 

Now these match up, but you can see this one is insinuating it’s linking offsite, which it doesn’t need to do since we are just going to the contact page. So we’ll pop back to the back end and fix that by going into edit, click options, and here’s your little check mark. Now this won’t open in a new tab, it’s going to display as a CTA link, and it will take you to the contact page. We’re going to click update, save the module, preview changes, reload this page, and there you have it. The little icon shows it’s linking onsite, not offsite, and the styles are the same.

Let’s preview this next block before we link it, just to see what kind of interactions we’re looking for. So you have your button here, and your text area. Then you have your icon blurbs. You’ll see this first one has a link on it because when you hover your mouse turns into a pointer finger. There will be other visual signals of hover states for accessibility reasons, but for now let’s just dive into this.

We’re going to hop to the back end again. Find our new section. Icon blurbs, white… get into our blurb. Now you may be asking where the link is. Here’s the link section. Here’s where you’re going to put your module link. And because we’re sending our visitor to google, we are going to open in a new tab. Apply. Once again preview the page. Now this guy takes us to google.

Perfect. One more thing I want to show you is our CTA. You see you have a placeholder here. This one is going to go to contact, but we want to let our user know it’s going to contact, so why don’t we change the text in our CTA button to “contact us today”. Because you’re staying on this site you don’t need to update in a new tab. You’ll update. Check your styling. Since it’s the footer CTA a button is great, but your style guide may suggest something else. Always look at your style guide as you enter content into your site to ensure consistency. Now we’re gonna make sure we save this guy out, and update, just getting all of our changes baked into this page so we don’t lose anything for now. Then we’ll jump back over to our front end preview. Reload. Let’s try our CTA button, and there you have it.

That’s how you input, remove, and style links on your Orbit site!