This tutorial will show you how to create new and edit existing
button links. Buttons are used as a more attention-grabbing way to link to web
pages, documents, forms, and email
addresses.
Button examples
![Image Placeholder](/desk/file/9679359/image.png)
Choose learning method:
Video Tutorial: How to create a
button
link
Time: 2:52
Closed
Captioning Available:
Yes
Text Tutorial: How to create or edit
a button link
If you want to link to an uploaded PDF, start with Step 1.
If want to link to a web page, skip to step 2.
STEP 1: Upload & copy your document's URL
1. In the dashboard, you have
two options to access existing media
or upload new media files like PDFs
and images.
![](/desk/file/9679270/image.png)
- Click Media > Add New to
upload new images and PDFs.
- Click Media > Library to
view/search for existing images and
PDFs.
2. After the file has been
uploaded, select the
file and copy the
document's URL. The full file
URL will always start with "https://assets.campbell.edu/"
![](/desk/file/8335853/media-file.jpg)
3. Next, find the page where
the
button
will be added, and click Edit.
STEP 2: Create a new
button
1. While in page edit mode, hover
over
the shortcode
icon. Click Button.
![](https://tw-desk-files.teamwork.com/i/134906/attachment-inline/177012.20170822141551569.177012.20170822141551569Clr10.png)
2. Make your selections in the
"Insert
Button Shortcode" options and click OK.
![](https://tw-desk-files.teamwork.com/i/134906/attachment-inline/177012.20170822142454077.177012.20170822142454077xjzV6.png)
Button Shortcode
Field | Description |
Label | Add text to display
in the
button. We suggest
call-to-action phrases with no
more than 5 words. Example: "Download the
Student
Handbook" |
URL | Add the URL for the
web page or document. You must
include http:// or https://. Example:
https://www.campbell.edu |
Choose a Style | Select Filled
(default) and Ghost. We suggest you
select Filled for content
pages. If adding two buttons
side-by-side, it's fine to use
different styles to emphasize
which button is most important
such as the Filled (left) and
Ghost (right) buttons
below: ![]() |
Choose a Theme | Select a color for your button.
The options are Orange, Black or
White. Orange is the default
option. |
Action Method | Leave as Link URL (default). |
Open link in new tab | Check this box if your button
link goes to an external site
or PDF documents. Examples: PDF
forms, Wufoo form links,
registration links, links to
non-campbell.edu
websites. |
3. After you click OK,
the button
shortcode is added
to your
page.
![](https://tw-desk-files.teamwork.com/i/134906/attachment-inline/177012.20170822142807286.177012.20170822142807286Vu0od.png)
4. Click Preview (Preview
Changes) to test how the button
appears and works on your page.
![Image Placeholder](/desk/file/9419126/image.png)
![](https://tw-desk-files.teamwork.com/i/134906/attachment-inline/177012.20170822142921237.177012.20170822142921237k13zU.png)
5. Click Update when
you are ready to save and publish the
updates.
![](/desk/file/9419099/image.png)
Notes on Updating an
Existing
Button
When you need to update a
button on a page, it's highly
suggested that you simply delete the
existing button, then create a new
one. However,
if you want to swap out
the links in an existing
button you
MUST follow the exact
steps below to get the button to work as
expected.
1. Delete the
old URL from the
shortcode.
EXAMPLE
[button label="View the Academic Calendar" url="http://www.campbell.edu/old.pdf" style="" theme="" action="" new_tab="true" ]
2.
The URL space should be
empty.
EXAMPLE
[button label="View the Academic Calendar" url="" style="" theme="" action="" new_tab="true"]
3. Paste the new file URL
into
the shortcode.
EXAMPLE
[button label="View the Academic Calendar" url="http://www.campbell.edu/new.pdf" style="" theme="" action="" new_tab="true" ]
4. Click
the Update button to
save the
changes.
![Image Placeholder](/desk/file/9419099/image.png)