Monday, April 22, 2024
Written by
Megan Yoder
OSC Web Team

Buttons are powerful tools that guide users to valuable information or prompt actions on your website. Before diving into button addition, it's essential to understand how to utilize them effectively to avoid cluttering your site with unnecessary buttons. You can find useful insights on button usage here. Additionally, we offer training sessions on button implementation to ensure you're well-prepared.

There are two primary methods for adding buttons to your website: using the button component or incorporating them through the WYSIWYG/Text area. Let's walk through each method step by step. 

Adding buttons using the button component

  • Navigate to the page where you want to place the button.
  • Scroll down and identify the section where you'd like to add it. If needed, switch to 'Layout' and add a section.
Webpage
Make sure you switch to Layout Builder mode, if you have not already done so in order to add the button component. 
  • Once you've selected the section, add a button component by clicking 'Add component' and selecting 'Button.'
Webpage
Select button from the options of components. 
  • A dialog box will appear on the right, allowing you to input the URL and button text. You can also customize the style options at the bottom.
Webpage
Once you add a component, a dialogue box will appear with additional information for you to fill out. 
  • Click 'Add block' to successfully add the button.
Webpage
Select 'add block' to add a button component to a section. 
  • The button you have added will now appear on your page. 
Webpage
How a button appears once you have added it to page on your website. Make sure to scroll up and save the page in its entirety. 

Adding buttons through the WYSIWYG/Text area

  • Navigate to the page where you want to place the button.
  • Identify the section where you'd like to add it. If needed, switch to 'Layout' and add a section.
Webpage
Make sure you switch to Layout Builder mode, if you have not already done so in order to add the button component. 
  • Once the section is ready, add a 'Text Area.' 
Webpage
In order to add a button using the WYSIWYG/text area, you will need to first add a text area component. 
  • Populate the area with content, including a title and additional text.
Webpage
Make sure to add text to your text area. The text used here is lorem ipsum, which is placeholder text for this example. 
  • Type out the button text (e.g., "Apply to Dance at Iowa") and hyperlink it to the desired action.
Webpage
You will need to type out your desired button text and then use the link icon to hyperlink that text to a specific page on your website or another website that you want that link to go to. 
  • Then you will need to either type in the name of your page (if the page lives on your website) or type in the complete URL if the page does not live on your website. In this example shown here, the page uiowa.edu does not live on this particular website, therefore the entire URL has been typed in. To finish you will click the green check mark.
Webpage
An additional screenshot showcasing how to hyperlink text. Once you have added the URL you will need to click the green check mark. 
Webpage
You have successfully hyperlinked your desired text. 
  • Highlight the text and select 'Styles.' You'll see two button options to choose from.
Webpage
Highlight your hyperlinked text and select styles in the right hand corner of the WYSIWYG editor. You will have a gold and black button option to select from.
  • Select the desired style and save your block. Then, save the page.
Webpage
Select your button style from the options available. Once completed, scroll down and add your block and then save your page. 
  • You have successfully added a button using the WYSIWYG/Text area. You can also add buttons to articles through the WYSIWYG and using a similar process and following bullets 5 thru 9.
Webpage
A button after being added in a WYSIWYG area.

While both methods have their advantages, choosing between them ultimately depends on your preference and the needs of your content editors. Using the button component offers more style options and easy drag-and-drop functionality, while adding buttons through the WYSIWYG/text area may be simpler for some users. Keep in mind that buttons can only be added to articles through the WYSIWYG. Whatever method you choose, ensure it aligns with your website's goals and user experience.