WiscWeb - WordPress UW Theme - Adding Buttons

The following document will walk you through the process of adding styled buttons to your page or post using the button insert feature of the text editor.

Button Best Practices

  • Use buttons sparingly. Often, a single button is best.
  • Centering your button will give it more impact.
  • Limit the number of words in the button. A short action word or phrase — Download, Learn more — is ideal. Slightly longer phrases are okay, but avoid longer sentences if possible.
  • Avoid using buttons within a sentence; buttons should always be placed on their own line.
  • Stick to one, consistent set of button style options (see below) on your site. 

Adding Buttons

There are a couple ways that you can add a new button to your page:

Button Style Options

Colors

You currently have the option to choose between red and blue buttons:

BlueButton_small.png
Redbutton_small.png

Size

You currently have the option to choose between the small (default) and large sizes:

Default

BlueButton_small.png
Redbutton_small.png

Large

BlueButton_small.png
Redbutton_small.png

Style

You currently have the option to choose between standard (default) or reversed styles

Standard

BlueButton_small.png
Redbutton_small.png

Reversed

Bluebutton_reversed.png
RedButton_reversed.png

Adding a Button from Scratch

  1. Navigate to the page or post that you'd like to edit
  2. In the text editor for the page element you wish to add the button to, make sure your cursor is on a new line
  3. Select the button icon from the text editor options

    ButtonScreenImage.png

  4. A modal window will appear with some options

    ModalOptions.png

  5. Choose your preferred button color
  6. Choose your preferred size
  7. Choose if you want normal or reversed
  8. Type in the text you'd like for the button
  9. Paste or type in the URL for where you'd like the button to lead to
  10. Press Insert
  11. Your new button should now be added to your page/post

Making Plain Text into a Button

  1. Navigate to the page or post that you'd like to edit
  2. In the text editor for the page element you wish to add the button to, highlight the text you would like to make into a button (make sure it is on its own line)
  3. Select the button icon from the text editor options

    ModalNoLink.png

  4. Choose your preferred button color
  5. Choose your preferred size
  6. Choose if you want normal or reversed
  7. The text you selected should auto-fill into the Text field, but you may edit it there, if needed
  8. Paste or type in the URL for where you'd like the button to lead to
  9. Press Insert
  10. Your new button should now be added to your page/post

Turning an Existing Link into a Button

  1. Navigate to the page or post that you'd like to edit
  2. In the text editor for the page element you wish to add the button to, click to select the link you'd like to make into a button (make sure it is on its own line)
  3. Select the button icon from the text editor options
  4. Choose your preferred button color
  5. Choose your preferred size
  6. Choose your preferred style
  7. The text for the link should auto-fill into the Text field, but you may edit it there, if needed
  8. The URL for the link should also auto-fill into the Link field, but you may edit this, if needed

    Modal.png

  9. Press Insert
  10. Your new button should now be added to your page/post

Video



Troubleshooting

  • If you do not provide button text or a URL, the button form will not insert and you will get an alert telling you to add the text / URL.
  • If you have not clicked somewhere in the text editor before clicking on the button icon, your new button will be added at the very top of the block of text.
  • If you would like to remove an existing button, highlight all of the text in the button and press the 'Delete' button on the keyboard.
  • To enter text below your button, put your cursor at the end of the button text and press the 'Enter' button on the keyboard.
  • If you have older buttons on your page that you placed using inline styles and HTML, we do recommend updating those to use this new way of styling buttons.





Keywords:button, text editor, insert, add, display, link   Doc ID:110228
Owner:Jenna K.Group:WiscWeb CMS
Created:2021-04-13 12:37 CDTUpdated:2021-06-10 09:13 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0