After reading this article, you'll know how to:

To get started, we'll need to install the wrapper block to our application. Navigate to the block store and install the block called 'Wrapper', you can find it under the components tab.

After installing the wrapper block to your application you'll find it as a component in your page builder.

Wrappers are super useful for a variety of reasons. The first reason why a wrapper is useful is to reduce clutter and make configuring an application and/or page easier. Wrappers contain components. You can add a bunch of components to a wrapper and then specify which options of these components you'd like your user to change. So instead of having to manually go through all the options of a bunch of components a wrapper limits you, in a good way, and makes you focus on the options that are important.

An example where a wrapper makes configuring a page a lot easier is inside of the login template. The only configuration for this page is to change the name of the page.

This is an extremely simple example of course but it gives you an idea of what the wrapper does. It has a variety of components within it but the creator of the template only allowed the users to change the page title. You are however able to customize it a bit further but this isn't recommended, you can do this by navigating to the component tree and unlocking the wrapper.

Alright so how can you create your own wrapper, and pick and choose which options your users can alter.

In order to create your own wrapper that your users can use and configure drag the wrapper component on your canvas.

In order to add components to your wrapper you'll probably think it's as simple as just dragging a component into the wrapper component, but this isn't the case. Well, it is but we first need to unlock the wrapper before we can drag other components into it.

Head to the component tree and unlock the wrapper.

After unlocking, you can drag components into the wrapper.

To specify which component options within the wrapper are allowed to be configured you have to go to the options of the given component.

Once there, you can see the options icon appear when you mouse over an option (indicated by the triple dots).

You can then select the Add option to 'Wrapper'. this will add the options to be configurable from the wrapper. You can select as many options as you like, and of course options from different components. When you're done pushing options to your wrapper don't forget to lock it the same as we just unlocked it (via the component tree).

In this example I have a create form to create new users, I've added the title text to the wrapper and the option to change the icon of the submit button. My wrapper will look like this:

If I change the title of the form from the wrapper options we can see the changes reflected in the form, the same goes for the button, if I add a '+' icon from the wrapper it'll appear on the button.

And it'll look like this on the page:

Wrapper simplifies the configuring of your pages by a lot, and you can specify yourself which options are allowed to be configured by your users. Or maybe more importantly which options aren't allowed to be changed.