Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Links can also be made into buttons. A button has the same functionality as a link; in fact, the button text is configured as a link first, then formatted into a buttonThe Buttons block is used to create links with more visibility than a standard text link. Buttons are useful when you want to emphasize a link more prominently than just link text.

...

Buttons typically contain simple, action-based text such as “Learn More” or “Register”.

To create a button, follow these steps:

...

Highlight the text you want to display in the button.

...

Create a link with the text. Internal, external, and anchor links can be used in the button.

...

...

Click the Styles dropdown menu in the editor toolbar while the text is still highlighted.

...

...

Select a button type. The Terry website uses two: Red button (the button length is determined by the text length), and Red button full width (the button spans the width of the body, regardless of the text length). The image below demonstrates how both button types are formatted.

...

The link is formatted as a button after selecting a button type. Upon saving, users are directed to the page defined by the link when they click the button.

...

  1. Create a new placeholder for a block. The placeholder text (“Type / to choose a block”) is displayed.

    Image Added

  2. Type /buttons in the new block text field. Two button options are displayed.

    Image Added

  3. Select the second Buttons option (it has a blue icon). Two center-aligned red buttons are displayed.

    Image Added

  4. By default, the Buttons block generates two buttons. To delete a button, click on it, select the rightmost option (the icon with three dots) in the toolbar, the click Delete. The button is deleted, leaving one remaining button.

    Image Added

  5. Buttons on the Terry website are typically left-aligned. To do this, select the entire Buttons block (not the single button). In the block menu, click the left-align option under Overall Alignment.

    Image Added


    Note: Left-aligned buttons on desktop view must also be left-aligned on mobile and tablet view. To do this, click the small icon to the right of Overall Alignment, select the device type (the order from left to right is desktop, tablet and mobile), then click the left-align option for this view.

    Image Added

  6. You must now provide a link for the button. To do this, click on the button. The button’s block menu is displayed.

    Image Added

  7. Under the General tab, click the Content menu to display the button. A list of customization options is displayed.

    Image Added

  8. In the Link field, enter the URL of the page or file to which you want to direct visitors when they click the button.

  • If you are linking to another page on the Terry website, you only need the URL path after https://www.terry.uga.edu . For example, if you are linking to https://www.terry.uga.edu/macc/admissions/application-process, enter /macc/admissions/application-process.

    Image Added

  • If you are linking to a page outside of the Terry website, enter the page’s entire URL, including its http:// or https:// prefix.

    Image Added

  • If you are linking to a file (in most cases a PDF file), you must first upload the file to the website’s CMS. Once the file is uploaded, copy its entire URL and paste it in the Link field.

    Note: Refer to Uploading Files for more information on uploading files to the website.

    Image Added

  1. Click inside the button to change the text.

    Image Added