Installing GRID Components

This guide explains how to expand your design library by "installing" or enabling new components within your Block Grid. It helps you understand that your component list isn't fixed—you can add specialized blocks like Advanced Maps, Comparison Tables, or Third-party Integrations as your site evolves. You’ll learn how to unlock these tools so they appear in your "Add Content" menu.

The Component Library

In Umbraco 17+, your components live in a central repository. When you click the plus (+) icon on a page, you are seeing a filtered view of this library. "Installing" a component often means moving it from the background "Available" list into the "Active" list for a specific page type. This foundation keeps your editor clean by only showing the tools you actually need for a specific task.

Packages and uSkinned Add-ons

Sometimes, a component isn't in your site yet. In these cases, you might install an Umbraco Package (via NuGet) or a uSkinned Add-on. These are pre-packaged sets of code, styles, and settings that "plug in" to your existing Grid. Once installed, these new components become available as blocks that you can drag and drop just like a simple text box.

[Image showing the Umbraco 'Packages' section and the 'Available Blocks' configuration screen]

Watch: Expanding Your Block Grid Library in Umbraco 17+

Blank placeholder image

This video shows how to navigate to the Block Grid configuration and enable hidden or newly installed components for your editors to use.

Other Related Tutorials

Action Steps to Enable/Install Components

  1. Access Settings: (Admin Only) Go to the Settings section and find your Document Types.

  2. Locate the Grid Property: Find the "Advanced Page" or "Grid" property and click the cog icon to configure the Block Grid.

  3. Add Available Blocks: Click "Add Block" to see a list of components already in your system but not yet "installed" (enabled) on this page type.

  4. Install External Packages: If the component is a third-party tool, use the Packages menu in the main Umbraco sidebar to search for and install the plugin.

  5. Refresh and Test: Once added to the configuration, return to your Content tab. Click the (+) icon on a page to see your newly installed component ready for use.

 

Pro-Tip: Keep your "Installed Components" list lean! If you have 50 different types of blocks enabled but only use 5, your content editors will get overwhelmed. Only "install" the components that add real value to your design.

Where Next?

Now that your components are installed, it’s time to move from basic structure to professional style! Your next step is to explore "Formatting Rows & Blocks".