Button Blocks

Starting with our content page, we are going to select the “Layout” option in the content page menu. From there, we are going to select the “add block” option for the area we want to add our card to. Next, we will select the “Create custom block” option at the top of the pop-up menu. This will take us to our final menu, where we will select the “UTC Button Group”. 

From there, you will be taken to a configure menu similar to your image or text blocks that will contain all the options available to position and customize your button. These options include:

a. “Button Group Title“
Can be left blank if a title is not necessary. The title will populate above your button.

b. “Button Group Title Position”

c.“Button Size” 

d. “Button Group Top Margin”
The amount of additional whitespace to display above the button group.

e. “Button Group Bottom Margin” 
The amount of additional whitespace to display below the button group.

After formatting your button, add your URL in to the section below. 

You will notice that a node id is populating the field. This is very helpful to use instead of entering an actual URL address. The reason is that each page created in Drupal is given a node id. Should the URL be changed for any reason (like if the title of the page is changed, the URL will change as well), entering an actual URL address here would break the link. You’d have to remember to come back to this page to update the link, that is if you knew the URL had changed. That can be time-consuming and frustrating. However, if you use a node id instead of a URL, this link will always follow the desired page, regardless of the URL address as long as the page remains published. 

You will also note that when you selected your page, the link text field automatically filled with the page’s title. Very handy.If you are linking to an external page, for example a UTC blog page, which is NOT a Drupal page, you WOULD enter the whole URL address including the https:// 

Once you have your URL, the link text will auto populate. However, you can change the link text to your preference.  

If we were to have multiple buttons on this page, the layout would surely change with each button getting smaller to fit within the page’s parameters. 

You can add up to 6 with a button group block. If you need more than that, you can simply add another button group. For example, if you need to place 7 buttons, you can implement one block of 3 buttons then implement another block of 4. One thing we ask is that you be very selective by adding lots of buttons and try to limit its usage. The reason is that you don’t want to overwhelm the user with choices that may not pertain to them. 

Starting with our content page, we are going to select the “Layout” option in the content page menu. From there, we are going to select the “add block” option for the area we want to add our card to. Next, we will select the “Create custom block” option at the top of the pop-up menu. This will take us to our final menu, where we will select the “UTC Text Block”. 

In the text editor, select the “Bootstrap Button” in the text editor menu.

After selecting the Bootstrap Button option, a menu will appear. In this menu, you will format and add the url to your button.

When you add your URL, the node id will not auto populate like the UTC Button Group block. Therefore, you will need to update the URL address for the button if said URL address changes, or you can place the node id directly in the URL section of the Bootstrap Button menu. For example, your URL section should look like “node/12345” or if it is a PDF “document/12345” if you use the node id.

a. “Size”


b. “Style”


c. “Width“


Note that you can add Font Awesome Icons in this menu! Naviagate here for more infomation about Font Awesome.

Select “save” on the Bootstrap Button menu and “update” on the Configure menu. Save your content page to check your Button!