Build an effective Homepage with Umbraco & uSkinned

The Homepage is the first page a user will see when they visit your website. After installation you will note that your theme will already have a Homepage set and it will sit at the top of the node tree hierarchy.

The Homepage in a uSkinned theme is special type of Advanced Page and will function in the exact same way as any other pages of this type. You should never delete this Homepage, however, you can delete the components and content that are assigned to it.

Here we will start with a blank Homepage node and build up out content step-by-step to create an effective Homepage. Underneath the Homepage you will see the "Components" folder. This is the folder that will house all of the pages content. On the Homepage node itself, however, there are also a number of configuration options that we can use.

Create an impact with a Banner Component

Let's start with a Banner at the top of the page. These are great for catching a users attention straight away with some imagery and a straight forward call to action.

Step 1.1

First, we'll need to create a Banner below the Homepage:

  1. Right-click on the "..." icon to the right of the Components folder
  2. Choose the Banner Component
  3. Name your Banner Component - this is for the CMS reference only
  4. Go to the Settings tab
    1. We will only add one Banner Slide in our example so lets set the banner to hide Arrows, hide Navigation dots and to not Autoplay.

Create a Parallax banner in Umbraco CMS

Autoplay banner slider Umbraco CMS themes

Step 1.2

Now add a Banner Slide to sit within the Banner Component:

  1. Go to the Content tab of the Banner Component. Click the "+" icon and add your first Banner Slide

Add a slide to your banner in Umbraco CMS

  1. The Banner Slide is split into two sections, Settings and Content. Let's configure the Settings first: 
    1. Give the Banner Slide a name - this is for the CMS reference only
    2. Choose a background colour
    3. Choose a button colour
    4. Select a size. Takeover will fill the height of the viewport, Medium will fill around 60-70% the height of the viewport and Short will fill around 30-50% of the viewport. For this example we'll choose Takeover. You can mix and match these Banner Slide sizes in the one Banner.
    5. Select a text alignment
    6. Now, since we will add an image to the Banner Slide we will also want to select the option to add an Overlay. This will create a semi-transparent layer between the image and the text on the Banner Slide. The colour of the Overlay will depend on the background colour you chose earlier.
    7. We'll add a Scroll Prompt. This will indicate to users that there is more content below this Takeover Banner Slide.
    8. We'll not bother with Parallax at the moment so let's leave that off.
    9. And the final setting is Animate. If turned on the Banner Slide text will animate in, so let's choose to do that.

Settings for Umbraco CMS themes banner slider

Parallax options for Umbraco CMS

  1. Now we can add some Content:
    1. Click on the Image Media Picker. A slide out panel will appear to the right-hand side, this will show the entire contents of the Umbraco Media Library. Navigate to an existing image or choose to upload a new one, select the image and click Submit in the bottom-right. Now add some alt text for the image.
    2. We won't bother with a Video background for this example but you can upload a short looping video here.
    3. Now enter a Heading for your banner and select the correct HTML tag to display it in. Since this will be the first banner at the top of the page we should set the Heading to be a H1.
    4. Add a brief paragraph of text.
    5. It's can be really effective to add a Call to Action button to a Banner Slide so let use the URL Picker to link to an internal page of our site, the Contact Us page in this instance, then enter the caption for that button.

Media Library picker Umbraco

Enter content Umbraco CMS

Step 1.3

Now that we've added our Banner with a Banner Slide we can hit Save and Publish in the bottom-right.

Takeover Banner with Source

Add Services with Pods Component

The next thing we'll want our users to know about is our organisations Services. For that, lets use a Pods Component.

Step 2.1

  1. Right-click on the "..." icon to the right of the Components folder
  2. Choose the Pods Component
  3. Name your Pods Component - this is for the CMS reference only

Umbraco CMS Content Pods

  1. Go to the Settings tab
    1. Choose to display the image Above the text
    2. We have 3 key Services so lets pick 3 per row
    3. And, we would like each to animate in, so lets turn that on too.

Content pod settings in Umbraco CMS

  1. Go to the Intro tab
    1. Choose an alignment for your Introduction - for this example lets keep it left-aligned. 
    2. We want to add a short introduction on our services so lets add a Heading
    3. Set the Heading to be H2, since our single Banner above is an H1 - it's always important to have hierarchy within your website, it will improve your search rankings.
    4. Add a brief overview on the services via the text field
    5. We don't need to add a link here so leave that blank

Add intro content to Umbraco CMS component

Step 2.2

Now we can start adding our Pods:

  1. Go to the Content tab of the Pods Component. Click the "+" icon and add your first Pod
    1. Give the Pod a name - this is for the CMS reference only
    2. Add an image via the Media Picker and include image alt text
    3. Enter a Heading for your Pod
    4. Enter some introductory text about your service in the Text field
    5. Link to the relevant Service page
      1. Repeat for your other Services

Nested content in Umbraco CMS with uSkinned themes

Nested content in Umbraco CMS

Step 2.3

We want to add a link to the full Services page:

  1. Go to the Outro tab
    1. Choose an alignment for your Outro - for this example lets keep it left-aligned. 
    2. We can leave the Heading and Text fields blank
    3. Add a link to the Services page via the URL Picker then enter a caption for the button

Step 2.4

Finally, since this Pods Component will be on the Homepage - which is an Advanced Page - we will want to use the Advanced Page Settings tab. Here you can add some finishing touches to the overall look:

  1. Choose a Background Colour
  2. Choose a Button Colour
  3. You can even add and configure a Background Image but lets leave that out on this example
  4. The final configuration is to set the width of the Component. We want the Pods to be the width of the Site but not bleed all the way to the edge of the viewport on larger screens therefore we should set it to be "Wide".

Advanced Settings in Umbraco CMS

3 content pods Umrbaco

Step 2.5

Now that we've added our Pods we can hit Save and Publish in the bottom-right.

Pods with Source - Umbraco CMS

Use a Text with SlideShow Component to introduce your organisation

Step 3.1

The Text with Slideshow is a great component to break up your content and add some life with Videos or Images next to text. They can be used to list out information or as impactful Call to Actions on any page in your site.

  1. Right-click on the "..." icon to the right of the Components folder
  2. Choose the Text with Slideshow Component
  3. Name your the Component - this is for the CMS reference only

Step 3.2

  1. Go to the Settings tab
    1. Choose the position of your text. It can sit either Before or After your image.
    2. Choose a Background Colour
    3. Choose a Button Colour
    4. You can even add and configure a Background Image but lets leave that out on this example
    5. Lets not turn on "Add spacing around image" as for this design we'd like the Image/Video to bleed to the edge of the Component
    6. We will only add one Image/Video in our example so lets set the banner to hide Arrows, hide Navigation dots and to not Autoplay.
    7. Turn on animation to keep this Component consistent with the other on this page

Text position and backgrounds Umbraco

Slideshow options Umbraco

Step 3.3

  1. Go to to Text tab
    1. Choose an alignment for the text - for this example lets keep it left-aligned.
    2. Enter a Heading Set the Heading to be H3, since our single Banner has an H1 and the Pods introduction has an H2 - it's always important to have hierarchy within your website, it will improve your search rankings.
    3. Add a brief paragraph about your organisation
    4. Add a link using the URL Picker and link this to your About Us page. Enter a caption for the button

Text alignment and related links Umbraco CMS

Step 3.4

  1. Go to the Image/Video Slideshow - don't worry about the word Slideshow though as you can choose to only add one Image/Video - tab. Click the "+" icon and add your first Image/Video - for this example we'll add an Image:
    1. Give the Image/Video a name - this is for the CMS reference only
    2. Add an image via the Media Picker and include image alt text 
    3. Disable Light Window. If enabled it would allow you to click on the image and view a full version of it in a Light Window
    4. Lets not add any link to the Image itself either

Slides for Slick Carousel Umbraco nested content

Choose image or video slide Umbraco

Content options with Light Window for carousel slides in Umbraco CMS

Step 3.5

Now that we've added our Text with Slideshow we can hit Save and Publish in the bottom-right.

Text with Slideshow - Source theme from uSkinned for Umbraco CMS

Adding the final touches to your Homepage

We've now added all of the unique content that our Homepage should display to users on the frontend. However, there are some final touches we can add that will improve not only the user experience but boost our search engine optimisation (SEO) as well.

To add these final touches you should navigate to the Homepage node in the tree menu.

Step 4.1

First we want to add some unique meta information. This is the information that will be displayed on Google and other search engine results. uSkinned themes allow you to enter a Meta Title and Meta Description. Don't worry if you don't enter anything though, in that case the Meta Title will default to the name of the Node followed by the name of the website.

  1. Go to the SEO tab
    1. Enter a unique Meta Title - this should not not exceed 60-70 characters
    2. Enter a Meta Description - this should be a minimum of 100 characters but not exceed 150-160 characters
    3. You can upload a page specific Open Graph image, however, you if you leave this blank it will use the one you uploaded for site wide content in Global Settings
    4. Assign a Twitter creator name by entering your own or your organisations Twitter Username. Again, if left blank it will default to the one you setup in Global Settings
    5. You can even add an alternative URL for any page in the site. You probably wouldn't use this on the Homepage though but it could come in handy if you create any campaign specific Landing Pages that would need an altered URL

SEO options in Umbraco CMS with uSkinned

Step 4.2 

  1. Go to the Navigation tab
    1. You can choose to hide any page from all Navigation in your uSkinned website. Keep this turned off for the Homepage
    2. Choose to use an alternative name when the page is featured in breadcrumb trail, this can be useful for SEO purposes
    3. Since this is the Homepage and there will be no pages higher than it in the site hierarchy we can turn off the breadcrumb trail
    4. Again, you can choose to use an alternative name for the page in the Sitemap navigation

Page navigation settings in Umbraco CMS with uSkinned

Step 4.3

Within the Website Configuration area you can create lots of Reusable Components and Pods, these can be great for key messages that would be used through out your website, such as, a Call to Action Strip that can sit at the bottom of each page asking users to get in touch.

  1. Go to the Reusable Content tab
    1. For this example, lets turn turn off the default Pods setup in Global Settings
    2. Do the same for the Top Components
    3. Since there is a default Call to Action Strip setup in Global Settings for Bottom Components we can just leave that to display to finish of the content of the frontend

Reusable content in Umbraco CMS with uSkinned

Step 4.4

Each page in a uSkinned theme has a Scripts tab. This lets you add custom and third-party Scripts, such as, Google Tag Manger, Analytics or Social Sharing buttons to each individual page. Don't worry, entering code here will not override the default Scripts that you may have added in Global Settings.

Lets leave this blank for our example.

Page specific scripts like Google Analytics in Umbraco CMS with uSkinned

Step 4.5

  1. Go to the Properties tab
    1. This features Umbraco standard stuff, such as, publish and unpublish date fields.
    2. For multi-lingual websites you will have more than one Home node and Website Configuration node. If your site is Multi-lingual then you can assign the correct Website Configuration node here
    3. We have added a switch to Disable Delete to all nodes. This is to make sure you don't accidentally delete an important, like the Homepage. Ensure this is enabled.
    4. You can choose to not display the Header and/or the Footer of any page. This would be useful for a one-page website or for a campaign specific landing page. We want to see the Header and Footer so just leave these for now.
    5. You can even enter custom class names to any page or component within the site. This is great if you want to tweak something on only one page or component in the site but don't want to alter the MVC code behind the scenes. Simply add some custom CSS to the stylesheets then add your custom classes here. We'll leave this blank.

Custom class, hide footer, hide header and disable delete node in Umbraco CMS with uSkinned

Step 4.6

Hit Save and Publish in the bottom-right. Go to frontend and check out your brand new Homepage built with uSkinned themes for Umbraco CMS.

That's it! Well done :-)

Full homepage - Source theme from uSkinned for Umbraco CMS

Get started today

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