How to add a modular component to your page

In each uSkinned theme users build up their pages using pre-built modular components. In this tutorial we run through the steps involved in adding a component to any page in your Umbraco website.

A "Components" folder is automatically created each time a page is added to the CMS.

Step 1

Under any page hover the Components folder > Click on the "..." icon > A slide out panel will appear with your available components > Scroll up and down in the slide out panel to see all available components > Choose any (for this example we have chosen the Pods component)

Step 2

Read the instructions for the component > Give the component a name in the field provided

Step 3

Go to the settings tab > Select the configurations for your component > Each component has varying settings depending on it's purpose

Step 4

Go to the intro tab > Enter the relevant information you wish to sit above the Pods in your component (you can leave blank if you wish) 

Step 5 

A number of the available components include "child items", in this case "individual pods" > We use the "+" icon to add our first pod 

Step 6

Enter the relevant information for your pod > Since we've chosen to display "3 per row" in the settings tab we will add 3 pods in our example

Step 7

Go to the outro tab > Enter the relevant information you wish to sit below the Pods in your component (you can leave blank if you wish) 

 

Step 8

Since the Pods component is available to add to both Advanced Pages and Standard Pages there are some additional settings that can be set for when they are used on an Advanced Page.

Go to the advanced page settings tab > Choose your background and button colours > Choose other display options like background images and component width if necessary, in our example we will choose not to configure those options.

 

Step 9

Go to the properties tab > You can choose to enter a custom class here > This can be useful if you have added extra CSS styles to your theme, you can then choose to style this component uniquely based on those styles. In our example we will leave blank.

Step 10 

Now we're ready for the component to appear on the front end > In the bottom right corner hit "Save and Publish".

You will now see the component appear in the tree menu to the left. If you navigate to the front end you will see the component in place on your website! :-) Although the component may not be in the place you intended it to be, therefore, you'll want to re-order your components on that page - don't worry, that's easy too!

Bonus Steps

How to re-order your components :-) woohoo!

Step 11

Right click on the components folder > Choose "Sort" from the list > Drag and drop your components in the list into a new order > Hit save in the bottom right of the panel

Step 12

Your new order will appear in the tree menu > Go to the front end and it will display your new order too.

Well done! #h5yr

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results.

NEW eCommerce theme!

Our much anticipated eCommerce theme, Merch, is now available.