GabrielSoft - How to create a linked HTML button

When you add a Text/HTML module to a page, you can use the link tool in the WYSIWYG (what-you-see-is-what-you-get) editor to easily create a linked HTML button. 

If you're looking for how to create hyperlinked text, you can follow these instructions.

Here's how to create a linked HTML button on your website:

1

Drag and drop a Text/HTML module onto the page and add text

Click Add Content to open the content tray. Then drag and drop a Text/HTML module onto the page and type or paste your text into the module.

2

Select your text and click the link icon

Use your cursor to  highlight the plain text you would like to become a linked HTML button. Then, click the link icon in the WYSIWYG editor to open the Link dialog.

3

Verify the link text

In the Link Text dialog, review the text that you would like to link, to ensure you will correctly link all of the correct letters or characters.

4

Select a link type

In the Link dialog, use the  Link Type drop-down menu to select the type of link you want to create.

  • Internal Page: Directs users to a page within your website (default option)
  • External link: Directs users to a website outside your own 
  • Document link: Directs users to a document on your server
5

Enter the link URL

Then, click into the  URL field and type/paste the link URL.

(If you selected  Internal Page from the Link Type drop-down menu, there is no need to manually type/paste the link URL. Instead, use the Select Page drop-down menu to choose the page to which you'd like to link.)

PRO TIP: Use the Target drop-down menu to define how the link should open in a visitor's internet browser. Select whether the link should 1) open in a new browser window/tab or 2) open in the same browser window/tab.
6

Select link style

Finally, use the Link Style drop-down menu and choose one of two pre-designed HTML button options:

  • Button 1
  • Button 2

After you click OK, your button will appear on the page.

Many HTML buttons have a unique hover effect based on your website's theme and color palette. (i.e., Hover your cursor over the HTML button to see the hover effect)

Don't forget to publish your page once you're done!

Testing your links

You can test your new button by viewing the page using the Design Studio found in the blue admin bar at the top of your screen. Once in the Design Studio, navigate to the page where the button was added and try it out. You can also test your links by using Chrome's Incognito Browsing or Firefox's Private Browsing.