Button Links - Using the WYSIWYG Video Transcript

Back to the Button Links WYSIWYG Video


welcome in this video we're going to

review how to create button links now

I'm on an example page here and all I'm

trying to do is navigate to this WYSIWYG

you'll notice that on the WYSIWYG we

have a little button here for button

links and the way this works is I'll

first place my cursor within the body

field for wherever I want to put my

button link then I'll click on this

button here and the first thing I'll

need to do is choose the style for my

button now if you click this drop-down

you'll notice that there's a lot of

different styles you can choose from all

these styles correspond to different

colors and so if we go to our demo site

you'll notice under other features

things to do there's a page here that

shows you the different types of styles

for the buttons and what their colors

are so if I want a red button I'm gonna

use the danger style so let's try that

I'm gonna click on the danger option and

here for the text I'm going to add the

button link text for this first one I'm

going to link to Google so I'm gonna go

ahead and just type in Google here and

you can adjust the size if you'd like a

normal is going to be the default all

these examples here on this page on the

demo site are all normal sized but you

can make them bigger or smaller

depending on what you need and then in

the URL field you're gonna have to pay

attention what you want to do here so if

you're going to be linking to a page

outside of your site this process is

going to be a little bit different than

if you're going to link to a page within

your site since Google's outside of my

site the best thing I can do is go to

the actual website navigate to the site

itself go to the address bar and then

copy the full URL

and then I'm gonna just paste that right

here I remove the hashtag and I'm

pasting the full URL and that is really

all you need to do some people will

might want to have this button open in a

new tab if you want to do that you can

click this target tab here and select

the new window I don't really need to do

that so we're just going to keep this as

not set

and then yeah everything looks good so

click OK you'll notice on this end here

this is just gonna look like a regular

link however if we click the preview

button you're gonna see that this

actually turned into a red Google button

which is pretty cool

now let's go ahead and try to create a

button link that points to one of our

pages inside of our site almost the same

process just slightly different so I'll

place my cursor wherever I want the

button link to go I'll click the button

link button there choose my style this

time maybe I want blue I know that's

primary this time I'm going to point it

to my FAQ page on my web web site here

so I'm going to type in the text let's

go ahead and make this a little bit

larger I'll remove this hashtag here and

for the URL field what I'll do is I'm

going to navigate to my my page on my

site which is this FAQ page here and

instead of copying the whole thing I

don't want to copy the whole thing

because this dot STG is here for those

of you who are migrating or your web

sites right now you're gonna be working

in the staging environment and that

means that your urls gonna have a dot

STG you don't want to point people to

your staging site after your site goes

live you want them to go to the live

version of the page so we're gonna

create something called a relative path

link which ultimately means all we're

gonna do is we're gonna create a link

using the end part of the URL so we're

gonna ignore all this other stuff and

copy everything else that comes after

Colorado gov and you're gonna want to

include the ford slash there's you want

to copy all that

and paste that into the URL field again

this is only for links that are pointing

to pages on your website we'll go ahead

and click OK and you see we get another

link there let's go ahead and save this

as published

leave it all right cool so you can see

here's my read Google button if I click

on that it'll take me to Google

and if I click on my FAQ page button it

should take me to my faq page now let's

say you want to edit one of these

buttons that's also pretty easy to do

we'll edit our page here and let's say I

want to change this from Google to

YouTube or something what I'll do is

I'll double click this link here and

then I can edit any of these fields that

I need so let's say I want this to go to


is URL

click okay and then we'll click Save

and now you'll see it now points YouTube

so that's how you create button links

and edit them