{"id":7611,"date":"2021-10-07T13:30:25","date_gmt":"2021-10-07T13:30:25","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=7611"},"modified":"2021-10-26T14:54:12","modified_gmt":"2021-10-26T14:54:12","slug":"grav-building-your-own-site-using-gantry-5","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2021\/10\/07\/grav-building-your-own-site-using-gantry-5\/","title":{"rendered":"Grav: Building Your Own Site Using Gantry 5"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"346\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-9-1-1024x346.png\" alt=\"\" class=\"wp-image-7974\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-9-1-1024x346.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-9-1-300x101.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-9-1-768x260.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-9-1-1536x519.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-9-1-2048x693.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>This training will go through the basics of the Gantry 5 framework for Grav.<\/p>\n\n\n\n<p><em>Note: Basic knowledge of CSS\/HTML is required to complete this training.<\/em><\/p>\n\n\n\n<p><strong>Before starting this training, complete the following tutorials to set up a local Grav site on your machine:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/sites.la.utexas.edu\/kb\/2021\/09\/16\/how-to-install-mamp\/\" data-type=\"URL\" data-id=\"https:\/\/sites.la.utexas.edu\/kb\/2021\/09\/16\/how-to-install-mamp\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Install MAMP<\/a><\/li><li><a href=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/09\/23\/installing-grav\/\" data-type=\"URL\" data-id=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/09\/23\/installing-grav\/\" target=\"_blank\" rel=\"noreferrer noopener\">Installing Grav Locally<\/a><\/li><\/ol>\n\n\n\n<p>Assets you will need for this training:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.figma.com\/file\/bPV6qNcQXcVqbnrPNA3Sd1\/Gantry-Training-Figma?node-id=0%3A1\" data-type=\"URL\" data-id=\"https:\/\/www.figma.com\/file\/bPV6qNcQXcVqbnrPNA3Sd1\/Gantry-Training-Figma?node-id=0%3A1\" target=\"_blank\" rel=\"noreferrer noopener\">Gantry Training Figma<\/a><\/li><li><a href=\"https:\/\/utexas.box.com\/s\/tp1gmzd0hiddp46lm6at1kut1hrvw59n\" data-type=\"URL\" data-id=\"https:\/\/utexas.box.com\/s\/tp1gmzd0hiddp46lm6at1kut1hrvw59n\" target=\"_blank\" rel=\"noreferrer noopener\">Gantry Training Site Assets (UT Box)<\/a><\/li><\/ul>\n\n\n\n<div>\n<h3>Table of Contents<\/h3>\n<ul>\n<li>Set up: Activating the Helium Theme and Installing the Gantry Plugin<\/li>\n<li>Step 1. Building the Header and Footer<\/li>\n<li>Step 2. Building Custom Layouts<\/li>\n<li>Step 3. Inheriting the Navigation and Footer<\/li>\n<li>Step 4. Building the Homepage Banner with a Custom Particle<\/li>\n<li>Step 5. Adding and Editing Page Content<\/li>\n<li>Step 6. Adding a Custom Stylesheet Asset<\/li>\n<li>Step 7. Adding a New Page<\/li>\n<li>Step 8. Now It\u2019s Your Turn!<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"set-up\">Set up: Activating the Helium Theme and Installing the Gantry Plugin<\/h3>\n\n\n\n<p>Once you have made your new Grav site, login to the admin dashboard. Click on the Plugins tab in the left-hand navigation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_1.png\" alt=\"\" class=\"wp-image-7643\" width=\"328\" height=\"246\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_1.png 474w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_1-300x225.png 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<p>On the plugins page, click on the Add button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_2.png\" alt=\"\" class=\"wp-image-7645\" width=\"347\" height=\"66\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_2.png 612w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_2-300x58.png 300w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure>\n\n\n\n<p>In the search bar, search for \u2018Gantry.\u2019 Then click the Install button next to the Gantry plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"149\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_3-1024x149.png\" alt=\"\" class=\"wp-image-7647\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_3-1024x149.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_3-300x44.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_3-768x112.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_3-1536x223.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_3-2048x297.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The Gantry plugin was built to work exclusively with the<strong> Helium<\/strong> theme.&nbsp;In order for the Gantry plugin to show up, we will also need to activate the correct theme.<\/p>\n\n\n\n<p><strong>Themes<\/strong> pre-define styling and basic functionality of sites. When we create our own websites using CMS&#8217;s, we will be making our own customizations on top of these base themes.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Note: <\/strong>Usually, the way to do this is by making a Child theme that inherits from the Helium (parent) theme. To keep things simple in this training, we won\u2019t be making a child theme.&nbsp;<\/p><\/blockquote>\n\n\n\n<p>In the left-hand navigation, click on the Themes tab.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_4.png\" alt=\"\" class=\"wp-image-7648\" width=\"320\" height=\"184\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_4.png 472w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_4-300x173.png 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<p>Then click on the Add button in the top right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_2.png\" alt=\"\" class=\"wp-image-7645\" width=\"351\" height=\"67\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_2.png 612w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_2-300x58.png 300w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/figure>\n\n\n\n<p>In the search bar, type in \u2018Helium\u2019 and click Install.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_5.png\" alt=\"\" class=\"wp-image-7651\" width=\"341\" height=\"465\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_5.png 746w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_5-220x300.png 220w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/figure>\n\n\n\n<p>Once it\u2019s done installing, click Back to Themes. The Helium theme should appear in your Installed Themes. Click Activate.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_6.png\" alt=\"\" class=\"wp-image-7653\" width=\"317\" height=\"393\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_6.png 700w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_6-242x300.png 242w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/figure>\n\n\n\n<p>Once activated, you should see the Gantry tab appear in your left-hand navigation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_7.png\" alt=\"\" class=\"wp-image-7656\" width=\"280\" height=\"213\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_7.png 468w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_7-300x228.png 300w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<p id=\"step-1\">Now that we have Gantry set up, let\u2019s start building our site. For the remainder of this training, we will be referencing this Figma as the design for our new website: <a href=\"https:\/\/www.figma.com\/file\/bPV6qNcQXcVqbnrPNA3Sd1\/Gantry-Training-Figma?node-id=0%3A1\" data-type=\"URL\" data-id=\"https:\/\/www.figma.com\/file\/bPV6qNcQXcVqbnrPNA3Sd1\/Gantry-Training-Figma?node-id=0%3A1\" target=\"_blank\" rel=\"noreferrer noopener\">Gantry Training Figma.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1. Building the Header and Footer<\/h3>\n\n\n\n<p>Click on the Gantry 5 tab in the left-hand navigation. You should be taken to the Base Outline Styles page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_8-1024x492.png\" alt=\"\" class=\"wp-image-7658\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_8-1024x492.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_8-300x144.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_8-768x369.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_8-1536x737.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_8-2048x983.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It is common practice for every website to have a navigation header and footer, so let\u2019s make those first.<\/p>\n\n\n\n<p>In the top navigation in Gantry, click on Layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"100\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_9-1024x100.png\" alt=\"\" class=\"wp-image-7659\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_9-1024x100.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_9-300x29.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_9-768x75.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_9-1536x150.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_9.png 1556w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The Layout tab is where you can organize content and customize how each page is formatted.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_10-1024x588.png\" alt=\"\" class=\"wp-image-7660\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_10-1024x588.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_10-300x172.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_10-768x441.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_10-1536x882.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_10-2048x1177.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Each page is broken down into Sections (Navigation, Header, Intro, etc.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_11-1024x588.png\" alt=\"\" class=\"wp-image-7661\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_11-1024x588.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_11-300x172.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_11-768x441.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_11-1536x882.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_11-2048x1177.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Inside each section, you will notice blocks of content. These blocks are called <strong>Particles<\/strong> in Gantry. On the left is the <strong>Particles Panel<\/strong> where you can choose content types to add to your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_12-1024x588.png\" alt=\"\" class=\"wp-image-7662\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_12-1024x588.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_12-300x172.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_12-768x441.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_12-1536x882.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_12-2048x1177.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Navigation Header<\/strong><\/h4>\n\n\n\n<p>To make our Navigation Header we will be working in the <strong>Navigation<\/strong> section.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_13-1024x588.png\" alt=\"\" class=\"wp-image-7680\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_13-1024x588.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_13-300x172.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_13-768x441.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_13-1536x882.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_13-2048x1177.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Let\u2019s <strong>remove <\/strong>everything that currently lives in that section and start from scratch.&nbsp;<\/p>\n\n\n\n<p>Click on the green System Messages particle and drag it to the top of the page. You should see an overlay that says \u201cDrop to Delete.\u201d Drop the particle to delete it. Do this for all of the remaining particles in the Navigation section.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_14-1024x491.png\" alt=\"\" class=\"wp-image-7683\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_14-1024x491.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_14-300x144.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_14-768x368.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_14-1536x737.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_14-2048x982.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now let\u2019s add the particles we actually want.&nbsp;<\/p>\n\n\n\n<p>Grab the Logo\/Image particle from the Particles Panel and drop it into the Navigation section.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"170\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_15-1024x170.png\" alt=\"\" class=\"wp-image-7686\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_15-1024x170.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_15-300x50.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_15-768x127.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_15-1536x255.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_15.png 1964w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, grab the Menu particle and drag to the right-side of the Logo\/Image particle in your section. You should see a black bar to indicate that you\u2019re placing the particle in the same row.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"169\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_16-1024x169.png\" alt=\"\" class=\"wp-image-7687\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_16-1024x169.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_16-300x49.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_16-768x126.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_16-1536x253.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_16.png 1962w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Let\u2019s also drop a Spacer particle in between the Logo\/Image and Menu particles.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_18-1.png\" alt=\"\" class=\"wp-image-7691\" width=\"198\" height=\"322\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_18-1.png 394w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_18-1-185x300.png 185w\" sizes=\"auto, (max-width: 198px) 100vw, 198px\" \/><\/figure>\n\n\n\n<p>Your Navigation section should now look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"166\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_17-1024x166.png\" alt=\"\" class=\"wp-image-7688\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_17-1024x166.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_17-300x49.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_17-768x125.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_17-1536x249.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_17.png 1958w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In Gantry, you can easily customize the spacing of particles by dragging the right or left edges of the particle. We want our Logo to be smaller and left-aligned, so let\u2019s drag our Logo\/Image to be 25% wide. Now drag the Menu particle to be 25% wide, leaving the spacer to fill the rest of the space in the middle (65%). Like so:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"165\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_20-1-1024x165.png\" alt=\"\" class=\"wp-image-7702\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_20-1-1024x165.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_20-1-300x48.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_20-1-768x124.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_20-1-1536x247.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_20-1.png 1950w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on the gear icon on the Logo\/Image particle. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_21.png\" alt=\"\" class=\"wp-image-7697\" width=\"237\" height=\"170\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_21.png 426w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_21-300x215.png 300w\" sizes=\"auto, (max-width: 237px) 100vw, 237px\" \/><\/figure>\n\n\n\n<p>Delete all of the code in the SVG Code text input. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_22-928x1024.png\" alt=\"\" class=\"wp-image-7703\" width=\"316\" height=\"349\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_22-928x1024.png 928w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_22-272x300.png 272w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_22-768x848.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_22.png 1192w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<p>Then click on the image-picker icon for Image. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"914\" height=\"100\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_23.png\" alt=\"\" class=\"wp-image-7704\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_23.png 914w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_23-300x33.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_23-768x84.png 768w\" sizes=\"auto, (max-width: 914px) 100vw, 914px\" \/><\/figure>\n\n\n\n<p>Drag and drop the Liberal Arts Logo into the image-picker from your finder\/file explorer and select it. Click Select and then click Apply and Save.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_24-1024x522.png\" alt=\"\" class=\"wp-image-7705\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_24-1024x522.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_24-300x153.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_24-768x392.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_24-1536x783.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_24-2048x1045.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Footer<\/strong><\/h4>\n\n\n\n<p>Scroll down to the section called Footer. Remove all of the current particles like we did for the Navigation and drop the following particles in one row:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Branding<\/li><li>Menu<\/li><li>Branding<\/li><li>Social<\/li><\/ul>\n\n\n\n<p>Your Footer section should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"165\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_26-1024x165.png\" alt=\"\" class=\"wp-image-7716\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_26-1024x165.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_26-300x48.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_26-768x123.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_26-1536x247.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_26.png 1966w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on the gear icons to edit each of the <strong>Branding particles<\/strong> to match the content in the Figma.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Quick Markdown Lesson:<\/strong><\/p><p>Several of the particles use Markdown. For example, in the Content input in the Branding particle, you can use markdown to add line-breaks and more to the text. <br><br>Markdown is a markup language that adds formatting elements to plaintext documents.&nbsp;<strong>Markdown Basic Syntax: <\/strong><a href=\"https:\/\/www.markdownguide.org\/basic-syntax\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.markdownguide.org\/basic-syntax\/<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"716\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_27-1024x716.png\" alt=\"\" class=\"wp-image-7718\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_27-1024x716.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_27-300x210.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_27-768x537.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_27.png 1190w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"799\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_28-1024x799.png\" alt=\"\" class=\"wp-image-7719\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_28-1024x799.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_28-300x234.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_28-768x599.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_28.png 1192w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then click Apply and Save.<\/p>\n\n\n\n<p>Click on the gear icon on the<strong> Social particle<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_29.png\" alt=\"\" class=\"wp-image-7721\" width=\"238\" height=\"78\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_29.png 502w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_29-300x98.png 300w\" sizes=\"auto, (max-width: 238px) 100vw, 238px\" \/><\/figure>\n\n\n\n<p>In Display, check \u201cIcons Only\u201d.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"971\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_30-1024x971.png\" alt=\"\" class=\"wp-image-7722\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_30-1024x971.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_30-300x284.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_30-768x728.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_30.png 1190w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In Social Items, click on each pre-existing item to edit the Icon and URL. Once you are done, click Apply and Save.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_31-1024x306.png\" alt=\"\" class=\"wp-image-7723\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_31-1024x306.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_31-300x90.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_31-768x229.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_31.png 1126w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"615\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32-1024x615.png\" alt=\"\" class=\"wp-image-7724\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32-1024x615.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32-300x180.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32-768x462.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32.png 1198w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We&#8217;ve completed building the Navigation and Footer. We will be returning to these later. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2. Building Custom Layouts<\/h3>\n\n\n\n<p>You may have noticed that the default outline includes some premade sections (ex: Navigation, Header, Intro, etc.) We can actually make <strong>Custom Layouts <\/strong>to rename and reorganize sections to better fit our needs.&nbsp;<\/p>\n\n\n\n<p>To make a custom layout, we will first need to create a new Layouts file in our directory. In finder or your file explorer, go to: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>your_root_directory\/user\/themes\/g5_helium\/layouts<\/code><\/pre>\n\n\n\n<p>In the layouts folder, create a new file called something like \u201ctraining-home.yaml\u201d<\/p>\n\n\n\n<p>Copy the following code into your new file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>version: 2\n\npreset:\n  image: gantry-admin:\/\/images\/layouts\/default.png\n\nlayout:\n  \/navigation\/:\n    -\n      - menu\n\n  \/spacer\/:\n    -\n      - position-spacer\n\n  \/mainbanner\/:\n    -\n      - position-mainbanner\n\n  \/body\/:\n    -\n      - position-body\n\n  \/footer\/:\n    -\n      - position-footer\n\n  offcanvas:\n    -\n      - mobile-menu<\/code><\/pre>\n\n\n\n<p>This code creates more specified sections for our Home page. We have included: Navigation, Mainbanner, Body, and Footer as sections.<\/p>\n\n\n\n<p>Save your YAML file.&nbsp;<\/p>\n\n\n\n<p>Now, refresh the Grav admin dashboard. In the top navigation, click on Outlines. We will create a new Outline for each page on our site.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"117\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_39-1024x117.png\" alt=\"\" class=\"wp-image-7743\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_39-1024x117.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_39-300x34.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_39-768x88.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_39.png 1176w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on the plus icon next to \u201cOutlines\u201d. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_40.png\" alt=\"\" class=\"wp-image-7744\" width=\"125\" height=\"51\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_40.png 346w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_40-300x121.png 300w\" sizes=\"auto, (max-width: 125px) 100vw, 125px\" \/><\/figure>\n\n\n\n<p>Title it \u201cHome.\u201d Leave the other options as their defaults, and click Confirm.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_41-1024x516.png\" alt=\"\" class=\"wp-image-7745\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_41-1024x516.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_41-300x151.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_41-768x387.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_41.png 1190w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click Back to Setup and return to the Layouts page in Gantry.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_42.png\" alt=\"\" class=\"wp-image-7747\" width=\"178\" height=\"55\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_42.png 400w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_42-300x93.png 300w\" sizes=\"auto, (max-width: 178px) 100vw, 178px\" \/><\/figure>\n\n\n\n<p>Click on the dropdown that currently says Base Outline. This is the <strong>Outline Selector<\/strong>. You should see your new Home outline listed. Select it. You are now editing the Home outline.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_43.png\" alt=\"\" class=\"wp-image-7759\" width=\"196\" height=\"258\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_43.png 392w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_43-228x300.png 228w\" sizes=\"auto, (max-width: 196px) 100vw, 196px\" \/><\/figure>\n\n\n\n<p>In order to connect this new outline to its corresponding page, click on the tab called Assignments. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"136\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_44-1024x136.png\" alt=\"\" class=\"wp-image-7760\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_44-1024x136.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_44-300x40.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_44-768x102.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_44.png 1146w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Toggle the switch next to Home to assign this Outline to the Home page. Click Save Assignments.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_45-1024x580.png\" alt=\"\" class=\"wp-image-7762\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_45-1024x580.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_45-300x170.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_45-768x435.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_45.png 1212w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_46.png\" alt=\"\" class=\"wp-image-7764\" width=\"202\" height=\"68\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_46.png 426w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_46-300x101.png 300w\" sizes=\"auto, (max-width: 202px) 100vw, 202px\" \/><\/figure>\n\n\n\n<p>Go back to the Layout tab and click on the Load button. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_47-1.png\" alt=\"\" class=\"wp-image-7767\" width=\"371\" height=\"59\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_47-1.png 780w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_47-1-300x48.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_47-1-768x122.png 768w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/figure>\n\n\n\n<p>This will give us the option to choose and apply our newly made custom layout to this outline. Select the training-home layout. Click Continue on the warning message.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_48-1-1024x654.png\" alt=\"\" class=\"wp-image-7774\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_48-1-1024x654.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_48-1-300x191.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_48-1-768x490.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_48-1.png 1056w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You should now see that the outline has the sections you made in your custom layout.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_78-1024x681.png\" alt=\"\" class=\"wp-image-7941\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_78-1024x681.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_78-300x199.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_78-768x511.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_78-1536x1021.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_78-2048x1362.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p id=\"step-3\">Click Save Layout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2\">Step 3. Inheriting the Navigation and Footer<\/h3>\n\n\n\n<p>Now that we&#8217;ve created our Navigation, Footer and Home outline, we want to apply the Navigation and Footer so that it displays on every page on our site. <\/p>\n\n\n\n<p>Click on the Outline Selector and click on Home.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32-1.png\" alt=\"\" class=\"wp-image-7729\" width=\"210\" height=\"261\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32-1.png 408w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_32-1-242x300.png 242w\" sizes=\"auto, (max-width: 210px) 100vw, 210px\" \/><\/figure>\n\n\n\n<p>In the Navigation section, click on the gear icon to access the Section Settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"240\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_34-1024x240.png\" alt=\"\" class=\"wp-image-7730\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_34-1024x240.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_34-300x70.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_34-768x180.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_34-1536x360.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_34.png 1964w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on the Inheritance tab. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_35-1-1024x684.png\" alt=\"\" class=\"wp-image-7732\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_35-1-1024x684.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_35-1-300x201.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_35-1-768x513.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_35-1.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the dropdown called &#8220;Outline&#8221;, click Base Outline. This means we want to inherit from our Base Outline where we just created our Navigation and Footer.<\/p>\n\n\n\n<p>Check the boxes that say &#8220;Section Attributes&#8221; and &#8220;Particles Within Section&#8221;. Click Apply and Save.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_36-1-1024x638.png\" alt=\"\" class=\"wp-image-7734\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_36-1-1024x638.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_36-1-300x187.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_36-1-768x478.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_36-1.png 1198w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You will see that the Navigation section is now grayed out and locked.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"164\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_79-1024x164.png\" alt=\"\" class=\"wp-image-7943\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_79-1024x164.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_79-300x48.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_79-768x123.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_79-1536x246.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_79.png 1960w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now scroll down to the Footer section and repeat the above steps.<\/p>\n\n\n\n<p>Once you Apply and Save, your homepage Navigation should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"70\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_37-1-1024x70.png\" alt=\"\" class=\"wp-image-7737\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_37-1-1024x70.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_37-1-300x20.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_37-1-768x52.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_37-1-1536x105.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_37-1-2048x139.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>And your homepage footer should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"187\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_38-1-1024x187.png\" alt=\"\" class=\"wp-image-7738\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_38-1-1024x187.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_38-1-300x55.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_38-1-768x141.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_38-1-1536x281.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_38-1-2048x375.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4. Building the Homepage Banner with a Custom Particle<\/h3>\n\n\n\n<p>Sometimes the default particles in Gantry don\u2019t deliver enough functionality for what we want to include on our website. When that\u2019s the case, we can create <strong>custom particles<\/strong>.<\/p>\n\n\n\n<p>Let\u2019s make a custom particle for the homepage banner in our Figma.&nbsp;<\/p>\n\n\n\n<p>To make a custom particle, we will first need to create a new Particles folder in our directory. In finder or your file explorer, go to: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>your_root_directory\/user\/data\/gantry5\/themes\/g5_helium<\/code><\/pre>\n\n\n\n<p>In the g5_helium folder create a new folder called \u201cparticles\u201d. We will store all custom particles for this site in this folder.&nbsp;<\/p>\n\n\n\n<p>Next create two files:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>home-banner.yaml<\/strong><\/li><li><strong>home-banner.html.twig<\/strong><\/li><\/ul>\n\n\n\n<p>For every new custom particle you create, you will need to make a yaml file and a html.twig file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>The YAML file<\/strong><\/h4>\n\n\n\n<p>The YAML file is the blueprint for the particle. We will be specifying what fields we want to include in our particle.&nbsp;<\/p>\n\n\n\n<p>Copy the following code into your YAML file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>name: Home Banner\ndescription: block includes full width banner image and a logo and title overlay\ntype: particle\n\nform:\n  fields:\n    enabled:\n      type: input.checkbox\n      label: Enabled\n      description: Globally enable to the particles.\n      default: true\n\n    banner:\n      type: input.imagepicker\n      label: Banner Image\n      description: Select image\n\n    title:\n      type: input.text\n      label: Title\n      description: Customize the section Name.\n      default: Title Goes Here\n\n    logo:\n      type: input.imagepicker\n      label: Logo\n      description: Select logo<\/code><\/pre>\n\n\n\n<p>Notice how each field contains the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Type \u2192 specifies the data type and type of data input (file picker, text field, dropdown, etc.)<\/li><li>Label<\/li><li>Description<\/li><li>Optional default value \u2192 what value is used if user does not enter any data<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>For a more extensive list of YAML Field types, visit: <a href=\"https:\/\/docs.gantry.org\/gantry5\/advanced\/particle-yaml-field-types\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.gantry.org\/gantry5\/advanced\/particle-yaml-field-types<\/a><\/p><\/blockquote>\n\n\n\n<p>For our Home banner we will want to include a banner image, logo, title, and description.<\/p>\n\n\n\n<p>Save your YAML file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>The Twig file<\/strong><\/h4>\n\n\n\n<p>The Twig file pulls information from the YAML file and is basically the template for the particle.&nbsp;<\/p>\n\n\n\n<p>Copy the following code into your twig file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% extends '@nucleus\/partials\/particle.html.twig' %}\n{% block particle %}\n\n&lt;div class=\"home-banner\" style=\"\n  background: url({{ particle.banner }});\n  background-position: center;\n  height: 280px;\n  position: relative;\n\"&gt;\n  &lt;div style=\"\n    padding-left: 80px;\n    padding-top: 25px;\n  \"&gt;\n    &lt;img src=\"{{ particle.logo }}\"&gt;\n  &lt;\/div&gt;\n  &lt;div style=\"\n    position: absolute;\n    bottom: 0;\n    padding-left: 80px;\n  \"&gt;\n    &lt;h1&gt;{{ particle.title }}&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n{% endblock %}<\/code><\/pre>\n\n\n\n<p>Notice how we\u2019re using HTML to build the structure of our particle and inserting the particle variables into where we need them.&nbsp;<\/p>\n\n\n\n<p>Save your Twig file.&nbsp;<\/p>\n\n\n\n<p>Now that we\u2019ve created our particle, refresh Gantry. You should see your new particle in the Particle Panel. Drag the particle into the section called Mainbanner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_50-1.png\" alt=\"\" class=\"wp-image-7795\" width=\"197\" height=\"242\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_50-1.png 386w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_50-1-244x300.png 244w\" sizes=\"auto, (max-width: 197px) 100vw, 197px\" \/><\/figure>\n\n\n\n<p>Click on the small gear icon to edit the particle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"164\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_51-1024x164.png\" alt=\"\" class=\"wp-image-7801\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_51-1024x164.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_51-300x48.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_51-768x123.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_51-1536x247.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_51.png 1944w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Download the <strong>gantry-banner.png<\/strong> and <strong>cola-logo.png<\/strong> files from Box. <\/p>\n\n\n\n<p>Click on the image-picker icon to edit the Banner Image. Drag in your downloaded banner and select it. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_52-1.png\" alt=\"\" class=\"wp-image-7804\" width=\"365\" height=\"43\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_52-1.png 912w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_52-1-300x36.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_52-1-768x93.png 768w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"519\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_53-1024x519.png\" alt=\"\" class=\"wp-image-7803\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_53-1024x519.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_53-300x152.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_53-768x389.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_53-1536x778.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_53-2048x1037.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Do the same for the Logo. <\/p>\n\n\n\n<p>For the Title, enter &#8220;Basic Training: Gantry Framework&#8221; into the text field. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_54-1024x622.png\" alt=\"\" class=\"wp-image-7805\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_54-1024x622.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_54-300x182.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_54-768x466.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_54.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click Apply and Save.&nbsp;<\/p>\n\n\n\n<p>Reload the front-facing home page. It should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"315\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_55-1024x315.png\" alt=\"\" class=\"wp-image-7806\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_55-1024x315.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_55-300x92.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_55-768x236.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_55-1536x473.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_55-2048x630.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4\">Step 5. Adding and Editing Page Content<\/h3>\n\n\n\n<p>Now that we have a header, footer, and main banner, we can move on to adding in the necessary content to the body of our page.&nbsp;&nbsp;<\/p>\n\n\n\n<p>We will use the Page Content particle to include all the page content.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_56.png\" alt=\"\" class=\"wp-image-7808\" width=\"209\" height=\"289\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_56.png 390w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_56-217x300.png 217w\" sizes=\"auto, (max-width: 209px) 100vw, 209px\" \/><\/figure>\n\n\n\n<p>First, we need to actually create some page content for the particle to grab. <\/p>\n\n\n\n<p>Click on the Pages tab in the left-hand navigation. You will be taken to a list of all the pages on your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_57.png\" alt=\"\" class=\"wp-image-7810\" width=\"217\" height=\"123\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_57.png 474w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_57-300x170.png 300w\" sizes=\"auto, (max-width: 217px) 100vw, 217px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-4-1024x493.png\" alt=\"\" class=\"wp-image-7837\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-4-1024x493.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-4-300x144.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-4-768x370.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-4-1536x740.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-4-2048x986.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To edit Home, click on Home.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_59.png\" alt=\"\" class=\"wp-image-7813\" width=\"174\" height=\"59\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_59.png 337w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_59-300x102.png 300w\" sizes=\"auto, (max-width: 174px) 100vw, 174px\" \/><\/figure>\n\n\n\n<p>Paste the Homepage text from the Figma into the WYSIWYG editor. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_60-1024x586.png\" alt=\"\" class=\"wp-image-7814\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_60-1024x586.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_60-300x172.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_60-768x440.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_60-1536x880.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_60-2048x1173.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click Save.<\/p>\n\n\n\n<p>Go back to your Home outline in Gantry. Find the Page Content particle and drag it into the Body section. Click Save Layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"166\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_61-1024x166.png\" alt=\"\" class=\"wp-image-7818\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_61-1024x166.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_61-300x49.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_61-768x124.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_61-1536x248.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_61.png 1966w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To insert an image drag the Logo\/Image particle to the right of the Page Content particle in the Body section. Both particles should have a width of 50% in the same row. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"160\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_62-1024x160.png\" alt=\"\" class=\"wp-image-7820\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_62-1024x160.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_62-300x47.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_62-768x120.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_62-1536x240.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_62.png 1956w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on the gear icon of the Logo\/Image particle. Delete the SVG code and in Maximum Height, enter 100%.<\/p>\n\n\n\n<p>Use the image-picker to select the cat-computer.jpeg.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_63-1-936x1024.png\" alt=\"\" class=\"wp-image-7822\" width=\"417\" height=\"455\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_63-1-936x1024.png 936w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_63-1-274x300.png 274w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_63-1-768x840.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_63-1.png 1190w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/figure>\n\n\n\n<p>Click Apply and Save.<\/p>\n\n\n\n<p>Your Homepage should now look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_64-1024x670.png\" alt=\"\" class=\"wp-image-7824\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_64-1024x670.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_64-300x196.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_64-768x503.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_64-1536x1005.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_64-2048x1341.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-5\">Step 6. Adding a Custom Stylesheet Asset<\/h3>\n\n\n\n<p>Our site still doesn\u2019t look quite right. There\u2019s a lot of unnecessary spacing and stylings that come with the basic Helium theme but don&#8217;t match our desired design. To make more specific CSS changes to our page, we can add a stylesheet as an <strong>Asset<\/strong>.&nbsp;<\/p>\n\n\n\n<p>In your finder or file explorer, go to: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>your_root_directory\/user\/data\/gantry5\/themes\/g5_helium\/css<\/code><\/pre>\n\n\n\n<p>In the box folder of assets, you will see a file also named &#8220;training-custom.css&#8221; Download and copy that file into the css folder.<\/p>\n\n\n\n<p>Save your CSS file.&nbsp;<\/p>\n\n\n\n<p>In Gantry while on the Home Outline, click on the <strong>Page Settings<\/strong> tab. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_72-1024x136.png\" alt=\"\" class=\"wp-image-7849\" width=\"429\" height=\"57\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_72-1024x136.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_72-300x40.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_72-768x102.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_72.png 1102w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/figure>\n\n\n\n<p>Scroll to the section called <strong>Assets<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_73-1024x592.png\" alt=\"\" class=\"wp-image-7850\" width=\"412\" height=\"238\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_73-1024x592.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_73-300x173.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_73-768x444.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_73.png 1190w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/figure>\n\n\n\n<p>In the subsection labeled CSS click on the plus button to add a new item. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_74-1-1024x173.png\" alt=\"\" class=\"wp-image-7853\" width=\"482\" height=\"80\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_74-1-1024x173.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_74-1-300x51.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_74-1.png 1112w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/figure>\n\n\n\n<p>Name this item \u201cCustom CSS\u201d then click on the item you just added to open the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_75-1024x974.png\" alt=\"\" class=\"wp-image-7854\" width=\"484\" height=\"460\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_75-1024x974.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_75-300x285.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_75-768x731.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_75.png 1188w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/figure>\n\n\n\n<p>Click on the file icon next to File Location. This will open a file picker. Click on the CSS folder and select your training-custom.css file. Click Select. Then click Apply and Save and Save Page Settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"521\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_76-1024x521.png\" alt=\"\" class=\"wp-image-7855\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_76-1024x521.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_76-300x153.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_76-768x391.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_76-1536x782.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_76-2048x1043.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Note: <\/strong>If you want your stylesheet to apply to the<strong> entire site<\/strong> and not just this individual page, you will need to repeat this process on each new outline.<\/p><\/blockquote>\n\n\n\n<p>Any time you want to make more CSS edits, all you have to do is edit the training-custom.css file directly and save it. Your new changes should show up once you refresh your page.<\/p>\n\n\n\n<p>Refresh your home page. This is what it should look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_77-1024x491.png\" alt=\"\" class=\"wp-image-7857\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_77-1024x491.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_77-300x144.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_77-768x369.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_77-1536x737.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_77-2048x983.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-6\">Step 7. Adding a New Page<\/h3>\n\n\n\n<p>We\u2019ve completed the home page! Nice! Now, let\u2019s add another page. Grav\u2019s default pages include a Home page and a Typography page.&nbsp;<\/p>\n\n\n\n<p>You can edit and manage your pages in the Pages tab in the left-hand navigation bar.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-2-1024x493.png\" alt=\"\" class=\"wp-image-7835\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-2-1024x493.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-2-300x144.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-2-768x370.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-2-1536x740.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_58-2-2048x986.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>First, let\u2019s delete the Typography page since we don\u2019t need it. Click on the three dots next to the Typography page. Then click on the red trash icon. Click Continue.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"872\" height=\"536\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_65.png\" alt=\"\" class=\"wp-image-7834\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_65.png 872w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_65-300x184.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_65-768x472.png 768w\" sizes=\"auto, (max-width: 872px) 100vw, 872px\" \/><\/figure>\n\n\n\n<p>To add a new page, click on the Add button in the top right.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_66.png\" alt=\"\" class=\"wp-image-7839\" width=\"218\" height=\"53\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_66.png 512w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_66-300x73.png 300w\" sizes=\"auto, (max-width: 218px) 100vw, 218px\" \/><\/figure>\n\n\n\n<p>We will make this page the About page. Enter \u201cAbout\u201d in the Page Title text field. Leave the rest of the settings as they are. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_67-1024x659.png\" alt=\"\" class=\"wp-image-7840\" width=\"513\" height=\"330\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_67-1024x659.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_67-300x193.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_67-768x494.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_67.png 1392w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<p>Then click Continue. Grav should automatically take you to the page editor.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_68-1024x584.png\" alt=\"\" class=\"wp-image-7843\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_68-1024x584.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_68-300x171.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_68-768x438.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_68-1536x876.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_68-2048x1169.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the upper right corner, click Save. Then click the back button to return to the Pages tab. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"116\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_69-1024x116.png\" alt=\"\" class=\"wp-image-7844\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_69-1024x116.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_69-300x34.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_69-768x87.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_69.png 1076w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You should see your new About page listed there.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_70.png\" alt=\"\" class=\"wp-image-7845\" width=\"195\" height=\"223\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_70.png 386w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_70-262x300.png 262w\" sizes=\"auto, (max-width: 195px) 100vw, 195px\" \/><\/figure>\n\n\n\n<p>Now let\u2019s refresh our front-facing site. You should now see a new page called About in the navigation bar.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"430\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_71-1024x430.png\" alt=\"\" class=\"wp-image-7847\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_71-1024x430.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_71-300x126.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_71-768x323.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_71-1536x646.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/gantry_71-2048x861.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>And before we forget, let\u2019s apply our custom CSS to this new page as well (refer to Step 5).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-7\">Step 8. Now It\u2019s Your Turn!<\/h3>\n\n\n\n<p>Use what you\u2019ve learned in the steps above to complete the rest of your new grav site. We\u2019ve made the Home page, now try building the About page.&nbsp;<\/p>\n\n\n\n<p>Figma Link: <a href=\"https:\/\/www.figma.com\/file\/bPV6qNcQXcVqbnrPNA3Sd1\/Gantry-Training-Figma?node-id=0%3A1\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.figma.com\/file\/bPV6qNcQXcVqbnrPNA3Sd1\/Gantry-Training-Figma?node-id=0%3A1<\/a><\/p>\n\n\n\n<p>Tips:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There are always multiple ways to do things in web development! Try to figure out how to make customizations if you\u2019re running into limitations with the given particles in Gantry. (Can\u2019t find a good button particle? Try making a custom one!)<\/li><li>Remember responsiveness! The Helium theme already provides some mobile responsiveness, but sometimes things slip through the cracks. Use CSS to make sure your website looks good on ALL devices.&nbsp;<\/li><li>Not seeing your changes reflected on your site? Try clearing the cache and hard reloading your page. There is also a Clear Cache button in the Grav Admin Dashboard.<\/li><\/ul>\n\n\n\n<p><strong>Helpful Documentation Links:<\/strong><\/p>\n\n\n\n<p><strong>Grav: <\/strong><a href=\"https:\/\/learn.getgrav.org\/17\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>https:\/\/learn.getgrav.org\/17<\/strong><\/a><br><strong>Gantry: <\/strong><a href=\"https:\/\/docs.gantry.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>https:\/\/docs.gantry.org\/<\/strong><\/a><strong>&nbsp;<\/strong><br><strong>W3 Schools HTML\/CSS tutorials: <\/strong><a href=\"https:\/\/www.w3schools.com\/html\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>https:\/\/www.w3schools.com\/html\/default.asp<\/strong><\/a><br><strong>Markdown Documentation:<\/strong> <a rel=\"noreferrer noopener\" href=\"https:\/\/www.markdownguide.org\/basic-syntax\/\" target=\"_blank\"><strong>https:\/\/www.markdownguide.org\/basic-syntax\/<\/strong><\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This training will go through the basics of the Gantry 5 framework for Grav. Note: Basic knowledge of CSS\/HTML is required to complete this training. Before starting this training, complete the following tutorials to set up a local Grav site &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/10\/07\/grav-building-your-own-site-using-gantry-5\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":700,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7611","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/7611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/700"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=7611"}],"version-history":[{"count":137,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/7611\/revisions"}],"predecessor-version":[{"id":7976,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/7611\/revisions\/7976"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=7611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=7611"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=7611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}