{"id":598,"date":"2025-07-17T18:58:17","date_gmt":"2025-07-17T18:58:17","guid":{"rendered":"https:\/\/blogarchive.utc.edu\/web-kb\/?p=598"},"modified":"2025-07-18T14:48:00","modified_gmt":"2025-07-18T14:48:00","slug":"button-blocks","status":"publish","type":"post","link":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/","title":{"rendered":"Button Blocks"},"content":{"rendered":"\n

Adding Button Blocks to a Drupal Content Page.<\/h3>\n\n\n\n

These buttons can make great features on your web page by allowing the user to navigate to different pages, documents, images, etc., at the press of a button. This article is to show you how to implement the button block options menu and how to properly add a button to your page. <\/p>\n\n\n\n


Topics:
<\/em>UTC Button Group Block<\/a>
Button in UTC Text Block<\/a><\/p>\n\n\n\n

\n\n\n\n

UTC Button Group Block<\/h4>\n\n\n\n

<\/p>

  1. Add Button Block<\/strong>

    Starting with our content page, we are going to select the \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select the \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu, where we will select the \u201cUTC Button Group\u201d.\u00a0<\/p> <\/li>

  2. Format Button Block in configure menu<\/strong>

    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<\/strong>. “Button Group Title<\/strong>“<\/strong>Can be left blank if a title is not necessary. The title will populate above your button.<\/em>b.<\/strong> \u201cButton Group Title Position\u201d<\/strong>\"\"c.\u201cButton Size\u201d\u00a0<\/strong>\"\"d. \u201cButton Group Top Margin\u201d<\/strong>The amount of additional whitespace to display above the button group.<\/em>e. \u201cButton Group Bottom Margin\u201d\u00a0<\/strong>The amount of additional whitespace to display below the button group.<\/em><\/p> <\/li>

  3. Add URL to the button.<\/strong>

    After formatting your button, add your URL in to the section below.\u00a0You 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\u2019d 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.\u00a0You will also note that when you selected your page, the link text field automatically filled with the page\u2019s 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:\/\/\u00a0<\/em><\/p> <\/li>

  4. Add link text.<\/strong>

    Once you have your URL, the link text will auto populate. However, you can change the link text to your preference.\u00a0\u00a0<\/p> <\/li>

  5. Select \u201cadd Block\u201d at the bottom of your Configure menu and you are done!\u00a0<\/strong>

    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\u2019s parameters.\u00a0You 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\u2019t want to overwhelm the user with choices that may not pertain to them.\u00a0<\/p> <\/li>

  6. Do not forget to check your button! Save your content page and double check to make sure your button is navigating to the correct location!\u00a0<\/strong>

    <\/p> <\/li><\/ol><\/div>\n\n\n\n

    \n\n\n\n

    Button in UTC Text Block<\/h4>\n\n\n\n

    <\/p>

    1. Add Button Block<\/strong>

      Starting with our content page, we are going to select the \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select the \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu, where we will select the \u201cUTC Text Block\u201d.\u00a0<\/p> <\/li>

    2. Format Button in configure menu<\/strong>

      In the text editor, select the “Bootstrap Button” in the text editor menu. \"\"<\/p> <\/li>

    3. Bootstrap Button URL<\/strong>

      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. <\/em>\"\"<\/p> <\/li>

    4. Bootstrap Button Formatting<\/strong>

      a. “Size”<\/strong>\"\"b. “Style”<\/strong>\"\"c. “Width<\/strong>“\"\"Note that you can add Font Awesome Icons in this menu! Naviagate here for more infomation about Font Awesome.<\/p> <\/li>

    5. Save your block!<\/strong>

      Select “save” on the Bootstrap Button menu and “update” on the Configure menu. Save your content page to check your Button! <\/p> <\/li><\/ol><\/div>\n","protected":false},"excerpt":{"rendered":"

      Adding Button Blocks to a Drupal Content Page. These buttons can make great features on your web page by allowing the user to navigate to different pages, documents, images, etc., at the press of a button. This article is to show you how to implement the button block options menu and how to properly add… <\/p>\n

      Continue Reading <\/span><\/a><\/span><\/p>\n","protected":false},"author":2040,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[14],"class_list":{"0":"post-598","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-drupal","7":"tag-drupal-content-blocks","8":"entry","9":"has-post-thumbnail"},"yoast_head":"\nButton Blocks - UTC Website Knowledge Base Archive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Button Blocks - UTC Website Knowledge Base Archive\" \/>\n<meta property=\"og:description\" content=\"Adding Button Blocks to a Drupal Content Page. These buttons can make great features on your web page by allowing the user to navigate to different pages, documents, images, etc., at the press of a button. This article is to show you how to implement the button block options menu and how to properly add… Continue Reading\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"UTC Website Knowledge Base Archive\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-17T18:58:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:48:00+00:00\" \/>\n<meta name=\"author\" content=\"Kailey Agoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kailey Agoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/\",\"name\":\"Button Blocks - UTC Website Knowledge Base Archive\",\"isPartOf\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\"},\"datePublished\":\"2025-07-17T18:58:17+00:00\",\"dateModified\":\"2025-07-18T14:48:00+00:00\",\"author\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Button Blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\",\"name\":\"UTC Website Knowledge Base Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\",\"name\":\"Kailey Agoo\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#howto-1\",\"name\":\"Button Blocks\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/\"},\"description\":\"\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873430786\",\"name\":\"Add Button Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Starting with our content page, we are going to select the \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select the \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu, where we will select the \u201cUTC Button Group\u201d.\u00a0<br \/><br \/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873558460\",\"name\":\"Format Button Block in configure menu\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"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:<br\/><br\/><strong>a<\/strong>. \\\"<strong>Button Group Title<\/strong>\\\"<strong><br\/><\/strong><em>Can be left blank if a title is not necessary. The title will populate above your button.<br\/><\/em><br\/><strong>b.<\/strong> <strong>\u201cButton Group Title Position\u201d<\/strong><br\/><br\/><strong>c.\u201cButton Size\u201d\u00a0<\/strong><br\/><br\/><strong>d. \u201cButton Group Top Margin\u201d<\/strong><br\/><em>The amount of additional whitespace to display above the button group.<br\/><\/em><br\/><strong>e. \u201cButton Group Bottom Margin\u201d\u00a0<\/strong><br\/><em>The amount of additional whitespace to display below the button group.<br\/><\/em><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-b0b0a0a931bd00c27a6780c4d68f4be9\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.25.47\u202fPM.png\",\"contentUrl\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.25.47\u202fPM.png\",\"width\":928,\"height\":344}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873617466\",\"name\":\"Add URL to the button.\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"After formatting your button, add your URL in to the section below.\u00a0<br\/><br\/>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\u2019d 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.\u00a0<br\/><br\/><em>You will also note that when you selected your page, the link text field automatically filled with the page\u2019s 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:\/\/\u00a0<br\/><\/em><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873667341\",\"name\":\"Add link text.\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Once you have your URL, the link text will auto populate. However, you can change the link text to your preference.\u00a0\u00a0<br \/><br \/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873707116\",\"name\":\"Select \u201cadd Block\u201d at the bottom of your Configure menu and you are done!\u00a0\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"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\u2019s parameters.\u00a0<br \/><br \/>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\u2019t want to overwhelm the user with choices that may not pertain to them.\u00a0<br \/><br \/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873731717\",\"text\":\"Do not forget to check your button! Save your content page and double check to make sure your button is navigating to the correct location!\u00a0\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#howto-2\",\"name\":\"Button Blocks\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/\"},\"description\":\"\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873430786\",\"name\":\"Add Button Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Starting with our content page, we are going to select the \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select the \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu, where we will select the \u201cUTC Text Block\u201d.\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873558460\",\"name\":\"Format Button in configure menu\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"In the text editor, select the \\\"Bootstrap Button\\\" in the text editor menu. <br\/><br\/><br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-ffc42c2240297b96db8f0b8286438b91\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.39.46\u202fPM-1.png\",\"contentUrl\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.39.46\u202fPM-1.png\",\"width\":959,\"height\":296}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873617466\",\"name\":\"Bootstrap Button URL\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"After selecting the Bootstrap Button option, a menu will appear. In this menu, you will format and add the url to your button. <br\/><br\/>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. <em><br\/><\/em><br\/><br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-826d60edb22385c7ccf1ba1ca2adf37c\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.44.26\u202fPM.png\",\"contentUrl\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.44.26\u202fPM.png\",\"width\":628,\"height\":407}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873667341\",\"name\":\"Bootstrap Button Formatting\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"<br\/><strong>a. \\\"Size\\\"<br\/><\/strong><br\/><br\/><strong>b. \\\"Style\\\"<\/strong><br\/><br\/><br\/><strong>c. \\\"Width<\/strong>\\\"<br\/><br\/><br\/>Note that you can add Font Awesome Icons in this menu! Naviagate here for more infomation about Font Awesome.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-bc90a6efd18c605dc7dbed7aa69eac10\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-2.31.34\u202fPM.png\",\"contentUrl\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-2.31.34\u202fPM.png\",\"width\":925,\"height\":197}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873707116\",\"name\":\"Save your block!\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Select \\\"save\\\" on the Bootstrap Button menu and \\\"update\\\" on the Configure menu. Save your content page to check your Button! <br\/><br\/>\"}]}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Button Blocks - UTC Website Knowledge Base Archive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/","og_locale":"en_US","og_type":"article","og_title":"Button Blocks - UTC Website Knowledge Base Archive","og_description":"Adding Button Blocks to a Drupal Content Page. These buttons can make great features on your web page by allowing the user to navigate to different pages, documents, images, etc., at the press of a button. This article is to show you how to implement the button block options menu and how to properly add… Continue Reading","og_url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/","og_site_name":"UTC Website Knowledge Base Archive","article_published_time":"2025-07-17T18:58:17+00:00","article_modified_time":"2025-07-18T14:48:00+00:00","author":"Kailey Agoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kailey Agoo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/","name":"Button Blocks - UTC Website Knowledge Base Archive","isPartOf":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website"},"datePublished":"2025-07-17T18:58:17+00:00","dateModified":"2025-07-18T14:48:00+00:00","author":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3"},"breadcrumb":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogarchive.utc.edu\/web-kb\/"},{"@type":"ListItem","position":2,"name":"Button Blocks"}]},{"@type":"WebSite","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website","url":"https:\/\/blogarchive.utc.edu\/web-kb\/","name":"UTC Website Knowledge Base Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3","name":"Kailey Agoo","url":"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/"},{"@type":"HowTo","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#howto-1","name":"Button Blocks","mainEntityOfPage":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/"},"description":"","step":[{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873430786","name":"Add Button Block","itemListElement":[{"@type":"HowToDirection","text":"Starting with our content page, we are going to select the \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select the \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu, where we will select the \u201cUTC Button Group\u201d.\u00a0<br \/><br \/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873558460","name":"Format Button Block in configure menu","itemListElement":[{"@type":"HowToDirection","text":"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:<br\/><br\/><strong>a<\/strong>. \"<strong>Button Group Title<\/strong>\"<strong><br\/><\/strong><em>Can be left blank if a title is not necessary. The title will populate above your button.<br\/><\/em><br\/><strong>b.<\/strong> <strong>\u201cButton Group Title Position\u201d<\/strong><br\/><br\/><strong>c.\u201cButton Size\u201d\u00a0<\/strong><br\/><br\/><strong>d. \u201cButton Group Top Margin\u201d<\/strong><br\/><em>The amount of additional whitespace to display above the button group.<br\/><\/em><br\/><strong>e. \u201cButton Group Bottom Margin\u201d\u00a0<\/strong><br\/><em>The amount of additional whitespace to display below the button group.<br\/><\/em><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-b0b0a0a931bd00c27a6780c4d68f4be9","url":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.25.47\u202fPM.png","contentUrl":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.25.47\u202fPM.png","width":928,"height":344}},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873617466","name":"Add URL to the button.","itemListElement":[{"@type":"HowToDirection","text":"After formatting your button, add your URL in to the section below.\u00a0<br\/><br\/>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\u2019d 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.\u00a0<br\/><br\/><em>You will also note that when you selected your page, the link text field automatically filled with the page\u2019s 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:\/\/\u00a0<br\/><\/em><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873667341","name":"Add link text.","itemListElement":[{"@type":"HowToDirection","text":"Once you have your URL, the link text will auto populate. However, you can change the link text to your preference.\u00a0\u00a0<br \/><br \/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873707116","name":"Select \u201cadd Block\u201d at the bottom of your Configure menu and you are done!\u00a0","itemListElement":[{"@type":"HowToDirection","text":"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\u2019s parameters.\u00a0<br \/><br \/>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\u2019t want to overwhelm the user with choices that may not pertain to them.\u00a0<br \/><br \/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873731717","text":"Do not forget to check your button! Save your content page and double check to make sure your button is navigating to the correct location!\u00a0"}],"inLanguage":"en-US"},{"@type":"HowTo","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#howto-2","name":"Button Blocks","mainEntityOfPage":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/"},"description":"","step":[{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873430786","name":"Add Button Block","itemListElement":[{"@type":"HowToDirection","text":"Starting with our content page, we are going to select the \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select the \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu, where we will select the \u201cUTC Text Block\u201d.\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873558460","name":"Format Button in configure menu","itemListElement":[{"@type":"HowToDirection","text":"In the text editor, select the \"Bootstrap Button\" in the text editor menu. <br\/><br\/><br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-ffc42c2240297b96db8f0b8286438b91","url":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.39.46\u202fPM-1.png","contentUrl":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.39.46\u202fPM-1.png","width":959,"height":296}},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873617466","name":"Bootstrap Button URL","itemListElement":[{"@type":"HowToDirection","text":"After selecting the Bootstrap Button option, a menu will appear. In this menu, you will format and add the url to your button. <br\/><br\/>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. <em><br\/><\/em><br\/><br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-826d60edb22385c7ccf1ba1ca2adf37c","url":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.44.26\u202fPM.png","contentUrl":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-1.44.26\u202fPM.png","width":628,"height":407}},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873667341","name":"Bootstrap Button Formatting","itemListElement":[{"@type":"HowToDirection","text":"<br\/><strong>a. \"Size\"<br\/><\/strong><br\/><br\/><strong>b. \"Style\"<\/strong><br\/><br\/><br\/><strong>c. \"Width<\/strong>\"<br\/><br\/><br\/>Note that you can add Font Awesome Icons in this menu! Naviagate here for more infomation about Font Awesome.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#schema-image-bc90a6efd18c605dc7dbed7aa69eac10","url":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-2.31.34\u202fPM.png","contentUrl":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-2.31.34\u202fPM.png","width":925,"height":197}},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/button-blocks\/#how-to-step-1750873707116","name":"Save your block!","itemListElement":[{"@type":"HowToDirection","text":"Select \"save\" on the Bootstrap Button menu and \"update\" on the Configure menu. Save your content page to check your Button! <br\/><br\/>"}]}],"inLanguage":"en-US"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/users\/2040"}],"replies":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/comments?post=598"}],"version-history":[{"count":44,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/598\/revisions"}],"predecessor-version":[{"id":917,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/598\/revisions\/917"}],"wp:attachment":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/media?parent=598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/categories?post=598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/tags?post=598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}